BMI Calculator

:information_source: Project Overview Difficulty Level: Beginner
Estimated Time: 45-60 minutes
Skills Practiced:

• Variables and data types
• While loops and control flow
• User input validation
• Mathematical calculations
• Conditional statements (if/else)
• JavaScript methods (.toFixed(), isNaN())

:emoji:️ Project Roadmap

graph LR
    A[Phase 1: Setup] --> B[Phase 2: Input Collection]
    B --> C[Phase 3: Validation]
    C --> D[Phase 4: Calculation]
    D --> E[Phase 5: Display Results]
    E --> F[Phase 6: Advanced Features]
    
    style A fill:#e1f5e1
    style B fill:#fff3cd
    style C fill:#f8d7da
    style D fill:#d1ecf1
    style E fill:#d4edda
    style F fill:#e2e3e5

Download your material

What you'll do: Open the project and familiarize yourself with the interface

• Open the StackBlitz template: BMI Calculator
• Other alternative: you can download the source code template from Stackblitz Download Project button if you want to use IDE.

:warning: IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

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

ONLY EDIT the necessary files.

Project Overview

Let's create a BMI calculator using all the knowledge we've learnt from chapter 1 to 5.

The idea is that your BMI calculator will validate the input and keep looping until the correct input is given.

:bulb: What is BMI? BMI (Body Mass Index) is a simple calculation that helps determine if someone's weight is healthy for their height. The formula is:

ini

BMI = weight (kg) / (height (m))²

:dart: Milestone Checkpoint #1: Environment Setup

Before diving into coding, make sure you have:

• Opened the StackBlitz template
• Familiarized yourself with the file structure
• Located the script.js file where you'll write your code

Great job setting up! Now let's start building! :rocket:

Instructions

You must follow the following instructions:

Phase One: Variable Declaration

1. Declare variable weightKG and heightCM, giving each variable a default value of 0.

// Start your code here
let weightKG = 0;
let heightCM = 0;

:bulb: Best Practice Always initialize your variables! This prevents unexpected errors and makes your code more predictable.

Phase 2: Weight Input with Validation

2. Let's create a while loop for the weightKG prompt.
   • While weightKG is equal to 0, prompt an input for weightKG.
   • If the input is equal to 0, alert the user with "Invalid weight." as the message.

:warning: Common Pitfall Remember that prompt() returns a string! You'll need to convert it to a number using Number() or parseFloat().

Phase 3: Height Input with Validation

3. Just like weightKG in step 2, create a while loop for the heightCM prompt.
   • While heightCM is equal to 0, prompt an input for heightCM.
   • If the input is equal to 0, alert the user with "Invalid height." as the message

:dart: Milestone Checkpoint #2: Input Collection

Before proceeding, test your code:

• Does it keep asking for weight until a valid number is entered?
• Does it keep asking for height until a valid number is entered?
• Do the alert messages appear when you enter 0?

Phase 4: Unit Conversion

4. Convert the height in cm to meters by declaring another variable heightMeter

// Hint: To convert cm to meters, divide by 100
let heightMeter = heightCM / 100;

Phase 5: BMI Calculation

5. Declare and calculate the BMI with the equation provided.

:bulb: Math in JavaScript To square a number in JavaScript, you can use:

• Math.pow(heightMeter, 2)
• Or simply: heightMeter * heightMeter

Phase 6: Formatting the Result

6. Make sure the BMI is rounded to only 1 decimal place using the .toFixed() method. Check this page for more information: https://www.w3schools.com/jsref/jsref_tofixed.asp

// Example of using toFixed()
let bmi = 23.456789;
let roundedBMI = bmi.toFixed(1); // Result: "23.5"

Weight Categories

This is the weight category:

:information_source: BMI Categories

• Underweight: ``BMI < 18.5``
• Normal weight: BMI 18.5 - 24.9
• Overweight: ``BMI >= 25``

According to the BMI result, alert the user with this:

// Use if-else statements to check BMI ranges
if (BMI < 18.5) {
    alert("Your BMI is " + BMI + ". You're underweight." );
} else if (BMI >= 18.5 && BMI < 25) {
    alert("Your BMI is " + BMI + ". You've a normal weight." );
} else {
    alert("Your BMI is " + BMI + ". You're overweight." );
}

