Project - 7

Project 7: Calculator with History

Build a calculator that handles basic operations and keeps a list of previous calculations.

Your challenge: Enter numbers and operators, calculate the result, and save each completed calculation in the history.

✦ HTML + CSS + JS Editor

▶ Live Output

Build the calculation

Each number or operator button adds its value to the input string.

For example, pressing 8, +, and 4 creates "8+4".

Calculate the result

When the equals button is pressed, calculate the expression and show the answer in the display.

Then save the completed calculation in the history array.

Display the history

Loop through history and create a paragraph for each previous calculation.

Try it: Perform several calculations, continue calculating from a result, then clear the history.

Good JavaScript habit: Keep the current calculation and the history in separate variables so each part of the calculator has a clear purpose.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator with History</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      text-align: center;
      padding: 40px;
      margin: 0;
    }

    .calculator {
      max-width: 320px;
      margin: 0 auto;
    }

    .display {
      background: #111;
      color: #fff;
      padding: 18px;
      font-size: 2rem;
      margin-bottom: 12px;
      border-radius: 6px;
      min-height: 40px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    button {
      padding: 14px;
      font-size: 1rem;
      cursor: pointer;
    }

    button:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 2px;
    }

    .history {
      background: #111;
      margin-top: 20px;
      padding: 15px;
      text-align: left;
      border-radius: 6px;
    }

    .history h3 {
      margin-top: 0;
    }

    #history p {
      margin: 6px 0;
    }
  </style>
</head>

<body>

  <h2>Calculator with History</h2>

  <div class="calculator">

    <div class="display" id="display">0</div>

    <div class="grid">
      <button type="button" data-value="7">7</button>
      <button type="button" data-value="8">8</button>
      <button type="button" data-value="9">9</button>
      <button type="button" data-value="/">/</button>

      <button type="button" data-value="4">4</button>
      <button type="button" data-value="5">5</button>
      <button type="button" data-value="6">6</button>
      <button type="button" data-value="*">*</button>

      <button type="button" data-value="1">1</button>
      <button type="button" data-value="2">2</button>
      <button type="button" data-value="3">3</button>
      <button type="button" data-value="-">-</button>

      <button type="button" data-value="0">0</button>
      <button type="button" id="clearBtn">C</button>
      <button type="button" id="equalsBtn">=</button>
      <button type="button" data-value="+">+</button>
    </div>

    <div class="history">
      <h3>History</h3>
      <div id="history"></div>
      <button type="button" id="clearHistoryBtn">Clear History</button>
    </div>

  </div>

  <script>
    let input = "";
    let history = [];

    const display =
      document.getElementById("display");

    const historyDiv =
      document.getElementById("history");

    const valueButtons =
      document.querySelectorAll("[data-value]");

    const clearBtn =
      document.getElementById("clearBtn");

    const equalsBtn =
      document.getElementById("equalsBtn");

    const clearHistoryBtn =
      document.getElementById("clearHistoryBtn");

    function press(value) {
      input += value;
      display.textContent = input;
    }

    function clearDisplay() {
      input = "";
      display.textContent = "0";
    }

    function calculate() {
      if (input === "") {
        return;
      }

      try {
        const result = Function(
          '"use strict"; return (' + input + ')'
        )();

        history.unshift(
          input + " = " + result
        );

        display.textContent = result;
        input = String(result);

        updateHistory();
      } catch (error) {
        display.textContent = "Error";
        input = "";
      }
    }

    function updateHistory() {
      historyDiv.textContent = "";

      history.forEach(function(item) {
        const p =
          document.createElement("p");

        p.textContent = item;

        historyDiv.appendChild(p);
      });
    }

    valueButtons.forEach(function(button) {
      button.addEventListener("click", function() {
        press(button.dataset.value);
      });
    });

    clearBtn.addEventListener(
      "click",
      clearDisplay
    );

    equalsBtn.addEventListener(
      "click",
      calculate
    );

    clearHistoryBtn.addEventListener(
      "click",
      function() {
        history = [];
        updateHistory();
      }
    );
  </script>

</body>
</html>

Note: This beginner project evaluates a generated expression for simplicity. A larger calculator would normally parse and calculate only the operations it explicitly supports.