JSFiddle - React, Tailwind, and code Playground

Calc Practice

by Ttt Yyy

HTML

<!DOCTYPE html>
<html>
<head />
<body>
  <div class='calculatorContainer'>
   <div id='display'>
     0
   </div>
   <div class='keyboard'>
      <div class='exp number'>
        1
      </div>
      <div class='exp number'>
        2
      </div>
      <div class='exp number'>
        3
      </div>
      <div class='exp operator'>
        +
      </div>
      <div class='exp number'>
        4
      </div>        
      <div class='exp number'>
        5
      </div>
      <div class='exp number'>
        6
      </div>
      <div class='exp operator'>
        -
      </div>
      <div class='exp number'>
        7
      </div>
      <div class='exp number'>
        8
      </div>
      <div class='exp number'>
        9
      </div>
      <div class='exp operator'>
        *
      </div>
      <div class='exp number'>
        0
      </div>
      <div class='exp operator'>
        /
      </div>
      <div id='equals' >
        =
      </div>
      <div id='clear'>
        C
      </div>
    </div>
  </div>
</body>
</html>

CSS

.calculatorContainer {
  align-items: center;
  border: 1px solid gray;
  width: 150px;
  display: flex;
  flex-direction: column;
}

#display {
  border: 1px solid gray;
  margin-top: 4px;
  text-align: right;
  width: 90%;
}

.keyboard {
  align-items: center;
  /* border: 1px solid red; */
  display: flex;
  flex-wrap: wrap;
  width: 90%;
}

.keyboard div {
  border: 1px solid gray;
  flex: 1 1 auto;
  padding: 4px;
  width: 15%;
}

JavaScript

let expression = '';
let displayElement = document.getElementById('display');

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

document.getElementById('equals').addEventListener('click', e => {
	expression = eval(expression);
  displayElement.innerText = expression;
})

document.getElementById('clear').addEventListener('click', e => {
	expression = '';
  displayElement.innerText = 0;
})