Simple Calculator - vanilla

index.html

<div class="calculator">
  <div class="row">
    <div class="button clear-button">C</div>
    <div class="output"></div>
  </div>
  <div class="row">
    <div class="button number">7</div>
    <div class="button number">8</div>
    <div class="button number">9</div>
    <div class="button operator">+</div>
  </div>
  <div class="row">
    <div class="button number">4</div>
    <div class="button number">5</div>
    <div class="button number">6</div>
    <div class="button operator">-</div>
  </div>
  <div class="row">
    <div class="button number">1</div>
    <div class="button number">2</div>
    <div class="button number">3</div>
  </div>
  <div class="row">
    <div class="button number">0</div>
    <div class="button number">.</div>
    <div class="button equal">=</div>
  </div>
</div>

script.js

const buttons = Array.from(document.querySelectorAll(".button"));
const output = document.querySelector(".output");

let history = [];
let lastInputIsDigit = false;
let lastInput = "";

function createButtonListeners() {
  buttons.forEach((button) => {
    return button.addEventListener("click", handleButtonClick);
  });
}

function handleButtonClick(e) {
  const val = e.target.innerHTML;

  if (val === "C") {
    history = [];
    lastInput = "";
  } else if (val === "=") {
    handleEquals();
  } else if (
    (lastInput === "+" || lastInput === "-") &&
    (val === "+" || val === "-")
  ) {
    return;
  } else if (val === "+" || val === "-") {
    history.push(val);
  } else {
    if (!history.length) {
      history[0] = val;
    } else if (lastInput === "+" || lastInput === "-") {
      history.push(val);
    } else {
      history[history.length - 1] += val;
    }
  }

  lastInput = val;
  output.innerHTML = history.join(" ");
}

function handleEquals() {
  let runningTotal = 0;
  let shouldAdd = true;

  history.forEach((val) => {
    if (val !== "+" && val !== "-") {
      if (shouldAdd) {
        runningTotal += parseFloat(val);
      } else {
        runningTotal -= parseFloat(val);
      }
    } else if (val === "+") {
      shouldAdd = true;
    } else {
      shouldAdd = false;
    }
  });

  history = [`${runningTotal}`];
}

createButtonListeners();

simple-calculator-vanilla.markdown

Simple Calculator - vanilla

A Pen by Avi Warner on CodePen.

License.

style.css

.calculator {
  width: 619px;
  height: 500px;
  background-color: #8dcfed;
  display: flex;
  flex-direction: column;
  padding: 22px;
  box-sizing: border-box;
}

.row {
  display: flex;
  box-sizing: border-box;
}

.button {
  width: 123px;
  height: 68px;
  background-color: white;
  box-shadow: 0px 8px 0 gray;
  margin: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: helvetica;
  font-weight: 600;
  font-size: 28px;
  color: #979797;
  border-radius: 10px;
  cursor: pointer;
}

.clear-button {
  background-color: #ff9fa7;
  box-shadow: 0px 8px 0 #ff7b83;
  color: white;
}

.output {
  background-color: #78a7bb;
  box-shadow: 0px -8px 0 #618698;
  width: 401px;
  cursor: default;
  border-radius: 10px;
  margin: 8px;
  padding-left: 10px;
  color: white;
  font-family: helvetica;
  font-weight: 600;
  font-size: 28px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.operator {
  background-color: #fff0f5;
}

.equal {
  background-color: #f1ff8b;
  box-shadow: 0px 8px 0 #9cab44;
}