<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.