Build a Simple Calculator

1. Set up your project folder

Make a new folder named calculator.

Inside it, create three empty files named exactly index.html, style.css and script.js.

Notepad (Windows): choose File > Save As, set "Save as type" to All files, and type the full name, like index.html.

TextEdit (Mac): choose Format > Make Plain Text before saving.

Visual Studio Code: choose File > New File, then save with the full name.

Why this works

Browsers read plain-text files. Keeping structure (HTML), looks (CSS) and behavior (JavaScript) in separate files makes each one shorter and easier to fix.

Check: Your folder shows three files with exactly these names. If you see index.html.txt, turn on file name extensions and rename it.

2. Build the page with HTML

Copy this code into index.html and save.

Notice that each <label for="..."> matches the id of its box. That connection is what makes the label work.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Simple Calculator</title>
  <link rel="stylesheet" href="style.css">
  <!-- "defer" waits until the page is built before running script.js -->
  <script src="script.js" defer></script>
</head>
<body>
  <main class="calculator">
    <h1>Simple Calculator</h1>

    <!-- novalidate: our own script explains mistakes in plain words -->
    <form id="calc-form" novalidate>
      <div class="field">
        <label for="first">First number</label>
        <input id="first" name="first" type="text" autocomplete="off"
               spellcheck="false" aria-describedby="number-hint first-error">
        <p id="first-error" class="error" hidden></p>
      </div>

      <div class="field">
        <label for="operator">Operation</label>
        <select id="operator" name="operator">
          <option value="add">+ Add</option>
          <option value="subtract">− Subtract</option>
          <option value="multiply">× Multiply</option>
          <option value="divide">÷ Divide</option>
        </select>
      </div>

      <div class="field">
        <label for="second">Second number</label>
        <input id="second" name="second" type="text" autocomplete="off"
               spellcheck="false" aria-describedby="number-hint second-error">
        <p id="second-error" class="error" hidden></p>
      </div>

      <p id="number-hint" class="hint">Use digits, an optional minus sign and a period for decimals, like -2.5</p>

      <div class="actions">
        <button type="submit">Calculate</button>
        <button type="reset" class="secondary">Reset</button>
      </div>
    </form>

    <section class="result" aria-labelledby="result-heading">
      <h2 id="result-heading">Result</h2>
      <!-- <output> is announced by screen readers when its text changes -->
      <output id="result" for="first operator second" aria-live="polite">Enter two numbers and choose an operation.</output>
    </section>
  </main>
</body>
</html>

Why this works

Labels tell everyone, including people using screen readers, what each box is for, and clicking a label puts the cursor in its box. A <form> lets the Enter key press Calculate. The <output> element is announced by screen readers when the answer changes. We use type="text" instead of type="number" because some phone number pads have no minus sign, and number boxes quietly empty themselves when the entry is invalid, which hides the mistake.

Check: The page is not styled yet, and pressing Calculate only reloads the page. That is expected. You will fix it in Step 8.

3. Open it in your browser

Double-click index.html, or drag it into an open browser window.

Keep this tab open. Each time you save a file, refresh the tab (Ctrl+R on Windows, Cmd+R on Mac) to see the change.

Why this works

Seeing every change right away helps you catch a mistake while it is still small.

Check: The browser tab says Simple Calculator and you can see two labeled boxes, an Operation menu and two buttons.

4. Make it readable with CSS

Copy this code into style.css, save, and refresh the browser tab.

/* Simple Calculator — finished styles */

/* 1. Colors in one place, so they are easy to change */
:root {
  --ink: #1b1f24;
  --muted: #4a5360;
  --paper: #f6f7f9;
  --card: #ffffff;
  --accent: #1f5fbf;
  --error: #b3261e;
  --focus: #f2a900;
}

/* 2. Readable page: comfortable text size and line spacing */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

/* 3. One centered card that never gets wider than a phone-friendly column */
.calculator {
  max-width: 28rem;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.25rem; }

