Operators

In this activity, you will learn how to use mathematical operators in JavaScript to perform calculations. You'll create calculators for birth year, BMI, age in months, and time conversions using arithmetic operations.

:books: What You'll Learn

• How to use arithmetic operators (+, -, *, /, %) in JavaScript
• Converting string inputs to numbers for calculations
• Using Math.round() to round decimal numbers
• Creating interactive calculators with prompts and alerts
• Working with real-world formulas (BMI, time conversion)

⏱️ Time Estimates

• Demo walkthrough: 10 minutes
• Exercise 1 (BMI Calculator): 15-20 minutes
• Exercise 2 (Age in Months): 15-20 minutes
• Exercise 3 (Time Converter): 20-25 minutes
• Total activity time: 60-75 minutes

:warning: IMPORTANT: Before You Start

:warning: Warning DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

In each exercise below, click the Stackblitz link and familiarize yourself with the interface.

:computer: Demo - Birth Year Calculator

Open Demo Template

:bulb: Tip You can also download the source code template from Stackblitz using the Download Project button if you prefer to use your own IDE.

Follow These Steps:

1. Add a script to your project and link the script
2. Create a variable called year and assign the value of this year
3. Create a variable called age and prompt() a message saying "What is your age?"
4. Create a variable called birthYear and calculate it with: year - age
5. Show the result with alert(): "Your birth year is " + birthYear

Example: If the year is 2021 and your age is 15:

Demo Solution:

var year = 2021; 
var age = +prompt("What is your age?"); 
var birthYear = year - age; 
alert("Your birth year is " + birthYear);

:bulb: Tip Notice the + before prompt()? This converts the string input into a number so we can do math with it!

:rocket: Your Operator Projects

:computer: Exercise One: BMI Calculator (15-20 minutes)

Open Exercise 1 Template

BMI (Body Mass Index) helps estimate if your body is at a healthy weight. Learn more about BMI results here.

Steps to Complete:

1. Add a script to your project and link it (like in the demo)
2. Prompt users for their weight in kg
3. Prompt users for their height in meters
4. Calculate BMI using: BMI = weight / (height × height)
5. Use Math.round() to round the result
6. Show the result: "Your BMI is " + Math.round(BMI) + "."

:bulb: Tip Remember to use +prompt() to convert string inputs to numbers! For example:

var weight = +prompt("Enter your weight in kg:");

Expected Results:

• Example input: weight = 60kg, height = 1.7m
• Example output: "Your BMI is 21."

:computer: Exercise 2: Age in Months Calculator (15-20 minutes)

Open Exercise 2 Template

How many months have you been alive? Let's calculate that using your age and birth month!

Steps to Complete:

1. Add a script to your project and link it
2. Prompt users for their age
3. Prompt users for their birth month (as a number: January = 1, February = 2, etc.)
4. Prompt users for the current month (as a number)
5. Calculate months using: months = (age × 12) + (curMonth - birthMonth)
6. Show the result: "You've lived " + months + " months! Live life to the fullest."

:bulb: Tip Common Challenge: Getting wrong results?

• Make sure ALL prompts use the + operator: var age = +prompt("What is your age?");
• For months, use numbers: January = 1, February = 2, March = 3, etc.
• If prompts don't appear, refresh your browser!

Expected Results:

• Example input: age = 15, birth month = 2 (February), current month = 7 (July)
• Example output: "You've lived 185 months! Live life to the fullest."

:computer: Exercise 3: Time Converter (20-25 minutes)

Open Exercise 3 Template

Let's convert seconds into a readable format showing hours, minutes, and seconds!

Steps to Complete:

1. Add a script to your project and link it
2. Prompt users for the total number of seconds
3. Calculate hours: hours = totalSeconds / 3600
4. Calculate minutes: minutes = (totalSeconds % 3600) / 60
5. Calculate seconds: seconds = totalSeconds % 60
6. Use Math.round() to round all results
7. Show the result: totalSeconds + " seconds is " + Math.round(hours) + " hours, " + Math.round(minutes) + " minutes, " + Math.round(seconds) + " seconds."

:bulb: Tip Understanding the % (modulo) operator:

• % gives you the remainder after division
• Example: 10 % 3 = 1 (because 10 / 3 = 3 remainder 1)
• We use it to find leftover seconds after calculating hours and minutes

Expected Results:

• Example input: 52000 seconds
• Example output: "52000 seconds is 14 hours, 27 minutes, 20 seconds."

:white_check_mark: Required Elements Checklist

Before submitting, make sure your projects include:

Exercise 1 - BMI Calculator:

• Weight prompt (in kg)
• Height prompt (in meters)
• Correct BMI calculation formula
• Rounded result using Math.round()

Exercise 2 - Age in Months:

• Age prompt
• Birth month prompt (1-12)
• Current month prompt (1-12)
• Correct calculation using the formula

Exercise 3 - Time Converter:

• Total seconds prompt
• Hours calculation with division
• Minutes calculation with modulo
• Seconds calculation with modulo
• All results rounded with Math.round()

All Exercises:

• Used +prompt() for number conversion
• Used correct operators (+, -, *, /, %)
• Tested with example values

:hammer_and_wrench: Troubleshooting Tips

:bulb: Tip Common Problems & Solutions:

1. Getting NaN (Not a Number)?

   • Make sure to use +prompt() not just prompt()

2. Calculations seem wrong?

   • Check your formula carefully
   • Test with simple numbers first (like 10, 100, etc.)

3. Prompts not appearing?

   • Refresh your browser
   • Check if pop-ups are blocked
   • Make sure your script is linked correctly

:emoji: Project Submission

:information_source: Ready to submit your projects? When you have completed ALL THREE calculator projects:

1. Test each calculator with the example values
2. Make sure all results match the expected outputs
3. Submit your work here:

Submit Your Projects Here

Remember: Test all calculations before submitting!