WordPress Hosting
Free Photos
WordPress Themes

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; };
Expand for more options Login