Calculator

What this page does

1. Type a number in the first box.
2. Choose an operator from the dropdown.
3. Type a number in the second box.
4. Click the equals button. The answer appears below.

Now try to break it. Leave a box empty. Type letters. Divide by zero. The page shows a message instead of a wrong answer.

A function is a named recipe

This lesson is really about writing functions. The calculator is just a good excuse to write four of them.

function add(a, b) {
    return a + b;
}

• add is the name. You use it to call the function later.
• a and b are the parameters. They are empty boxes that get filled with the numbers you hand over.
• return sends the answer back out. It also ends the function straight away, so nothing after it runs.

The other three follow the same shape. Only the maths in the middle changes.

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    return a / b;
}

Why return matters

A function that shows its answer is finished with it. The value is on the screen and nothing else can use it. A function that returns its answer hands the value back. You can store it, do more maths on it, or pass it into another function.

Open the console with F12 and try these three lines. The second and third only work because add returns a value.

add(2, 3)                  // 5
add(2, 3) * 10             // 50
multiply(10, add(1, 1))    // 20

Choosing which function to call

calculate() does no maths at all. It has four jobs, in order: read the boxes, check them, call the right function, and show what came back.

switch (operator) {
    case "+": answer = add(num1, num2); break;
    case "-": answer = subtract(num1, num2); break;
    case "*": answer = multiply(num1, num2); break;
    case "/": answer = divide(num1, num2); break;
}

Build it step by step

Write the functions first and test them on their own. Wire up the page after.

1. 1

   Make the page

   Make calculator.html with two boxes, an operator <select>, an equals button, and an empty <p id="result">. Link calculator.css in the head and calculator.js at the end of the body. Open it. The controls show, but nothing happens.

2. 2

   Write add, and test it alone

   In calculator.js, write add(a, b). Do not touch the page yet. Reload, open the console, and type add(2, 3). You should get 5 back. Getting a function right on its own, before it is wired to anything, is a habit worth building.

3. 3

   Write the other three

   Write subtract, multiply, and divide. Test each one in the console. They are all the same shape as add.

4. 4

   Wire up the button

   Write calculate(). Read both boxes, use parseFloat on them, read the operator, then use a switch to call the right function. Put the returned answer in #result. Connect it with addEventListener. It now works for normal input, and misbehaves on bad input. That is expected for now.

5. 5

   Check for non-numbers

   Add an isNaN check on both numbers at the top of calculate(). If either one fails, show a message and return early.

6. 6

   Check for divide by zero

   Inside the "/" case, check whether the second number is 0. If it is, show a message and stop. Notice that this check belongs here, in the page code, and not inside divide.

7. 7

   Check the operator

   Add a default case to the switch. It runs when the operator is not one the code knows.