Lesson 7.3 – BMI Calculator Project

🚀 Building a Body Mass Index Calculator Using HTML, CSS & JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Build a BMI Calculator

✅ Take User Input

✅ Perform Mathematical Calculations

✅ Use Conditional Statements

✅ Use DOM Manipulation

✅ Display Health Status

✅ Build Real-World JavaScript Projects

📖 Introduction

BMI stands for:

⚖️ Body Mass Index

BMI helps determine whether a person is:

✅ Underweight

✅ Normal Weight

✅ Overweight

✅ Obese

Many websites and fitness applications use BMI calculators.

Examples:

✅ Health Apps

✅ Fitness Websites

✅ Gym Management Systems

✅ Medical Portals

Today we will build:

⚖️ BMI Calculator Project

🌟 Project Preview

 
-------------------------

BMI CALCULATOR

Weight (kg)

[ 60 ]

Height (m)

[ 1.65 ]

[ Calculate BMI ]

Your BMI: 22.04

Status: Normal Weight

-------------------------
 

🎯 Concepts Used

Concept Used
Variables ✅
Operators ✅
Conditional Statements ✅
Functions ✅
Events ✅
DOM Manipulation ✅

📚 BMI Formula

BMI is calculated using:

BMI=Weight (kg)Height2 (m2)BMI=\frac{Weight\ (kg)}{Height^2\ (m^2)}

Example

Weight:

 
60 kg
 

Height:

 
1.65 m
 

Calculation:

 
BMI = 60 ÷ (1.65 × 1.65)

BMI = 22.04
 

🌟 BMI Categories

BMI Value Category
Below 18.5 Underweight
18.5 – 24.9 Normal Weight
25 – 29.9 Overweight
30 and Above Obese

🗂️ Project Files

Create:

index.html

style.css

script.js

🎯 Step 1 – Create HTML Structure

index.html

<!DOCTYPE html>

<html>

<head>

<title>BMI Calculator</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>

BMI Calculator

</h1>

<input type="number"

id="weight"

placeholder="Weight (kg)">

<br><br>

<input type="number"

id="height"

placeholder="Height (m)"

step="0.01">

<br><br>

<button onclick="calculateBMI()">

Calculate BMI

</button>

<h2 id="result">

Your BMI Will Appear Here

</h2>

</div>

<script src="script.js"></script>

</body>

</html>

🌟 Understanding HTML

Weight Input:

 
<input type="number" id="weight">
 

Height Input:

 
<input type="number" id="height">
 

Button:

 
<button onclick="calculateBMI()">
 

Result Area:

 
<h2 id="result">
 

🎯 Step 2 – Design the Interface

style.css

body{

font-family:Arial;

background:#f0f0f0;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 0 15px lightgray;

text-align:center;

width:350px;

}

input{

padding:10px;

width:250px;

font-size:16px;

}

button{

padding:10px 20px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

cursor:pointer;

}

button:hover{

background:#084298;

}

h1{

color:#0d6efd;

}

🎯 Step 3 – Create JavaScript Function

script.js

function calculateBMI()
{

}

🌟 Step 4 – Get User Input

let weight =

document.getElementById("weight").value;

let height =

document.getElementById("height").value;

Example:

 
Weight = 60

Height = 1.65
 

🎯 Step 5 – Validate Input

if(weight == "" || height == "")
{

document.getElementById("result").innerHTML =

"Please Enter Weight and Height";

return;

}

Output

 
Please Enter Weight and Height
 

🎯 Step 6 – Calculate BMI

let bmi =

weight / (height * height);

Example:

 
60 ÷ (1.65 × 1.65)

= 22.04
 

🌟 Round the Result

bmi = bmi.toFixed(2);

Output:

 
22.04
 

🎯 Step 7 – Determine Health Status

let status = "";

Underweight

if(bmi < 18.5)
{

status = "Underweight";

}

Normal Weight

else if(bmi < 25)
{

status = "Normal Weight";

}

Overweight

else if(bmi < 30)
{

status = "Overweight";

}

Obese

else
{

status = "Obese";

}

🎯 Step 8 – Display Result

document.getElementById("result").innerHTML =

"Your BMI: " + bmi +

"<br>Status: " + status;

🌟 Complete JavaScript Code

script.js