/* 4. Each label sits directly above its box */
.field { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

/* 5. Big, easy-to-tap controls. 16px+ text stops phones from zooming in. */
input, select, button {
  font: inherit;
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 2px solid #8a94a3;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

/* 6. A bright outline shows where the keyboard is */
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* 7. Mistakes are shown with words AND color, never color alone */
input[aria-invalid="true"] { border-color: var(--error); }
.error { color: var(--error); margin: 0.25rem 0 0; font-size: 1rem; }
.hint { color: var(--muted); font-size: 1rem; margin: 0 0 1rem; }

/* 8. Buttons side by side, each taking half the width */
.actions { display: flex; gap: 0.75rem; }
button {
  cursor: pointer;
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.secondary { background: #fff; color: var(--accent); }

/* 9. The result stands out */
.result { margin-top: 1.5rem; }
output {
  display: block;
  min-height: 3rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: #eef3fb;
  font-size: 1.25rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
output[data-state="error"] { background: #fdecea; color: var(--error); }

/* 10. On narrow phones, use the full width */
@media (max-width: 480px) {
  .calculator { margin: 0; border-radius: 0; min-height: 100vh; }
}

Why this works

Large text and 48-pixel-tall controls are easy to read and tap. Text of 16 pixels or more stops iPhones from zooming in when you tap a box. The bright outline shows keyboard users where they are. Mistakes are shown with words and color, so nobody has to rely on color alone.

Check: You see a white card in the middle of the page. Press Tab a few times: a yellow outline moves from box to menu to button.

5. Read and check each number

Copy this code into script.js and save.

// ===== Step 5: Read and check a number =====
// Allowed: optional + or -, digits, and at most one period (like 12, -3, 2.5, .5)
const NUMBER_PATTERN = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;

function parseNumber(text) {
  // Trim spaces and accept the typographic minus sign "−" as well as "-"
  const cleaned = text.trim().replace(/−/g, '-');

  if (cleaned === '') {
    return { ok: false, message: 'Enter a number.' };
  }
  if (cleaned.includes(',')) {
    return { ok: false, message: 'Use a period for decimals, like 2.5 (no commas).' };
  }
  if (!NUMBER_PATTERN.test(cleaned)) {
    return { ok: false, message: 'Use only digits, one optional minus sign and one period.' };
  }

  const value = Number(cleaned);
  if (!Number.isFinite(value)) {
    return { ok: false, message: 'That number is too large for this calculator.' };
  }
  return { ok: true, value: value };
}

Why this works

Everything typed into a box arrives as text, and adding text joins it: "2" + "3" makes "23". Number() turns text into a number, but it turns an empty box into 0 and "abc" into NaN (Not a Number). So we first check the text against a pattern, and if it is not a plain number we return a message that explains what to fix instead of guessing.

Check: Open the browser console (press F12 in Chrome or Edge and choose Console; on a Mac press Cmd+Option+J in Chrome). Type parseNumber("2.5") and press Enter. You should see ok: true and value: 2.5. Try parseNumber("abc") to see the message.

6. Do the math, one operation at a time

Add this code below the previous code in script.js and save.

// ===== Step 6: Do the math =====
function calculate(a, operator, b) {
  if (operator === 'add') {
    return a + b;
  }
  if (operator === 'subtract') {
    return a - b;
  }
  if (operator === 'multiply') {
    return a * b;
  }
  if (operator === 'divide') {
    if (b === 0) {
      throw new Error("You can't divide by zero. Choose a different second number.");
    }
    return a / b;
  }
  throw new Error('Choose an operation.');
}

Why this works

Each operation is spelled out, so the code can only do these four things. If you divide by zero, JavaScript returns Infinity, which is not a helpful answer. Throwing an Error stops the calculation and carries a message the page can show.

Check: In the console, calculate(9, "subtract", 12) shows -3, and calculate(1, "divide", 0) shows an error message about zero.

7. Show the answer neatly

Add this code below the previous code and save.

// ===== Step 7: Show the answer neatly =====
// Rounding policy: show at most 10 decimal places and drop trailing zeros,
// so 0.1 + 0.2 shows 0.3 and 1 ÷ 3 shows 0.3333333333.
function formatNumber(value) {
  if (!Number.isFinite(value)) {
    throw new Error('The answer is too large for this calculator.');
  }
  let text;
  if (Math.abs(value) >= 1e21) {
    text = String(value);              // huge numbers use scientific notation, like 1e+21
  } else {
    text = value.toFixed(10);          // round to 10 decimal places
    text = text.replace(/\.?0+$/, ''); // remove trailing zeros (and a lonely period)
    if (text === '-0') {
      text = '0';
    }
  }
  return text.replace('-', '−');  // show a real minus sign: −3
}

const SYMBOLS = { add: '+', subtract: '−', multiply: '×', divide: '÷' };

Why this works

Computers store decimals in binary, so 0.1 + 0.2 is stored as 0.30000000000000004. Rounding only for display shows 0.3 without changing the math. Rounding policy: answers show at most 10 decimal places with trailing zeros removed; anything smaller than 0.00000000005 shows as 0; answers of 1e+21 or more appear in scientific notation. Negative answers use a true minus sign (−).

Check: In the console, formatNumber(0.1 + 0.2) shows "0.3" and formatNumber(-3) shows "−3".

8. Connect the code to the page

Add this last piece at the bottom of script.js, save, and refresh the browser tab.

// ===== Step 8: Connect the code to the page =====
const form = document.getElementById('calc-form');
const firstInput = document.getElementById('first');
const secondInput = document.getElementById('second');
const operatorSelect = document.getElementById('operator');
const output = document.getElementById('result');
const START_MESSAGE = 'Enter two numbers and choose an operation.';

function showFieldError(input, message) {
  const errorText = document.getElementById(input.id + '-error');
  errorText.textContent = message;
  errorText.hidden = false;
  input.setAttribute('aria-invalid', 'true');
}

function clearFieldError(input) {
  const errorText = document.getElementById(input.id + '-error');
  errorText.textContent = '';
  errorText.hidden = true;
  input.removeAttribute('aria-invalid');
}

function showResult(message, state) {
  output.textContent = message;
  output.dataset.state = state;
}

function submitCalculation(event) {
  event.preventDefault(); // stop the browser from reloading the page

  clearFieldError(firstInput);
  clearFieldError(secondInput);

  const first = parseNumber(firstInput.value);
  const second = parseNumber(secondInput.value);

  if (!first.ok) {
    showFieldError(firstInput, first.message);
  }
  if (!second.ok) {
    showFieldError(secondInput, second.message);
  }
  if (!first.ok || !second.ok) {
    showResult('Fix the highlighted box, then press Calculate.', 'error');
    (first.ok ? secondInput : firstInput).focus(); // take the keyboard to the problem
    return;
  }

  const operator = operatorSelect.value;
  try {
    const answer = calculate(first.value, operator, second.value);
    showResult(
      formatNumber(first.value) + ' ' + SYMBOLS[operator] + ' ' +
      formatNumber(second.value) + ' = ' + formatNumber(answer),
      'ok'
    );
  } catch (error) {
    showResult(error.message, 'error');
  }
}

form.addEventListener('submit', submitCalculation);
// A sandbox can block native form submission before a submit event is fired.
// Handle the button and Enter directly too, without granting form permissions.
form.querySelector('button[type="submit"]').addEventListener('click', submitCalculation);
form.addEventListener('keydown', function (event) {
  if (event.key === 'Enter' && event.target.matches('input')) {
    submitCalculation(event);
  }
});

form.addEventListener('reset', function () {
  // The browser empties the boxes; we clear our messages and start over
  clearFieldError(firstInput);
  clearFieldError(secondInput);
  output.textContent = START_MESSAGE;
  delete output.dataset.state;
  firstInput.focus();
});

Why this works

The same submitCalculation function handles the form, Calculate button and Enter key. Handling the button and Enter directly also makes the calculator work inside this lesson's restricted preview, where native form submission is blocked. event.preventDefault() stops navigation. Error messages appear under the box that needs fixing, the box is marked invalid for screen readers, and focus moves there. Reset clears the messages and returns focus to the first box.

Check: Type 2 and 3, choose Add, and press Calculate. The result shows 2 + 3 = 5.

9. Test every case

Try each row in the table below and compare what you see with the Expected result.

Then do the whole thing without a mouse: press Tab to reach a box, type, press Tab to reach Operation, use the arrow keys to choose, and press Enter to calculate.

Why this works

Testing the unusual cases, like empty boxes and dividing by zero, is how you find problems before someone else does.

Check: Every row matches. If one doesn’t, use Troubleshooting below.