JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="sub-container">
<div class="display">
<p id="result-display">

</p>
</div>
<div class="button-grid">
<div>
<button class="item" id="7" data-type="number">
7
</button>
</div>
<div>
<button class="item" id="8" data-type="number">
8
</button>
</div>
<div>
<button class="item" id="9" data-type="number">
9
</button>
</div>
<div>
<button class="item" id="divide" data-type="nonNumber">
*/*
</button>
</div>
<div>
<button class="item" id="4" data-type="number">
4
</button>
</div>
<div>
<button class="item" id="5" data-type="number">
5
</button>
</div>
<div>
<button class="item" id="6" data-type="number">
6
</button>
</div>
<div>
<button class="item" id="multiply" data-type="nonNumber">
X
</button>
</div>
<div>
<button class="item" id="1" data-type="number">
1
</button>
</div>
<div>
<button class="item" id="2" data-type="number">
2
</button>
</div>
<div>
<button class="item" id="3" data-type="number">
3
</button>
</div>
<div>
<button class="item" id="subtract" data-type="nonNumber">
-
</button>
</div>
<div>
<button class="item" id="0" data-type="number">
0
</button>
</div>
<div>
<button class="item" id="decimal" data-type="number">
.
</button>
</div>
<div>
<button class="item" id="AC" data-type="nonNumber">
AC
</button>
</div>
<div>
<button class="item" id="add" data-type="nonNumber">
+
</button>
</div>
<div>
<button class="item" id="equals" data-type="nonNumber">
=
</button>
</div>
</div>
</div>
</div>
<div>

CSS

body {
  display: flex;
  align-items: center;
justify-content: center;
  border: 1px solid black;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.container {
  display: flex;
    align-items: center;
justify-content: center;
  background-color: gray;
  width: 275px;
  height: 450px;
  border: 1px solid black;
}

.sub-container {
  display: flex;
flex-direction: column;
    align-items: center;
  height: 95%;
  width: 800%;
}

.display {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  border: 1px solid white;
  width: 80%;
  height: 10%;
  margin: 5% 0 5% 0;
   color: white;
   }
   
  #result-display {
    margin-right: 8%;
  }
  
.button-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  height: 100%;
  width: 80%;  
}

.item {
  width: 50px;
  height: 50px;
  border: 1px solid white;
     display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: black;
}

button {
  width: 100%;
  height: 100%;
}

footer {
  width: 100%;
  background-color: gray;
}


Make the calculator work! You’ll need to store the first number that is input into the calculator when a user presses an operator, and also save which operation has been chosen and then operate() on them when the user presses the “=” key.

JavaScript

//Create variable to hold display value, create variable of display area and populate.
let displayValue = 0;
let displayArea = document.getElementById('result-display');
let dataType = document.querySelectorAll('[data-type]');
let operator = "";
let firstNumber = 0;
let secondNumber = 0;
let operatorPressed = false;
let secondNumberCounter = false;
let firstNumberCounter = false;
let buttonNumber = 0;
let decimalCounter = 0;
/* displayArea.innerHTML += displayValue; */

//Basic math functions
add = (firstNumber, secondNumber) => firstNumber + secondNumber;
subtract = (firstNumber, secondNumber) => firstNumber - secondNumber;
multiply = (firstNumber, secondNumber) => firstNumber * secondNumber;
divide = (firstNumber, secondNumber) => firstNumber / secondNumber;

//Take an operator and two numbers and call a math function

operate = (operator, firstNumber, secondNumber) => {
return operator(firstNumber, secondNumber);
};

//Update display with button clicked
const button = document.querySelectorAll('.item');
addEventListener('click', e => {
calculate(e);
});

let calculate = (e) => {
if (e.target.id === "equals")  {
decimalCounter = 0;
switch (operator) {
case "add":
secondNumberCounter = false;
return firstNumber = displayArea.innerHTML = operate(add, firstNumber, secondNumber);
case "multiply":
secondNumberCounter = false;
return firstNumber = displayArea.innerHTML = operate(multiply, firstNumber, secondNumber);
case "divide":
secondNumberCounter = false;
return firstNumber = displayArea.innerHTML = operate(divide, firstNumber, secondNumber);
case "subtract":
secondNumberCounter = false;
return firstNumber = displayArea.innerHTML = operate(subtract, firstNumber, secondNumber);
}
}
if (operatorPressed === true && e.target.dataset.type === "number") {
if (secondNumberCounter === false) {
displayArea.innerHTML = null;
}
if (decimalCounter === 0) {
let secondButtonNumber = e.target.innerText;
displayValue = secondButtonNumber;
displayArea.innerHTML +=...