Project: Build a Calculator

📚 Lesson 24 of 40 • ⏱ 45 min project • Intermediate

What You Will Build

A fully functional calculator with a display, number buttons, operators, and clear/delete buttons — using only HTML, CSS and JavaScript.

HTML Structure

HTML — calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="calc.css">
</head>
<body>

<div class="calculator">
  <div class="display" id="display">0</div>
  <div class="buttons">
    <button class="btn span-two" data-action="clear">AC</button>
    <button class="btn" data-action="delete">⌫</button>
    <button class="btn operator" data-value="/">÷</button>
    <button class="btn" data-value="7">7</button>
    <button class="btn" data-value="8">8</button>
    <button class="btn" data-value="9">9</button>
    <button class="btn operator" data-value="*">×</button>
    <button class="btn" data-value="4">4</button>
    <button class="btn" data-value="5">5</button>
    <button class="btn" data-value="6">6</button>
    <button class="btn operator" data-value="-">-</button>
    <button class="btn" data-value="1">1</button>
    <button class="btn" data-value="2">2</button>
    <button class="btn" data-value="3">3</button>
    <button class="btn operator" data-value="+">+</button>
    <button class="btn span-two" data-value="0">0</button>
    <button class="btn" data-value=".">.</button>
    <button class="btn equals" data-action="calculate">=</button>
  </div>
</div>

<script src="calc.js"></script>
</body></html>

JavaScript Logic

JavaScript — calc.js

const display  = document.getElementById("display");
const buttons  = document.querySelectorAll(".btn");
let   expression = "";

buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    const action = btn.dataset.action;
    const value  = btn.dataset.value;

    if (action === "clear") {
      expression = "";
      display.textContent = "0";
      return;
    }

    if (action === "delete") {
      expression = expression.slice(0, -1);
      display.textContent = expression || "0";
      return;
    }

    if (action === "calculate") {
      try {
        expression = String(eval(expression));
        display.textContent = expression;
      } catch {
        display.textContent = "Error";
        expression = "";
      }
      return;
    }

    // Number or operator
    expression += value;
    display.textContent = expression;
  });
});

// Keyboard support
document.addEventListener("keydown", (e) => {
  const allowed = "0123456789+-*/.()%";
  if (allowed.includes(e.key)) {
    expression += e.key;
    display.textContent = expression;
  } else if (e.key === "Enter") {
    try {
      expression = String(eval(expression));
      display.textContent = expression;
    } catch { display.textContent = "Error"; expression = ""; }
  } else if (e.key === "Backspace") {
    expression = expression.slice(0, -1);
    display.textContent = expression || "0";
  } else if (e.key === "Escape") {
    expression = ""; display.textContent = "0";
  }
});

← Fetch API Next: Project — Todo App →