<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <title>Calculator</title>
</head>

<body>
  <div class="wrapper">
    <section class="screen">
      0
    </section>

    <section class="calc-buttons">
      <div class="calc-button-row">
        <button class="calc-button double">
          C
        </button>
        <button class="calc-button">
          &larr;
        </button>
        <button class="calc-button">
          &divide;
        </button>
      </div>

      <div class="calc-button-row">
        <button class="calc-button">
          7
        </button>
        <button class="calc-button">
          8
        </button>
        <button class="calc-button">
          9
        </button>
        <button class="calc-button">
          &times;
        </button>
      </div>

      <div class="calc-button-row">
        <button class="calc-button">
          4
        </button>
        <button class="calc-button">
          5
        </button>
        <button class="calc-button">
          6
        </button>
        <button class="calc-button">
          -
        </button>
      </div>

      <div class="calc-button-row">
        <button class="calc-button">
          1
        </button>
        <button class="calc-button">
          2
        </button>
        <button class="calc-button">
          3
        </button>
        <button class="calc-button">
          &plus;
        </button>
      </div>

      <div class="calc-button-row">
        <button class="calc-button triple">
          0
        </button>
        <button class="calc-button triple">
          &equals;
        </button>
      </div>

    </section>

  </div>

  <script src="app.js"></script>
</body>
html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after  {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  align-items: center;
  background: linear-gradient(to right, #ab0792, #f8616a);
  display: flex;
  font-family: "Montserrat", sans serif;
  font-display: swap;
  height: inherit;
  justify-content: center;
}

.wrapper {
  backdrop-filter: bluer(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.01);
  border-radius: 16px;
  box-shadow: 0 5px 30px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.34);
  flex-basis: 400px;
  height: 540px;
  padding: 20px 35px;
}

.screen {
  backdrop-filter: bluer(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.01);
  border-radius: 16px;
  box-shadow: 0 5px 30px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.34);
  flex-basis: 400px;
  width: 326px;
  padding: 20px;
  font-size: 35px;
  text-align: right;
}

.calc-button-row {
  display: flex;
  justify-content: space-between;
  margin: 5% 0;
}

.calc-button {
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.01);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
  color: #232323;
  flex-basis: 20%;
  font-family: inherit;
  height: 65px;
}

.calc-button:last-child {
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  border: 1px solid rgba(255, 255, 255, 0.01);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
  color: #fff;
  background: #d72880;
  flex-basis: 20%;
  font-family: inherit;
  height: 65px;
}

.calc-button:last-child:hover {
  cursor: pointer;
  background-color: inherit;
}

.calc-button:hover {
  cursor: pointer;
  background-color: inherit;
}

.double {
  flex-basis: 47%;
}

.triple {
  flex-basis: 73%;
}

let runningTotal = 0;
let buffer = "0";
let previousOperator = null;

const screen = document.querySelector(".screen");

function buttonClick(value) {
  if (isNaN(value)) {
    handleSymbol(value);
  } else {
    handleNumber(value);
  }
  screen.innerText = buffer;
}

function handleSymbol(symbol) {
  switch (symbol) {
    case "C":
      buffer = "0";
      runningTotal = 0;
      previousOperator = null;
      break;
    case "=":
      if (previousOperator === null) {
        return;
      }
      flushOperation(parseInt(buffer));
      previousOperator = null;
      buffer = "" + runningTotal;
      runningTotal = 0;
      break;
    case "←":
      if (buffer.length === 1) {
        buffer = "0";
      } else {
        buffer = buffer.toString().substring(0, buffer.length - 1);
      }
      break;
    case "+":
    case "-":
    case "×":
    case "÷":
      handleMath(symbol);
      break;
  }
}

function handleMath(symbol) {
  if (buffer === "0") {
    return;
  }
  const intBuffer = parseInt(buffer);
  if (runningTotal === 0) {
    runningTotal = intBuffer;
  } else {
    flushOperation(intBuffer);
  }
  previousOperator = symbol;
  buffer = "0";
}

function flushOperation(intBuffer) {
  if (previousOperator === "+") {
    runningTotal += intBuffer;
  } else if (previousOperator === "-") {
    runningTotal -= intBuffer;
  } else if (previousOperator === "×") {
    runningTotal *= intBuffer;
  } else if (previousOperator === "÷") {
    runningTotal /= intBuffer;
  }
}

function handleNumber(numberString) {
  if (buffer === "0") {
    buffer = numberString;
  } else {
    buffer += numberString;
  }
}

function init() {
  document
    .querySelector(".calc-buttons")
    .addEventListener("click", function (event) {
      buttonClick(event.target.innerText);
    });
}

init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.