Complete Web Designing Course for Beginners

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:

$(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:

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

What is BMI?
Write the BMI Formula.
Why is input validation important?
What does toFixed(2) do?
Create a BMI Calculator project.
Add BMI categories.
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.