<div class="container">
  <div class="displayContainer">
    <div id="prev">&nbsp;</div>
    <div id="display">
      0
    </div>
  </div>
  <div class="row">
    <div id="backspace"></div>
    <div id="clearLine">C</div>
    <div id="clear">CE</div>
    <div id="divide" data-operation="divide">/</div>
    <div id="seven" class="digit">7</div>
    <div id="eight" class="digit">8</div>
    <div id="nine" class="digit">9</div>
    <div id="multiply" data-operation="multiply">*</div>
    <div id="four" class="digit">4</div>
    <div id="five" class="digit">5</div>
    <div id="six" class="digit">6</div>
    <div id="subtract" data-operation="subtract">-</div>
    <div id="one" class="digit">1</div>
    <div id="two" class="digit">2</div>
    <div id="three" class="digit">3</div>  
    <div id="add" data-operation="add">+</div>
    <div></div>
    <div id="zero" class="digit">0</div>
    <div id="decimal" class="digit">.</div>
    <div id="equals">=</div>
  </div>
</div>

* { 
  box-sizing: border-box; 
  font-family: 'Ubuntu Mono', monospace;
}
body {
  background: #121212;
}
.container {
  max-width: 275px;
  margin: 0 auto;
  margin-top: 80px;
  background-color: #353535ef;
  box-shadow: 0 0 8px 2px #ffffff44;
  padding: 6px;
  border-radius: .25em;
  .displayContainer {
    width: 100%;
    padding: 4px 18px 18px 18px;
    text-align: right;
    background-color: #f5f5f5;
    border-radius: .25em;
    margin-bottom: 4px;
    box-shadow: 2px -2px 3px #212121aa inset;
    
    #prev {
      color: #666;
      font-size: 16px;
    }
    #display {
      font-size: 24px;      
    }
  }
  .row {
    display: flex;
    flex-flow: row wrap;
    div {
      flex: 0 1 calc(25% - 4px);
      max-width: 25%;
      background-color: #f5f5f5;
      box-shadow: -2px 2px 3px #212121aa inset;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      border-radius: .25em;
      margin: 2px;
      &[id] {
        cursor: pointer;
      }
      &#equals {
        background-color: cornflowerblue;
      }
      &#clear {
        background-color: palevioletred;
      }
      &#backspace:before {
        content: '\21E4';
      }
      &:not([id]) {
        background: transparent;
        box-shadow: none;
        background-color: #212121;
        box-shadow: -2px 2px 3px #454545aa inset;
      }
    }
  }
}

const $ = document.querySelector.bind(document);
const $_ = document.querySelectorAll.bind(document);

let operation = {
  num1: '',
  num2: '',
  operator: null
};

const sum = () => parseFloat(currentOperation.num1) + parseFloat(currentOperation.num2);
const subtract = () => parseFloat(currentOperation.num1) - parseFloat(currentOperation.num2);
const multiply = () => parseFloat(currentOperation.num1) * parseFloat(currentOperation.num2);
const divide = () => parseFloat(currentOperation.num1) / parseFloat(currentOperation.num2);
const show = (i) => $('#display').innerText = i;
const showIncremental = (i) => $('#display').innerText += i;
const showPrev = (i) => $('#prev').innerText += i;
const deleteLastPrev = () => $('#prev').innerText = $('#prev').innerText.slice(0, -1);
const getFormula = () => $('#prev').innerText;
const hasOperator = () => $('#prev').innerText.endsWith('+') || $('#prev').innerText.endsWith('-') || $('#prev').innerText.endsWith('*') || $('#prev').innerText.endsWith('/');
const isOperator = (i) => ['+', '-', '*', '/'].indexOf(i) !== -1;
const hasMinus = () => $('#prev').innerText.endsWith('-');

const updateDisplay = (input) => {
  if($('#display').innerText.includes('.') && input === '.') {
    return;
  }
  operation.num1 === '' ? operation.num1 += input : operation.num2 += input;
  showPrev(input);
  $('#display').innerText.startsWith('0') ? show(input) : showIncremental(input);
}

const addOperator = (input) => {
  if (operation.num1 === '') {
    if(input !== '-') {
      return;
    }
  } else {
    if(operation.operator === null) {
      operation.operator = input;
      return;
    }
  } 

  const currentFormula = $('#prev').innerText;
  if (hasOperator() && isOperator(input)) {
    if(input !== '-' || hasMinus()) {
      while(hasOperator()) {
        deleteLastPrev();
      }
    }
  }
  showPrev(input);
  show(input);
}

const calc = () => {
  if (operation.num1 == '' || operation.num2 == '' || operation.operator === null) return;

  const result = eval(getFormula()).toString();
  show(result);
  $('#prev').innerText = result;
  currentOperation = {
    num1: 0,
    num2: 0,
    operator: null
  }
}

const clearDisplay = () => {
  show(0);
  $('#prev').innerHTML = `&nbsp`;
  currentOperation = {
    num1: null,
    num2: null,
    operator: null
  }
}

const deleteDigit = () => {
  show($('#display').innerText.slice(0, -1));
  $('#prev').innerText = $('#prev').innerText.slice(0, -1);
  if($('#display').innerText.length <= 0) {
    show(0);
    $('#prev').innerHTML = '&nbsp;';
  }
}

$('#clear').addEventListener('click', () => clearDisplay());
$('#clearLine').addEventListener('click', () => $('#display').innerText = '0');
$_('.digit').forEach((d) => d.addEventListener('click', (e) => updateDisplay(e.target.innerText)));
$_("[data-operation]").forEach( o => o.addEventListener('click', (e) => addOperator(e.target.innerText)));
$('#equals').addEventListener('click', () => calc());
$('#backspace').addEventListener('click', () => deleteDigit());