<!-- HTML -->
<div class="calculator">
  <div class="display">
    <span class="result">0</span>
  </div>
  <div class="buttons">
    <button class="clear">C</button>
    <button class="operator" data-value="+">+</button>
    <button class="operator" data-value="-">-</button>
    <button class="operator" data-value="*">*</button>
    <button class="operator" data-value="/">/</button>
    <button class="number" data-value="7">7</button>
    <button class="number" data-value="8">8</button>
    <button class="number" data-value="9">9</button>
    <button class="number" data-value="4">4</button>
    <button class="number" data-value="5">5</button>
    <button class="number" data-value="6">6</button>
    <button class="number" data-value="1">1</button>
    <button class="number" data-value="2">2</button>
    <button class="number" data-value="3">3</button>
    <button class="number" data-value="0">0</button>
    <button class="decimal" data-value=".">.</button>
    <button class="equal" data-value="=">=</button>
  </div>
</div>

<!-- CSS -->
.calculator {
  width: 300px;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
}

.display {
  background-color: #fafafa;
  padding: 20px;
  text-align: right;
  font-size: 2em;
  border-radius: 10px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.buttons button {
  width: 25%;
  padding: 10px;
  font-size: 1.5em;
  border: none;
  border-radius: 10px;
  background-color: #fafafa;
  margin: 5px;
  cursor: pointer;
}

.buttons button.operator {
  background-color: #f0f0f0;
}

.buttons button.equal {
  background-color: #a5d6a7;
  color: #fff;
}

.buttons button.clear {
  background-color: #ef5350;
  color: #fff;
}

<!-- JS -->
const calculator = document.querySelector('.calculator');
const display = document.querySelector('.display');
const buttons = document.querySelectorAll('.buttons button');

let firstValue = 0;
let operatorValue = '';
let awaitingNextValue = false;

function sendNumberValue(number) {
  if (awaitingNextValue) {
    display.textContent = number;
    awaitingNextValue = false;
  } else {
    const displayValue = display.textContent;
    display.textContent = displayValue === '0' ? number : displayValue + number;
  }
}

function addDecimal() {
  if (awaitingNextValue) return;
  if (!display.textContent.includes('.')) {
    display.textContent = `${display.textContent}.`;
  }
}

function useOperator(operator) {
  const currentValue = Number(display.textContent);
  if (operatorValue && awaitingNextValue) {
    operatorValue = operator;
    return;
  }
  if (!firstValue) {
    firstValue = currentValue;
  } else {
    const calculation = calculate[operatorValue](firstValue, currentValue);
    display.textContent = calculation;
    firstValue = calculation;
  }
  awaitingNextValue = true;
  operatorValue = operator;
}

function calculateOperator(operator) {
  if (operatorValue) {
    const currentValue = Number(display.textContent);
    const result = calculate[operatorValue](firstValue, currentValue);
    display.textContent = result;
    firstValue = 0;
    operatorValue = '';
    awaitingNextValue = false;
  }
}

function clear() {
  display.textContent = '0';
  firstValue = 0;
  operatorValue = '';
  awaitingNextValue = false;
}

const calculate = {
  '+': (firstValue, secondValue) => firstValue + secondValue,
  '-': (firstValue, secondValue) => firstValue - secondValue,
  '*': (firstValue, secondValue) => firstValue * secondValue,
  '/': (firstValue, secondValue) => firstValue / secondValue,
  '=': (firstValue, secondValue) => secondValue
};

buttons.forEach(button => {
  if (button.classList.contains('number')) {
    button.addEventListener('click', () => sendNumberValue(button.dataset.value));
  }
  if (button.classList.contains('operator')) {
    button.addEventListener('click', () => useOperator(button.dataset.value));
  }
  if (button.classList.contains('decimal')) {
    button.addEventListener('click', () => addDecimal());
  }
  if (button.classList.contains('clear')) {
    button.addEventListener('click', () => clear());
  }
  if (button.classList.contains('equal')) {
    button.addEventListener('click', () => calculateOperator(button.dataset.value));
  }
});