Control Flow

What you'll learn

• How to use if-else statements for decision making
• Implementing conditional logic with comparison operators
• Creating input validation systems
• Using logical operators (|| and &&)
• Working with number conversions and formatting

In this activity, you will learn how to use if-else statements and conditional logic to control the flow of your JavaScript programs. You'll create password checkers, BMI categorizers, and input validation systems.

: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 - Password Checker Example

Time: 5 minutes

Demo Link

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

Steps to follow:

1. Click the demo link above
2. Look at the provided code structure
3. Create a password checker that prompts the user for input
4. Compare the input with your secret password
5. Log appropriate messages to the console

Expected Results:

For the prompt, you can ask whatever message you like.

If you have done it correctly, it should look like this:

Demo code answer:

var mySecretPass = "iLoveTelebort"
var checkPassword = prompt("What is the password?");
if (mySecretPass === checkPassword) {
  console.log("Successful.");
} else {
  console.log("Invalid password.");
}

:bulb: Tip Notice how we use === (strict equality) instead of ==. This ensures both the value and type match!

:computer: Your Control Flow Projects

Exercise One: BMI Calculator with Weight Categories

Time: 20 minutes

Exercise 1 Template

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

Background

Do you remember the BMI calculator we did in the previous concept? This time let's make it so we can check what weight category as the result.

BMI (Body Mass Index) is used to estimate if your body is at a healthy weight or not.

• Formula: BMI = weight / (height * height)

Weight Categories:

Steps to Complete:

1. Open the template using the link above
2. Create prompts to get weight and height from the user
3. Calculate BMI using the formula: BMI = weight / (height * height)
4. Round the result using .toFixed(1) to show 1 decimal place
   • Learn more about .toFixed() here: https://www.w3schools.com/jsref/jsref_tofixed.asp
5. Create if-else statements to check which category the BMI falls into:
   • If ``BMI < 18.5``: alert("Your BMI is " + BMI + ". You are underweight.");
   • If ``BMI >= 18.5`` ``AND < 25``: alert("Your BMI is " + BMI + ". You have a normal weight.");
   • If ``BMI >= 25``: alert("Your BMI is " + BMI + ". You are overweight.");

:bulb: Tip Hint: Use if-else if-else statements to check BMI ranges:

• First condition: if (BMI < 18.5)
• Second condition: else if (BMI >= 18.5 && BMI < 25)
• Final condition: else

Follow this flowchart:

Expected Results:

Assuming your weight is 60kg and your height is 1.7 meters:

Exercise 2: BMI Calculator with Input Validation

Time: 15 minutes

:warning: Warning Important: Make sure you complete Exercise 1 before starting this exercise. You'll be building on your previous code!

What You'll Add

Let's create a validation system for our BMI calculator to handle invalid inputs.

Steps to Complete:

1. Use your Exercise 1 code as a starting point
2. Convert prompts to numbers using +prompt() instead of just prompt()
   javascript

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

3. Add input validation BEFORE calculating BMI:
   • Check if weight equals 0 OR height equals 0
   • If either is 0, show: alert("Invalid input.");
   • If both are valid, proceed with BMI calculation
4. Structure your code like this:
   javascript

   if (weight === 0 || height === 0) {
     alert("Invalid input.");
   } else {
     // Your BMI calculation and category logic here
   }
   

5. Test your validation:
   • Enter 0 for weight -> Should show "Invalid input."
   • Enter 0 for height -> Should show "Invalid input."
   • Enter valid numbers -> Should show BMI category

:bulb: Tip Testing Tip: Test all weight categories by using these example inputs:

• Underweight: weight = 50, height = 1.7
• Normal: weight = 60, height = 1.7
• Overweight: weight = 80, height = 1.7

:white_check_mark: Required Elements

Make sure your Control Flow projects include:

Exercise 1 Requirements:

• :emoji: BMI calculator with proper if-else statements for weight categories
• :emoji: Three categories: underweight (< 18.5), normal (18.5-24.9), overweight (>= 25)
• :emoji: Use of .toFixed(1) for precise BMI display
• :emoji: Alert messages that include both BMI value and category

Exercise 2 Requirements:

• :emoji: Input validation that prevents calculation when weight or height is 0
• :emoji: Use of +prompt() for number conversion
• :emoji: Logical OR operator (||) for validation
• :emoji: Proper if-else structure with validation first, then BMI calculation

Code Quality:

• :emoji: Proper use of comparison operators (<, >=, ===)
• :emoji: Clear variable names (weight, height, BMI)
• :emoji: Correct operator precedence in calculations

:emoji: Project Submission

:information_source: Before submitting, make sure to:

1. Test all BMI categories (underweight, normal, overweight)
2. Test validation with 0 values for both weight and height
3. Verify your alerts show the correct messages
4. Check that your code uses +prompt() for number conversion

When you have completed your "Control Flow" projects, submit them using the link below:

Submit Your Projects Here

:wrench: Troubleshooting

Common Issues and Solutions:

Problem: "My BMI calculation shows NaN"

• Solution: Make sure you're using +prompt() to convert string inputs to numbers

Problem: "My validation isn't working"

• Solution: Check that your validation comes BEFORE the BMI calculation, and use === for comparison

Problem: "Wrong weight category is showing"

• Solution: Double-check your if-else conditions. Remember:
  • Underweight: ``BMI < 18.5``
  • Normal: ``BMI >= 18.5`` AND ``BMI < 25``
  • Overweight: ``BMI >= 25``

Problem: "My decimal places are wrong"

• Solution: Use .toFixed(1) on your BMI variable after calculation but before using it in alerts

:bulb: Tip Need Help? If you're stuck, try adding console.log() statements to check your variable values at each step!