HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
#calculator {
box-shadow: 0 0 0 2px #000;
max-width: 300px;
max-height: 400px;
height: 100%;
margin: 2px auto;
background: #000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 4px;
}
.grid-container {
display: grid;
height: 100%;
grid-template-columns: repeat(4, minmax(1em, 1fr));
grid-template-rows: repeat(6, minmax(1em, 1fr));
grid-template-areas: "digits digits digits digits""clea sque perc divi""seve eigh tens mult""four five sixx minu""one two thre plus""zero dots equa plus";
}
.grid-container>* {
cursor: pointer;
font-size: 2em;
border: 1px solid #000;
align-content: center;
display: flex;
justify-content: center;
align-items: center;
background: #555;
color: #eee;
transition: 0.2s background-color;
font-family: 'Arial Narrow Bold', sans-serif;
border-radius: 4px;
overflow: hidden;
}
.grid-container>*:hover {
background: #333;
}
.grid-container>*:active {
background: #222;
transform: scale(.99);
}
.digits {
grid-area: digits;
background: #eee !important;
justify-content: flex-end;
color: #333;
padding: 0 .1em;
}
.zero {
grid-area: zero;
}
.dots {
grid-area: dots;
}
.equa {
grid-area: equa;
}
.plus {
grid-area: plus;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.thre {
grid-area: thre;
}
.four {
grid-area: four;
}
.five {
grid-area: five;
}
.sixx {
grid-area: sixx;
}
.seve {
grid-area: seve;
}
.eigh {
grid-area: eigh;
}
.tens {
grid-area: tens;
}
.minu {
grid-area: minu;
}
.mult {
grid-area: mult;
}
.divi {
grid-area: divi;
}
.perc {
grid-area: perc;
}
.sque {
grid-area: sque;
}
.clea {
grid-area: clea;
background: #f00 !important;
}
</style>
</head>
<body>
<div id="calculator">
<div class="grid-container">
<div class="digits">1234567890</div>
<div class="zero">0</div>
<div class="dots">.</div>
<div class="equa">=</div>
<div class="plus">+</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="thre">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="sixx">6</div>
<div class="seve">7</div>
<div class="eigh">8</div>
<div class="tens">9</div>
<div class="minu">-</div>
<div class="mult">*</div>
<div class="divi">/</div>
<div class="perc">%</div>
<div class="sque">√</div>
<div class="clea">C</div>
</div>
</div>
</body>
</html>
