JSFiddle - React, Tailwind, and code Playground

Calculator Vanilla JS

by Ttt Yyy

HTML

<div id="calculator">
  <div id="display">0</div>
  <div id="keyboard">
    <div class="expr operator">+</div>
    <div class="expr operator">-</div>
    <div class="expr operator">*</div>
    <div class="expr operator">/</div>
    <div class="expr number">1</div>
    <div class="expr number">2</div>
    <div class="expr number">3</div>
    <div class="expr number">4</div>
    <div class="expr number">5</div>
    <div class="expr number">6</div>
    <div class="expr number">7</div>
    <div class="expr number">8</div>
    <div class="expr number">9</div>
    <div class="expr number">0</div>
    <div id="equals">=</div>
    <div id="clear">AC</div>
  </div>
</div>

CSS

#calculator {
  width: 200px;
  background-color: #999;
  border: 1px solid black;
}

#display {
  width: 180px;
  margin: 5px auto;
  padding: 5px;
  text-align: right;
  border: 1px solid black;
  background-color: white;
}

#keyboard {
  padding: 2px;
}

#keyboard div {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 2px;
  border: 1px solid black;
  background-color: #ddd;
}

#equals {
  background-color: green !important;
}

.operator {
  background-color: orange !important;
}

#clear {
  background-color: red !important;
}

JavaScript

let expr = '';
const display = document.getElementById('display');

[...document.getElementsByClassName('expr')].forEach(el => {
	el.addEventListener('click', e => {
  	expr += e.target.innerText;
    display.innerText = expr;
  });
});

document
	.getElementById('equals')
	.addEventListener('click', () => {
  	expr = eval(expr);
  	display.innerText = expr;
  });

document
	.getElementById('clear')
	.addEventListener('click', () => {
  	expr = '';
  	display.innerText = '0';
  });
  
[
	...document
		.getElementById('keyboard')
    .getElementsByTagName('div')
].forEach(el => {
	// add clicked class
	el.addEventListener('mousedown', e => console.log('down: ', e.target.innerText));
  
  // remove clicked class
	el.addEventListener('mouseup', e => console.log('up: ', e.target.innerText));
});