JSFiddle - React, Tailwind, and code Playground

by tymek04

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <div id="main">
      <div id="result">
        0
      </div>
      <button id="CE">CE</button>
      <button id="C">C</button>
      <button id="back">
        <i class="fas fa-backspace"></i>
      </button>
      <button class="operation">
        <i class="fas fa-divide"></i>
      </button>
      <button class="number">7</button>
      <button class="number">8</button>
      <button class="number">9</button>
      <button class="operation">
        <i class="fas fa-times"></i>
      </button>
      <button class="number">4</button>
      <button class="number">5</button>
      <button class="number">6</button>
      <button class="operation">
        <i class="fas fa-minus"></i>
      </button>
      <button class="number">1</button>
      <button class="number">2</button>
      <button class="number">3</button>
      <button class="operation">
        <i class="fas fa-plus"></i>
      </button>
      <button></button>
      <button class="number">0</button>
      <button>,</button>
      <button class="operation">
        <i class="fas fa-equals"></i>
      </button>
    </div>
  </body>
</html>

CSS

#main{
  display: grid;
  width: 320px;
  height: 450px;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  font-family: sans-serif;
}

#result{
  grid-column-start: 1;
  grid-column-end: 5;
  border: 1px solid black;
  text-align: right;
  font-size: 100px;
}

JavaScript

let nums = [0, 0];
let operation = " ";
let cur = 0;

function show(){
	document.querySelector("#result").innerHTML = nums[cur];
}

document.querySelector("#C").addEventListener("click", function(){
	nums[0] = 0;
  nums[1] = 0;
  cur = 0;
  operation = " ";
  show();
});

document.querySelector("#CE").addEventListener("click", function(){
	nums[cur] = 0;
  show();
});

document.querySelector("#back").addEventListener("click", function(){
	nums[cur] = (int)(nums[cur]/10);
  show();
});

function add(var i){
	nums[cur] = nums[cur]*10;
  alert(document.getElementsByClassName("number")[i].innerHTML);
  show();
}

for(var i = 0; i < document.getElementsByClassName("number").length; i++){
	document.getElementsByClassName("number")[i].addEventListener("click", add(i));
}