Building a Calculator

You know how to read from an input and write to the page. A calculator is exactly that — read two numbers, do some arithmetic, show the result. No Flask, no database, no server. Just JavaScript in the browser.

The HTML

Two number inputs, four buttons — one per operation — and a paragraph to show the result:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Calculator</title>
  </head>
  <body>

    <h1>Calculator</h1>

    <input type="number" id="num1" placeholder="First number">
    <input type="number" id="num2" placeholder="Second number">

    <br><br>

    <button onclick="calculate('+')">Add</button>
    <button onclick="calculate('-')">Subtract</button>
    <button onclick="calculate('*')">Multiply</button>
    <button onclick="calculate('/')">Divide</button>

    <p id="result"></p>

    <script>
      function calculate(operator) {
        // get both inputs and read their values as numbers
        let input1 = document.getElementById("num1")
        let input2 = document.getElementById("num2")
        let a = parseFloat(input1.value)
        let b = parseFloat(input2.value)

        // get the result paragraph so we can update it later
        let resultBox = document.getElementById("result")

        let answer

        if (operator === "+") {
          answer = a + b
        }
        if (operator === "-") {
          answer = a - b
        }
        if (operator === "*") {
          answer = a * b
        }
        if (operator === "/") {
          answer = a / b
        }

        resultBox.innerText = "Answer: " + answer
      }
    </script>

  </body>
</html>

Open this in your browser. Type two numbers. Click each button. The answer appears below without any page reload.

Each button calls the same calculate() function but passes a different operator string:

<button onclick="calculate('+')">Add</button>
<button onclick="calculate('-')">Subtract</button>

Inside calculate(), the operator parameter holds whichever string was passed. The if statements check it and do the right operation:

if (operator === "+") {
  answer = a + b
}
if (operator === "-") {
  answer = a - b
}

=== is JavaScript's equality check — same idea as == in Python, just written with three equals signs.

Handling empty inputs

If the user clicks a button before typing numbers, .value gives an empty string. parseFloat("") returns NaN — Not a Number — and the page shows Answer: NaN.

Add a check at the top of the function:

function calculate(operator) {
  // get both inputs and read their values as numbers
  let input1 = document.getElementById("num1")
  let input2 = document.getElementById("num2")
  let a = parseFloat(input1.value)
  let b = parseFloat(input2.value)

  // get the result paragraph — we will use it in two places below
  let resultBox = document.getElementById("result")

  // stop early if either input is empty or not a number
  if (isNaN(a) || isNaN(b)) {
    resultBox.innerText = "Please enter two numbers."
    return
  }

  let answer

  if (operator === "+") {
    answer = a + b
  }
  if (operator === "-") {
    answer = a - b
  }
  if (operator === "*") {
    answer = a * b
  }
  if (operator === "/") {
    answer = a / b
  }

  resultBox.innerText = "Answer: " + answer
}

isNaN() returns true if a value is not a valid number. || is "or" — same as Python's or. return stops the function early, same as Python.

Challenge

Add the empty-input check to your calculator. Test it — click a button with no numbers entered. What does the page show now?

Then try this: what happens when the user divides by zero? 5 / 0 in JavaScript gives Infinity — not an error. Add another check: if operator === "/" and b === 0, show "Cannot divide by zero." instead.

← Talking to the Page Next: Styling the Calculator →

Building a Calculator

The HTML

How the buttons share one function

Handling empty inputs