:warning: Important Note The code above shows JavaScript syntax, not Python. Make sure you're using the correct language!

:dart: Milestone Checkpoint #3: Basic Calculator Complete

Congratulations! Your basic BMI calculator should now:

• Accept weight and height inputs
• Validate that inputs are not zero
• Calculate BMI correctly
• Display the appropriate weight category

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

Assuming your weight is 60kg and your height is 170 cm.

If the input is 0 for weight and height, it should look like this:

:bulb: Testing Tip Try these test cases to make sure your calculator works correctly:

• Weight: 60kg, Height: 170cm -> BMI should be 20.8 (Normal)
• Weight: 50kg, Height: 170cm -> BMI should be 17.3 (Underweight)
• Weight: 80kg, Height: 170cm -> BMI should be 27.7 (Overweight)

Advanced Validation

Let's make the validation even better. Modify your validation conditions in your while loop so that it also cannot accept negative numbers and it cannot accept inputs that are not a number.

:warning: Common Validation Mistakes Students often forget to check for:

• Negative numbers (weight: -50)
• Text input ("hello" instead of a number)
• Empty input (just pressing Enter)
• Very large unrealistic numbers

Tips:

• To check if a variable is not a number (NaN), you can use the isNaN() function.
• Please go to this link to learn more: https://www.w3schools.com/jsref/jsref_isnan.asp

// Example of improved validation
while (weightKG <= 0 || isNaN(weightKG)) {
    weightKG = Number(prompt("Enter your weight in kg:"));
    if (weightKG <= 0 || isNaN(weightKG)) {
        alert("Invalid weight. Please enter a positive number.");
    }
}

:hammer_and_wrench: Debugging Tips

If your calculator isn't working as expected, try these debugging strategies:

1. Use console.log() to check values:

   javascript

   console.log("Weight entered:", weightKG);
   console.log("Height entered:", heightCM);
   console.log("Calculated BMI:", BMI);
   

2. Check the browser console (F12) for error messages

3. Test edge cases:

   • What happens if someone enters "0"?
   • What happens with negative numbers?
   • What happens with text like "abc"?

:bulb: Pro Debugging Tip Add temporary alert messages to see what values your variables hold at different points in your code. Remove them once everything works!

:dart: Milestone Checkpoint #4: Advanced Features Complete

Your enhanced BMI calculator should now:

• Reject negative numbers
• Reject non-numeric input (text, symbols)
• Keep asking until valid input is provided
• Handle all edge cases gracefully

:rocket: Extension Challenges

Ready to take your BMI calculator to the next level? Try these challenges:

Challenge One: Imperial Units (Easy)

Add an option for users to input weight in pounds and height in inches:

• 1 pound = 0.453592 kg
• 1 inch = 2.54 cm

Challenge 2: BMI History (Medium)

Store multiple BMI calculations in an array and display them at the end:

let bmiHistory = [];
// Add each calculation to the array
// Display all calculations when user is done

Challenge 3: Health Recommendations (Hard)

Based on the BMI category, provide specific health tips:

• Underweight: Suggest nutritious foods
• Normal: Encourage maintaining healthy habits
• Overweight: Recommend exercise routines

Challenge 4: Visual BMI Chart (Expert)

Create a simple text-based visualization of where the user's BMI falls:

Underweight | Normal | Overweight
    |          [X]         |

:bulb: Challenge Approach Start with Challenge 1 and work your way up. Each challenge builds on the skills from the previous one!

Code Review

Code Review: https://youtu.be/vIxYKE3OQDA

Project Submission

When you have completed your "BMI Calculator" project, submit it using the link below:

Submit Your Project Here

Make sure to test your webpage before submitting to ensure all required elements are working properly!

:bulb: Final Checklist Before submitting, ensure your calculator:

• :white_check_mark: Accepts and validates weight input
• :white_check_mark: Accepts and validates height input
• :white_check_mark: Calculates BMI correctly
• :white_check_mark: Shows the correct weight category
• :white_check_mark: Handles invalid inputs gracefully
• :white_check_mark: Works with the advanced validation requirements

You've got this! :muscle: