JavaScript Notes

Build a JavaScript Calculator - Step by Step Project Tutorial

Learn to build a fully functional calculator in JavaScript with operator logic, decimal support, keyboard input, and clean UI. Perfect beginner project.

What You'll Learn

How to manage calculator state (current input, operator, result)
How to handle button clicks and keyboard events
How to perform arithmetic without using eval()
How to handle edge cases like dividing by zero and chained operators
How to structure a clean, reusable UI update pattern

Project Overview

A calculator lets users enter numbers, pick an operator (+, −, ×, ÷), and see a result. Behind the scenes, you're managing a small state machine: the first number, the chosen operator, and the second number.

Component Structure

How It Works — Flow Diagram

Step-by-Step Build

Step 1 — HTML Structure

html example

<div class="calculator">
  <div id="display" class="display">0</div>
  <div class="buttons">
    <button class="btn-clear" data-action="clear">AC</button>
    <button class="btn-op"    data-action="toggle-sign">±</button>
    <button class="btn-op"    data-action="percent">%</button>
    <button class="btn-op"    data-operator="÷">÷</button>

    <button data-digit="7">7</button>
    <button data-digit="8">8</button>
    <button data-digit="9">9</button>
    <button class="btn-op" data-operator="×">×</button>

    <button data-digit="4">4</button>
    <button data-digit="5">5</button>
    <button data-digit="6">6</button>
    <button class="btn-op" data-operator="−">−</button>

    <button data-digit="1">1</button>
    <button data-digit="2">2</button>
    <button data-digit="3">3</button>
    <button class="btn-op" data-operator="+">+</button>

    <button class="btn-zero" data-digit="0">0</button>
    <button data-digit=".">.</button>
    <button class="btn-equals" data-action="equals">=</button>
  </div>
</div>

Step 2 — State Object

js example

const state = {
  display: "0",      // what's shown on screen
  firstNum: null,    // stored operand
  operator: null,    // stored operator symbol
  waitingForSecond: false  // flag: next digit starts a fresh number
};

Step 3 — Append a Digit

js example

function appendDigit(digit) {
  // prevent multiple decimal points
  if (digit === "." && state.display.includes(".")) return;

  if (state.waitingForSecond) {
    state.display = digit === "." ? "0." : digit;
    state.waitingForSecond = false;
  } else {
    state.display = state.display === "0" && digit !== "."
      ? digit
      : state.display + digit;
  }
  updateDisplay();
}

Step 4 — Store Operator

js example

function storeOperator(op) {
  if (state.operator && !state.waitingForSecond) {
    // chain calculation: compute previous before storing new
    calculate();
  }
  state.firstNum = parseFloat(state.display);
  state.operator = op;
  state.waitingForSecond = true;
}

Step 5 — Calculate Result

Example

Step 6 — Wire Events

Example

Step 7 — Keyboard Support

Example

document.addEventListener("keydown", (e) => { if (e.key >= "0" && e.key <= "9") appendDigit(e.key); if (e.key === ".") appendDigit("."); if (e.key === "+") storeOperator("+"); if (e.key === "-") storeOperator("−"); if (e.key === "*") storeOperator("×"); if (e.key === "/") { e.preventDefault(); storeOperator("÷"); } if (e.key === "Enter" || e.key === "=") calculate(); if (e.key === "Escape") resetState(); if (e.key === "Backspace") backspace(); });

Console Output — Example Sequence

Output

// User presses: 9 × 8 =
appendDigit("9")   → display: "9"
storeOperator("×") → firstNum=9, operator="×", waitingForSecond=true
appendDigit("8")   → display: "8"
calculate()        → result = 9 × 8 = 72  → display: "72"

// User presses: ÷ 0 =
storeOperator("÷") → firstNum=72, operator="÷"
appendDigit("0")   → display: "0"
calculate()        → divide by zero!  → display: "Error"

Final Output — What It Looks Like

Edge Cases to Handle

Situation	Expected Behavior
Press `=` with no operator	Nothing happens
Divide by zero	Show "Error", reset state
Multiple decimal points	Ignore second `.`
Chain operators (5 + 3 × 2)	Compute 5+3=8 first, then 8×2
Very long result	Use `toFixed(10)` + `parseFloat` to strip trailing zeros

Challenge Yourself

History tape — show a list of the last 5 calculations below the display
Scientific mode — add sin, cos, √, x² buttons
Theme switcher — toggle between dark and light calculator skins
Memory keys — implement M+, M−, MR, MC
Animate button press — add a CSS scale animation on click

Best Practices

Never use eval() — it's a security risk
Use a state object instead of scattered global variables
Apply event delegation on the button container, not individual buttons
Round floating-point results with parseFloat(result.toFixed(10))
Keep calculate() a pure function that only reads state and returns a value

Continue the lesson path

Study next in this module

4 connected lessons

01Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.02Mini ProjectsBuild a JavaScript Counter Application - Step by Step Project TutorialLearn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.03Mini ProjectsBuild a JavaScript Digital Clock - Step by Step Project TutorialLearn to build a live digital clock in JavaScript using Date object, setInterval, 12/24-hour toggle, AM/PM display, and smooth CSS styling.04Mini ProjectsBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialLearn to build an interactive resume builder in JavaScript that generates a live HTML preview as you fill out form fields, with print and PDF export support.

Previous50 Tricky JavaScript Output Questions 2026 (With Answers)NextBuild a JavaScript Image Carousel - Step by Step Project Tutorial