.tag 
  a(href='https://codepen.io/Wheatability', target="_blank") @TylerPurvines
.center
  .calculator
    .top-bar
      button.op.clear C
      .display 0
    .keys
      .row
        button.num 7
        button.num 8
        button.num 9
        button.op.multiply x
      .row
        button.num 4
        button.num 5
        button.num 6
        button.op.divide /
      .row
        button.num 1
        button.num 2
        button.num 3
        button.op.add +
      .row
        button.num .
        button.num 0
        button.equals =
        button.op.subtract -
View Compiled
$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;
  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 wrap;
  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%);
    }
  }
}
View Compiled
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;
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.