JavaScript Calculator

by Rishabh Sharma

HTML

<div class="display">
</div>
<div class="keypad">
  <div class="keypad__numkeys">
    <div class="keypad__numkey">1</div>
    <div class="keypad__numkey">2</div>
    <div class="keypad__numkey">3</div>
    <div class="keypad__numkey">4</div>
    <div class="keypad__numkey">5</div>
    <div class="keypad__numkey">6</div>
    <div class="keypad__numkey">7</div>
    <div class="keypad__numkey">8</div>
    <div class="keypad__numkey">9</div>
  </div>
  <div class="keypad__clear">C</div>
  <div class="keypad__sum">+</div>
</div>

CSS

.display {
  width: 150px;
  height: 24px;
  background: lightgray;
  text-align: right;
  padding: 2px 6px;
  line-height: 1.5;
}

.keypad,
.keypad__numkeys {
  overflow: auto;
}

.keypad__numkey,
.keypad__clear,
.keypad__sum {
  float: left;
  width: 24px;
  padding: 6px 12px;
  background: darkgray;
  color: white;
  border: 1px solid;
  cursor: pointer;
}

.keypad__clear {
  float: left;
}

.keypad__numkey:active,
.keypad__clear:active,
.keypad__sum:active {
  background: lightgray;
  color: black;
}

.keypad__numkey:nth-child(3n+1) {
  clear: left;
}

JavaScript

var keys = document.querySelectorAll('.keypad__numkey');
var currentValue = 0;
var sum = 0;
var sumClicked = false;

keys.forEach(function(key) {
  key.addEventListener('click', function(e) {
    updateDisplay(e.target.innerHTML);
  })
});

document.querySelector('.keypad__clear').addEventListener('click', clearDisplay);
document.querySelector('.keypad__sum').addEventListener('click', handleSum);

function updateDisplay(value) {
	if(sumClicked) {
  	document.querySelector('.display').innerHTML = '';
    sumClicked = false;
  }
  var lastValue = document.querySelector('.display').innerHTML;
  document.querySelector('.display').innerHTML = currentValue = lastValue + value;
}

function clearDisplay(e) {
  currentValue = sum = 0;
  document.querySelector('.display').innerHTML = '';
}

function handleSum() { 	
  console.log('current value: ' + currentValue);
  sum = sum + parseInt(currentValue);
  document.querySelector('.display').innerHTML = sum;
  console.log('sum: ' + sum);
  sumClicked = true;
}