<header>
	<h1>Calculator</h1>
</header>


<form class='calculator'>
	<input type='number'>
	<button class='clear'>c</button>

	<button class='digit' data-number='7'>7</button> <!-- maybe -->
	<button class='digit'>8</button>
	<button class='digit'>9</button>
	<button data-operator='/'>/</button>

	<button class='digit'>4</button>
	<button class='digit'>5</button>
	<button class='digit'>6</button>
	<button data-operator='*'>*</button>

	<button class='digit'>1</button>
	<button class='digit'>2</button>
	<button class='digit'>3</button>
	<button data-operator='-'>-</button>

	<button class='digit'>0</button>
	<button>.</button>
	<button type='submit'>=</button>
	<button data-operator='+'>+</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 grid rules */
.calculator {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
}
.calculator input {
	grid-column: 1 / span 3;
}

/* Style */
.calculator {
	padding: 20px 10px;
	border: 2px solid black;
	border-radius: 6px;
	max-width: 200px;
	background-color: lightblue;
}

.calculator input {
	display: block;
	padding: 10px;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 0;
}

.calculator button {
	display: block;
	padding: 10px 0;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 0;
	font-size: 20px;
}

.calculator button {
	background-color: lightgreen;
}

.calculator .digit {
	background-color: lightgray;
}

.calculator .clear {
	background-color: salmon;
}



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.