TutorialsPreview
All tutorials
LearnBuildbeginner45 min4 steps

Build a calculator

Your first real JavaScript build. Concepts arrive as the calculator needs them — not the other way around.

by Claude·
You will build

A working calculator. Type a number, an operator, another number, hit equals, get the answer. Same logic that powers the calculator app on your phone.

You will learn

Variables, types, conditionals, functions, basic DOM, event handlers — and the rhythm of writing software by changing things and watching them respond.

Prerequisites

A text editor (VS Code is fine), a browser, and 45 minutes. You do not need to have written JavaScript before.

A calculator is the smallest piece of software that is unmistakably software. It takes input, it does work, it produces output. Once you have built one, you know what programming feels like — the rest is just doing more of it.

01

Step 15 min

Make a page that says "0"

GoalA single HTML file you can open in a browser. The number 0 is on screen. That is it.

Open your editor. Create a file called index.html and paste this in:

index.htmlHTML
<!doctype html>
<html>
  <head><title>Calculator</title></head>
  <body>
    <div id="display">0</div>
  </body>
</html>
bash
$open index.html
(your default browser opens; you see "0")

Before moving on

02

Step 28 min

Add the buttons

GoalTwelve buttons under the display — digits 0–9 plus `+` and `=`. They do not do anything yet.

Buttons in HTML are the <button> element. Put twelve of them after the display:

index.htmlHTML
<body>
  <div id="display">0</div>
  <div id="keypad">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>0</button>
    <button>+</button>
    <button>=</button>
  </div>
</body>
Reload the page. Your buttons appear in a vertical stack — fine for now, we will style later.
03

Step 312 min

Make a button update the display

GoalClick "5" and the display shows 5. This is your first taste of JavaScript talking to the page.

Concept · js/variables
Catalog

Variables

A variable is a named reference to a value. `let current = 0` says "the name `current` now refers to the number 0".

JAVASCRIPT
let current = 0;
current = 5;
console.log(current); // 5

Want the full picture? Open the reference →

We need somewhere to keep the number the user is building. That is what variables are for. Add a <script> tag at the end of the body and start with this:

index.htmlHTML
<body>
  <!-- (display and keypad here) -->
  <script>
    let current = 0;
    const display = document.getElementById('display');
 
    function press(value) {
      current = current * 10 + Number(value);
      display.textContent = current;
    }
 
    document.querySelectorAll('#keypad button').forEach((btn) => {
      btn.addEventListener('click', () => press(btn.textContent));
    });
  </script>
</body>
DetailWhy `current * 10 + Number(value)`?

When you type "1" then "2" on a phone calculator, the result should be 12, not 1 then 2. Multiplying the current number by 10 makes room for the new digit on the right. So 1 → 1×10 + 2 = 12. Then 12 → 12×10 + 3 = 123. And so on.

Try it

Reload the page. Click 5, then 0, then 0. The display should show 500. What happens if you click "+" or "=" right now?

Milestone

You wrote your first JavaScript that responds to the user.

Step back for a second. Two minutes ago this was static HTML. Now it listens to clicks and updates the page. That is what the rest of the language is for — making the page respond to the human.

04

Step 412 min

Make + and = actually work

GoalType 5 + 3, hit equals, get 8. Now it is a calculator.

A calculator needs three things in memory: the number being typed, the operator pending, and the number from before the operator. Then = combines them.

index.html (inside <script>)JAVASCRIPT
let current = 0;
let previous = 0;
let operator = null;
const display = document.getElementById('display');
 
function press(value) {
  current = current * 10 + Number(value);
  if (value === '+' || value === '=') {
    if (operator === '+') current = previous + current;
    if (value === '=') {
      operator = null;
    } else {
      previous = current;
      current = 0;
      operator = value;
    }
  } else {
    current = current * 10 + Number(value);
  }
  display.textContent = current;
}
Concept · js/conditionals
Catalog

Conditionals

`if (x === y)` runs the code in braces only when x equals y. The way programs make decisions.

JAVASCRIPT
if (operator === '+') {
  current = previous + current;
}

Working calculator checklist

Milestone· closes the promise from step 1

You built a calculator.

Forty-five minutes ago you had a file with the number 0 in it. Now you have software that does work. You did not need to learn the language abstractly — you learned the parts that the calculator needed, and the calculator carried them in.

What you actually learned

Look at this list. Three hours ago you would have called it a chapter outline. Now it is a list of things you have already used:

  • Variables — `current`, `previous`, `operator`.
  • Primitive types — numbers, strings, null.
  • Functions — `press(value)` is a function. You can call it; it does work; it returns nothing because it updates the page directly.
  • Conditionals — the `if` statements that switched behavior based on which button was pressed.
  • The DOM — `document.getElementById`, `display.textContent`. The bridge between your code and the page.
  • Events — `addEventListener('click', …)`. The way the page tells your code that the user did something.

Where next

Tutorial

Build a clock — your next 30 minutes

Same shape, different concepts. You will meet `setInterval`, dates, and the difference between `let` and `const` the way you met conditionals here: by needing them.

Reference

Arrays reference

When you are ready, the reference docs give you the full picture of a concept once you have already used a piece of it.

More like this

B
Build·beginner·10 min

Build your first web page

Hand-write a small, semantic page — a heading, a paragraph, a list — then open the same project in /code and make it yours.

S
Build·beginner·12 min

Style a card with CSS

The quickest way to feel CSS: take a plain card and give it depth, spacing, and a button — editing the same project the Deep and Reference tiers use.

M
Build·beginner·12 min

Make a page respond: a click counter

A page becomes alive the moment JavaScript listens for an event and changes the page in response. Build a counter, then open it in /code.

Liked this one?

Pass it on

Share on XFollow on GitHub

Discussion

Be the first to ask

Your questions stay private with the author. The author can pin answers to share with everyone.

Sign in to ask a question privately on this tutorial.

Sign in

No pinned answers yet for this tutorial.