Complete solution (100% reference)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
Purpose: Complete solution demonstrating all operator exercises including demo and 3 calculator projects
| Exercise | Calculator Type | Operators Used | Key Concepts |
|---|---|---|---|
| Demo | Birth Year | - (subtraction) |
Basic arithmetic, string to number conversion |
| Exercise 1 | BMI Calculator | / (division), * (multiplication) |
Order of operations, Math.round(), formulas |
| Exercise 2 | Age in Months | * (multiplication), + (addition), - (subtraction) |
Multiple operators, edge cases |
| Exercise 3 | Time Converter | / (division), % (modulo) |
Modulo operator, remainder calculations |
./setup.sh && npm start
IMPORTANT: Press F12 to open the console before running! You'll see detailed calculations and explanations in the console.
| Operator | Name | Example | Result |
|---|---|---|---|
+ |
Addition | 10 + 5 |
15 |
- |
Subtraction | 10 - 5 |
5 |
* |
Multiplication | 10 * 5 |
50 |
/ |
Division | 10 / 5 |
2 |
% |
Modulo (Remainder) | 10 % 3 |
1 |
// ❌ WRONG - prompt() returns STRING
var age = prompt("Age?"); // age = "15" (string)
var result = age + 10; // "15" + 10 = "1510" (concatenation!)
// ✅ CORRECT - Use + to convert to NUMBER
var age = +prompt("Age?"); // age = 15 (number)
var result = age + 10; // 15 + 10 = 25 (addition!)
var BMI = 20.7654321;
Math.round(BMI); // Returns 21
var hours = 14.444;
Math.round(hours); // Returns 14
THE #1 MISTAKE STUDENTS MAKE:
Students forget that prompt() ALWAYS returns a string, even when the user types numbers!
// What happens without +
var weight = prompt("Weight?"); // User types "60"
var height = prompt("Height?"); // User types "1.7"
var BMI = weight / height; // JavaScript tries to convert (works by luck)
var total = weight + 10; // "60" + 10 = "6010" ❌ STRING CONCATENATION!
// What happens with +
var weight = +prompt("Weight?"); // Converts "60" to 60
var height = +prompt("Height?"); // Converts "1.7" to 1.7
var BMI = weight / height; // 60 / 1.7 = proper division ✅
var total = weight + 10; // 60 + 10 = 70 ✅ ADDITION!
TEACH THIS FIRST: Before students start the exercises, demonstrate the difference between string concatenation and numeric addition!
// ❌ WRONG - Missing parentheses
var BMI = weight / height * height;
// Evaluates as: (weight / height) * height = weight (WRONG!)
// ✅ CORRECT - Parentheses for height squared
var BMI = weight / (height * height);
// Evaluates as: weight / (height²) (CORRECT!)
Why? JavaScript follows PEMDAS (Parentheses, Exponents, Multiplication/Division, Addition/Subtraction)
Students often think % means percentage. It doesn't!
// % gives the REMAINDER after division
10 % 3 = 1 // 10 ÷ 3 = 3 remainder 1
17 % 5 = 2 // 17 ÷ 5 = 3 remainder 2
20 % 4 = 0 // 20 ÷ 4 = 5 remainder 0
60 % 60 = 0 // 60 ÷ 60 = 1 remainder 0
Real-world use: Finding leftover seconds after extracting full minutes/hours!
// Example: Born in December, current month is February
var birthMonth = 12;
var curMonth = 2;
var months = (15 * 12) + (2 - 12); // 180 + (-10) = 170
// Students panic: "I got negative months!"
// Actually CORRECT! Haven't had birthday yet this year.
This is a teaching opportunity to discuss:
Create a Celsius to Fahrenheit converter
F = (C × 9/5) + 32Calculate weekly salary
salary = rate × hoursAge in days calculator
days = months × 30Improved time converter with days
BMI with category feedback
if (BMI < 18.5) alert("Underweight");
else if (BMI < 25) alert("Normal weight");
else if (BMI < 30) alert("Overweight");
else alert("Obese");
Reverse time converter
total = (hours × 3600) + (minutes × 60) + secondsDigital clock format (HH:MM:SS)
14:07:05 not 14:7:5Loan payment calculator
Unit converter suite
JavaScript follows standard mathematical order:
(2 + 3) evaluated firstExample:
var result = 10 + 5 * 2; // 10 + (5 * 2) = 20 (not 30!)
var result = (10 + 5) * 2; // (15) * 2 = 30 ✅
The modulo operator % is essential for:
n % 2 === 0 means even)Visual explanation:
52000 seconds ÷ 3600 seconds/hour = 14.444... hours
Think of it as:
- 14 FULL hours = 14 × 3600 = 50400 seconds
- Leftover: 52000 - 50400 = 1600 seconds
- That's what 52000 % 3600 gives us! (1600)
Then:
- 1600 seconds ÷ 60 seconds/minute = 26.666... minutes
- 26 FULL minutes = 26 × 60 = 1560 seconds
- Leftover: 1600 - 1560 = 40 seconds
- That's what 1600 % 60 gives us! (40)
Cause: User input couldn't be converted to number
Solution:
var age = +prompt("Age?");
if (isNaN(age)) {
alert("Please enter a valid number!");
}
Troubleshooting checklist:
+prompt() for ALL numeric inputs?* not ×, / not ÷)Example:
"60" + 10 = "6010" // String concatenation ❌
60 + 10 = 70 // Numeric addition ✅
Solution: ALWAYS use +prompt() not just prompt()
After completing this activity, students should be able to:
Show type conversion in console:
console.log(typeof "15"); // "string"
console.log(typeof +"15"); // "number"
console.log("15" + 10); // "1510"
console.log(+"15" + 10); // 25
Demonstrate order of operations:
console.log(10 + 5 * 2); // 20 (not 30!)
console.log((10 + 5) * 2); // 30
Show modulo visually:
console.log("15 ÷ 4 = 3 remainder", 15 % 4); // remainder 3
console.log("20 ÷ 6 = 3 remainder", 20 % 6); // remainder 2
Total time: 60-75 minutes
% does (not percentage!)Activity 03 Solution | W2 Advanced JavaScript Foundations | 60-75 min