JavaScript
Project final - Calculator
Combine all parts and finalize a working calculator.
Project final: complete the calculator
The calculator is almost ready. One edge case remains: division by zero. 5 / 0 gives Infinity in JavaScript, which is meaningless to the user.
To prevent this we add an else if branch to the existing if/else chain. The condition: operator === "/" && second === 0. That is, if the operation is division AND the second number is zero, we put a 'division by zero' error in result.
else if is an extra condition evaluated when the first if is false. The chain becomes if / else if / else.
The division-by-zero check
We place the else if branch between the existing if and else. Order matters: first the general invalid-input check, then the specific division-by-zero check, finally the normal computation.
The condition has two parts: operator === "/" (the operation is division) AND second === 0 (the second number is zero). Both must be true, so we join them with && (and).
In this branch we put a 'division by zero' message in result and the switch does not run.
Exercise Add the division-by-zero check
Complete the calculator. When the operation is division and the second number is 0, the result becomes Infinity. To prevent this, add an else if branch to the existing if/else structure. The condition: operator === "/" && second === 0. In this branch assign an error message to result. Keep the existing switch in the else block.
Show example solution
// Simple calculator: two numbers, one operation
const firstInput = "25";
const operator = "+";
const secondInput = "4";
const first = parseFloat(firstInput);
const second = parseFloat(secondInput);
let result;
if (isNaN(first) || isNaN(second)) {
result = "Error: please enter a valid number";
} else if (operator === "/" && second === 0) {
result = "Error: division by zero";
} else {
switch (operator) {
case "+":
result = first + second;
break;
case "-":
result = first - second;
break;
case "*":
result = first * second;
break;
case "/":
result = first / second;
break;
default:
result = "Unknown operation";
}
}
console.log("Result: " + result);
The calculator is complete!
At the end of five lessons you have a working calculator. You combined:
- variables with
const and let - string-to-number conversion with
parseFloat - four operations with
switch - validation with
if, else if, else - error catching with
isNaN
You can reuse the same pattern in other apps: take data, validate, compute, show the result. In the next groups you'll write more powerful programs with arrays and loops.
Test yourself
-
In an if/else if/else chain, when is the else if branch evaluated?
- When the first if condition is false
- When the first if condition is true
- Always, independently
- Only when switch is not used
Show answer
When the first if condition is false — Correct. else if is evaluated only when the previous if is false.
-
Complete the else if condition
if (isNaN(first) || isNaN(second)) {
result = "Error: please enter a valid number";
}
____
result = "Error: division by zero";
}
Show answer
if (isNaN(first) || isNaN(second)) {
result = "Error: please enter a valid number";
}
else if (operator === "/" && second === 0) {
result = "Error: division by zero";
}
-
Match the project concepts
- switch
- Makes multi-branch selection
- isNaN
- Validates numbers
- else if
- Adds an extra conditional branch
- &&
- Both conditions must be true
Next lesson: Creating strings
