Flexbox Calculator
HTML
<div class="tag"> <a href="https://codepen.io/Wheatability" target="_blank">@TylerPurvines</a></div>
<div class="center">
<div class="calculator">
<div class="top-bar">
<button class="op clear">C</button>
<div class="display">0</div>
</div>
<div class="keys">
<div class="row">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="op multiply">x</button>
</div>
<div class="row">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="op divide">/</button>
</div>
<div class="row">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="op add">+</button>
</div>
<div class="row">
<button class="num">.</button>
<button class="num">0</button>
<button class="equals">=</button>
<button class="op subtract">-</button>
</div>
</div>
</div>
</div>
SCSS
$bg: #26547c;
$button: $bg;
$eval: #06d6a0;
$op: #ffd166;
$calculator: #ef476f;
$radius: 10px;
$display: $bg;
$font: 'Roboto Condensed';
$font-color: #fcfcfc;
@mixin shadow($color) {
box-shadow: 0 4px 1px darken($color, 15%);
}
body, html {
height: 100%;
background-color: $bg;
font-family: $font;
font-size: 24px;
}
button {
border: 0;
color: $font-color;
outline: 0;
transition: transform .1s ease;
&:active {
transform: translateY(5px);
}
}
.tag {
a {
bottom: 1px;
color: $font-color;
font-size: 18px;
position: absolute;
right: 5px;
text-decoration: none;
&:visited {
color: $font-color;
text-decoration: none;
}
}
}
.center {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.calculator {
background-color: $calculator;
border-radius: $radius;
box-shadow: 0 8px darken($calculator, 10%);
height: 355px;
min-width: 390px;
}
.top-bar {
display: flex;
width: 100%;
button {
@include shadow(darken($op, 15%));
background: $op;
border-radius: $radius;
color: darken($font-color, 50%);
flex: .9;
font-size: 22px;
height: 48px;
line-height: 48px;
margin: 10px;
}
div {
background: $display;
border-radius: $radius;
box-shadow: inset 0 4px 5px darken($calculator, 30%);
color: $font-color;
flex: 4;
font-size: 28px;
height: 26px;
margin: 10px;
padding: 12px;
text-align: right;
}
}
.keys {
display: flex;
flex-flow: column nowrap;
height: 290px;
button {
@include shadow($button);
background: $button;
border-radius: $radius;
height: 50px;
line-height: 48px;
margin: 9px;
width: 75px;
&.op {
@include shadow(darken($op, 15%));
background: $op;
color: darken($font-color, 50%);
line-height: 45px;
}
&.equals {
@include shadow($eval);
background: $eval;
color: darken($font-color, 50%);
}
}
}
ES6
let display = document.getElementsByClassName('display')[0],
numberKeys = document.getElementsByClassName('num'),
addKey = document.getElementsByClassName('add')[0],
subtractKey = document.getElementsByClassName('subtract')[0],
divideKey = document.getElementsByClassName('divide')[0],
multiplyKey = document.getElementsByClassName('multiply')[0],
clearKey = document.getElementsByClassName('clear')[0],
evalKey = document.getElementsByClassName('equals')[0];
let curNumber = 0,
prevNumber = 0,
afterOperation = false,
curOperation = undefined;
// add listeners to number numberKeys
for (let i = 0; i < numberKeys.length; i++) {
numberKeys[i].onclick = () => {
changeDisplayVal(numberKeys[i].innerHTML);
};
}
clearKey.onclick = () => {
clearAll();
};
addKey.onclick = () => {
doOperation('add');
}
subtractKey.onclick = () => {
doOperation('subtract');
};
multiplyKey.onclick = () => {
doOperation('multiply');
};
divideKey.onclick = () => {
doOperation('divide');
}
evalKey.onclick = () => {
evaluate(curOperation);
}
function doOperation(operation) {
if (!curOperation) {
prevNumber = curNumber;
curOperation = operation;
afterOperation = true;
} else if (!afterOperation) {
evaluate(curOperation);
prevNumber = curNumber
curOperation = operation;
afterOperation = true;
} else {
curOperation = operation;
}
};
function clearAll() {
curNumber = 0;
prevNumber = 0;
curOperation = undefined;
afterOperation = false;
display.innerHTML = '0';
};
function changeDisplayVal(numString) {
if (display.innerHTML === '0' || afterOperation) {
display.innerHTML = '';
afterOperation = false;
}
// fix having more than one decimal point
if (numString === '.' && display.innerHTML.indexOf('.') > -1) {
numString = '';
}
if (display.innerHTML.length >= 16) {
// do nothing (16 digit limit)
} else {
display.innerHTML += numString;
};
// set current number
curNumber = Number(display.innerHTML);
};
function evaluate(operation) {
if (!afterOperation) {
switch (operation) {
case 'add':
curNumber = prevNumber + curNumber;
break;
case 'subtract':
curNumber = prevNumber - curNumber;
break;
case 'multiply':
curNumber = prevNumber * curNumber;
break;
case 'divide':
curNumber = prevNumber / curNumber;
break;
}
if (curNumber.toString().length >= 16) {
curNumber = Number(curNumber.toFixed(16));
}
display.innerHTML = curNumber;
}
afterOperation = true;
curOperation = undefined;
};
