<header>
<h1>Calculator</h1>
</header>
<form class='calculator'>
<input type='number'><!-- really... it's an 'output'--> <button>c</button>
<button>7</button> <button>8</button> <button>9</button> <button>/</button>
<button>4</button> <button>5</button> <button>6</button> <button>*</button>
<button>1</button> <button>2</button> <button>3</button> <button>-</button>
<button>0</button> <button>.</button> <button>=</button> <button>+</button>
</form>
<!-- I'd probably use data-attributes to denote the number and the = button would be type='submit' - but this is probably more of a CSS challenge -->
<!-- I'd not lay out the buttons like this in the HTML ... but it's just for fun -->
/* key rules */
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.calculator input {
grid-column: 1 / span 3;
}
/* part 2: https://codepen.io/sheriffderek/pen/xxEayOe?editors=0110 */
/* part 3: https://codepen.io/sheriffderek/pen/XWjxaVa?editors=0110 */
/* Style */
.calculator {
padding: 10px;
border: 2px solid black;
border-radius: 6px;
max-width: 200px;
}
.calculator input, .calculator button {
display: block;
padding: 10px 0;
}
function sayNameButton(target) {
alert(target.textContent);
}
document.addEventListener('click', function(event) {
// stuff...
if ( event.target.matches('button') ) {
sayNameButton(event.target);
}
});
document.addEventListener('submit', function(event) {
event.preventDefault();
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.