How to Build a Calculator in JavaScript

The four pieces you need

1. A display element and a keypad. Use real `<button>` elements in a CSS grid, not divs: buttons are focusable, keyboard-accessible and announced correctly by screen readers for free.

2. A state object, not a string you keep parsing. Track the current entry, the stored operand, the pending operator and whether the last key was equals. Almost every calculator bug is a state bug wearing a disguise.

3. One event listener on the keypad container, using event delegation, rather than one per button. Read the operation from a data attribute.

4. A keyboard handler mapping digits, operators, Enter, Escape and Backspace. Anyone who uses a calculator often will type rather than click.

The state machine, in plain terms

Pressing a digit either starts a new entry or appends to the current one — which of those depends on whether an operator or equals was the previous key. Pressing an operator commits the current entry as the stored operand, evaluates any pending operation first, and records the new operator. Pressing equals evaluates the pending operation and sets a flag so the next digit starts fresh instead of appending.

Write those three rules out before you write any code. The implementation is short once the rules are explicit, and unreadable if you discover them while typing.

The mistakes everyone makes

Using eval(). It executes any string as code, and once user input reaches it you have handed the page over. Even in a toy project it is a habit worth never forming. Parse the expression yourself with the shunting-yard algorithm, or keep the state machine simple enough that you never build an expression string at all.

Ignoring operator precedence. A naive left-to-right evaluator returns 20 for 2 + 3 × 4. If you want the mathematically correct 14, you need either a precedence table or a full expression parser. Decide which behaviour you are building before you start — both are legitimate, and cheap physical calculators do the first.

Trusting floating point. In JavaScript, 0.1 + 0.2 is 0.30000000000000004. Round for display with `toFixed()` or `toPrecision()`, or hold values as integer cents. Never compare two computed floats with `===`.

Forgetting divide by zero. JavaScript returns `Infinity` rather than throwing. Check for it and show something a human understands.

How to know it works

Write down a dozen key sequences with their expected results, including the awkward ones: pressing equals twice, an operator twice in a row, a decimal point at the start, and 0.1 + 0.2. Run them after every change. A dozen manual cases catch more real bugs in a project this size than an elaborate test setup.

A reference implementation

The calculators on this site use the same structure: a small state object, one delegated listener and display formatting kept separate from computation. View source on any tool page — the JavaScript is unminified and readable on purpose.

Questions this answers

• calculator tutorial javascript
• how to create calculator in javascript