<header>
<h1>Calculator</h1>
</header>
<form class='calculator'>
<output>0</output>
<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 -->/* reset ^ */
/* setup (kinda like a company-wide reset that everyone knows) */
* {
box-sizing: border-box;
}
/* variables (well, "custom properties") */
html {
--black: #222;
--white: #efefef;
--gray-light: #eee;
--gray: #999;
--gray-dark: #666;
--color: lightblue;
--warning: salmon;
// EVERYTHING that can be a variable... should be
}
// ^ these are built in CSS 'custom properties... but they are UGLY
// these are Sass 'variables'
$black: #222;
$pad: 10px;
//
// 'custom properties' can be changed on the fly and are really cool for SOME reasons though....
/* mixins */
@mixin button-standard() {
/* reset */
border-radius: unset;
background: unset;
/* style */
display: block;
padding: $pad;
line-height: 1;
// background-color: var(--color);
border: 1px solid rgba(0,0,0,.05);
font-size: 20px;
color: var(--black);
border-radius: 50%;
/* */
box-shadow:
2px 2px 5px 0px rgba(0,0,0,.3),
-2px -2px 7px 0px rgba(255,255,255,.8);
/* you could discuss the cons of Neumorphism */
/* https://css-tricks.com/neumorphism-and-css */
&:active {
box-shadow:
2px 2px 5px 0px rgba(0,0,0,.1),
-2px -2px 7px 0px rgba(255,255,255,.4);
}
&:focus {
outline: 0;
box-shadow:
2px 2px 5px 0px blue,
-2px -2px 7px 0px blue;
}
}
/* component */
.calculator {
// layout
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: $pad;
output {
grid-column: 1 / span 3;
}
// style (I might seperate these concerns)
padding: $pad*2 $pad;
border: 2px solid $black;
border-radius: $pad*.5;
max-width: 220px;
background-color: lightgray; /* should be a variable! */
output {
display: block;
padding: $pad*.5 $pad;
border: 1px solid var(--gray);
background-color: green;
color: lime;
font-family: monospace;
font-size: 26px;
}
button {
@include button-standard();
&.digit {
// background-color: lightgray;
}
&.clear {
// background-color: var(--warning);
}
}
}
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.