Public
Edited
Dec 4
<style>
#fullboxes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px;
}
#fullboxes * {
border: 2px solid black;
padding: 20px;
text-align: center;
}
#display {
grid-column: 1/4;
}
</style>
<div id="fullboxes"></div>`
{
const fullboxes = html`<div style="display: grid;
grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px;"></div>`;
let display;
function createButton(num) {
const box = html`<div class="myDIV" style="border: 2px solid black; padding: 20px; text-align: center;">${num}</div>`;
if (num === ' ') {
box.id = 'display';
display = box;
}
box.onclick = () => {
console.log("Clicked", box.textContent);
if (box.textContent === "=") {
try {
display.textContent = eval(display.textContent);
} catch (e) {
display.textContent = "Error";
}
} else if (box !== display) {
display.textContent += box.textContent;
}
};
fullboxes.appendChild(box);
}
' 789456123+0='.split('').forEach(num => createButton(num));
return fullboxes;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
