JSFiddle - React, Tailwind, and code Playground

by Rishabh Sharma

HTML

<div class="calc">
  <div class="display">
  </div>
  <div class="keypad">
    <div class="keypad__num">
      <div class="keypad__key">1</div>
      <div class="keypad__key">2</div>
      <div class="keypad__key">3</div>
      <div class="keypad__key">4</div>
      <div class="keypad__key">5</div>
      <div class="keypad__key">6</div>
      <div class="keypad__key">7</div>
      <div class="keypad__key">8</div>
      <div class="keypad__key">9</div>
      <div class="keypad__key">0</div>
    </div>
  </div>
  <div class="keypad__ops">
    <div class="keypad__key keypad__sum">+</div>
    <div class="keypad__key keypad__subtract">-</div>
    <div class="keypad__key keypad__division">/</div>
    <div class="keypad__key keypad__equals">=</div>
    <div class="keypad__key keypad__clear">C</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.calc {
  background: white;
  overflow: auto;
}

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

.keypad__num {
  width: 60%;
  float: left;
  overflow: auto;
}

.keypad__ops {
  width: 40%;
  float: left;
}

.keypad__key {
  float: left;
  background: darkgray;
  border: 1px solid white;
  color: white;
  text-align: center;
  line-height: 1.5;
  margin-top: 2px;
  width: 33.33%;
  cursor: pointer;
}

.keypad__key:hover {
  background: lightsteelblue;
  color: white;
}

.keypad__key:active {
  color: black;
  font-weight: bold;
}

JavaScript

var keys = document.querySelectorAll('.keypad__num .keypad__key');
var currentValue = 0;
var operationType;
var operationTriggered = false;
var operatedValue = 0;

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', handleOperation);
document.querySelector('.keypad__subtract').addEventListener('click', handleOperation);

function handleOperation(e) {
	debugger;
	operationType = e.target.innerHTML;
  switch(operationType) {
  	case '+':
    	handleSum();
      break;
    case '-':
    	handleSubtract();
      break;
    default:
    	console.log('invalid operation');
  }
}

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

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

function handleSum() {
  operatedValue = operatedValue + parseInt(currentValue);
  document.querySelector('.display').innerHTML = operatedValue;
  operationTriggered = true;
}

function handleSubtract() {
  operatedValue = operatedValue - parseInt(currentValue);
  document.querySelector('.display').innerHTML = operatedValue;
  operationTriggered = true;
}