function calculateBMI()
{

let weight =

document.getElementById("weight").value;

let height =

document.getElementById("height").value;

if(weight == "" || height == "")
{

document.getElementById("result").innerHTML =

"Please Enter Weight and Height";

return;

}

let bmi =

weight / (height * height);

bmi = bmi.toFixed(2);

let status = "";

if(bmi < 18.5)
{

status = "Underweight";

}
else if(bmi < 25)
{

status = "Normal Weight";

}
else if(bmi < 30)
{

status = "Overweight";

}
else
{

status = "Obese";

}

document.getElementById("result").innerHTML =

"Your BMI: " + bmi +

"<br>Status: " + status;

}

💻 Complete Project Code

index.html

<!DOCTYPE html>

<html>

<head>

<title>BMI Calculator</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>BMI Calculator</h1>

<input type="number"

id="weight"

placeholder="Weight (kg)">

<br><br>

<input type="number"

id="height"

placeholder="Height (m)"

step="0.01">

<br><br>

<button onclick="calculateBMI()">

Calculate BMI

</button>

<h2 id="result">

Your BMI Will Appear Here

</h2>

</div>

<script src="script.js"></script>

</body>

</html>

script.js

function calculateBMI()
{

let weight =
document.getElementById("weight").value;

let height =
document.getElementById("height").value;

if(weight == "" || height == "")
{

document.getElementById("result").innerHTML =
"Please Enter Weight and Height";

return;

}

let bmi =
weight / (height * height);

bmi = bmi.toFixed(2);

let status = "";

if(bmi < 18.5)
{

status = "Underweight";

}
else if(bmi < 25)
{

status = "Normal Weight";

}
else if(bmi < 30)
{

status = "Overweight";

}
else
{

status = "Obese";

}

document.getElementById("result").innerHTML =

"Your BMI: " + bmi +

"<br>Status: " + status;

}

🎯 Expected Output

Input:

 
Weight = 60

Height = 1.65
 

Output:

 
Your BMI: 22.04

Status: Normal Weight
 

🌟 Project Improvements

Add:

✅ Reset Button

✅ BMI Color Indicators

✅ Health Tips

✅ Ideal Weight Range

✅ Dark Mode

🏫 Real World Applications

BMI Calculators are used in:

✅ Hospitals

✅ Fitness Centers

✅ Health Apps

✅ Gym Management Systems

✅ Medical Portals

✅ Wellness Websites

⚠️ Common Beginner Mistakes

Mistake 1

Using Height in Centimeters

Wrong:

 
165
 

Correct:

 
1.65
 

Mistake 2

Forgetting Validation

May produce invalid results.

Mistake 3

Not Using toFixed()

Results may show many decimal places.

🌟 Best Practices

✅ Validate Input

✅ Round BMI Values

✅ Display Clear Messages

✅ Use Meaningful Variable Names

✅ Keep UI Simple

🏆 Project Challenge

Modify the project and add:

✅ User Name Input

✅ Age Input

✅ Gender Selection

✅ Personalized Health Advice

✅ BMI Progress Bar

📝 Practical Activity

Create:

Student Fitness Checker

Inputs:

  • Student Name
  • Weight
  • Height

Output:

  • BMI
  • Health Status
  • Fitness Suggestion

📋 Assignment

Assignment 7.3

  1. What is BMI?
  2. Write the BMI Formula.
  3. Why is input validation important?
  4. What does toFixed(2) do?
  5. Create a BMI Calculator project.
  6. Add BMI categories.
  7. Add a Reset Button.

🧠 Quiz

Q1. BMI stands for?

A. Body Mass Index

B. Body Measurement Indicator

C. Body Meter Index

D. Body Mass Information

✅ Answer: A

Q2. Which formula is used for BMI?

A. Weight × Height

B. Weight ÷ Height²

C. Height ÷ Weight

D. Weight + Height

✅ Answer: B

Q3. Which JavaScript method rounds to 2 decimal places?

A. round()

B. fix()

C. toFixed(2)

D. decimal()

✅ Answer: C

Q4. BMI Calculator uses?

A. DOM Manipulation

B. Functions

C. Conditional Statements

D. All of These

✅ Answer: D

Q5. A BMI of 22 falls into which category?

A. Underweight

B. Normal Weight

C. Overweight

D. Obese

✅ Answer: B

📌 Lesson Summary

✅ Built a complete BMI Calculator.

✅ Used mathematical calculations.

✅ Used conditional statements to determine health status.

✅ Applied DOM Manipulation for dynamic output.

✅ Created a real-world health application.

PreviousNext