🧮 BMI Calculator App using HTML, CSS & JavaScript

📌 Introduction

Have you ever wondered if your body weight is healthy or not?
BMI — Body Mass Index — is a quick way to find out.

In this project, I built a BMI Calculator App using only HTML, CSS, and JavaScript.
It takes your height (in cm) and weight (in kg) as input and shows your BMI value and weight category:
✔️ Underweight
✔️ Normal
✔️ Overweight

Let me walk you through how I made this app.

---

📷 App Preview

---

🧠 What is BMI?

BMI (Body Mass Index) is a number that tells whether your body weight is healthy for your height.

It is calculated using the formula:

iniCopyEditBMI = weight (kg) / (height (m) × height (m))

For example, if your weight is 60kg and your height is 170cm (1.7m):

iniCopyEditBMI = 60 / (1.7 * 1.7) = 20.76

Based on the value:

• BMI < 18.5 → Underweight

• BMI 18.5 - 24.9 → Normal

• BMI ≥ 25 → Overweight

---

💻 How the App Works

You enter your height in centimeters and weight in kilograms.
The app calculates your BMI using JavaScript and shows:

• Your BMI value (e.g., 22.5)

• Your health status (Normal, Overweight, Underweight)

---

🧩 Technologies Used

• HTML – for creating the input form and layout

• CSS – for designing the interface

• JavaScript – for logic and interaction

---

🧠 Core JavaScript Logic

Here's the logic that powers the app:

---

🔗 Live Demo & Source Code

• 🌐 Live Demo on Netlify

• 💻 Source Code on GitHub

• 👀 Video On YouTube

---

🎯 What I Learned

✅ DOM manipulation
✅ Form handling
✅ Input validation
✅ BMI logic and categorization
✅ Styling and layout in CSS

---

📣 Final Thoughts

This was a fun and simple project to build.
It taught me how real-world calculators work using basic math and JavaScript logic.

If you’re just starting with web development, this is a perfect beginner project.
Try making your own version — maybe add animations, charts, or even a dark mode!

---

🔁 Related Projects:

🔗 Currency Change App

🔗 Random Joke App

---

🧑‍💻 About Me

Hi, I’m Sarfraz, a passionate IT student building my dream project “Pro Dev Series”.
Follow me for more full-stack web projects using simple HTML, CSS, and JavaScript.

---

Thanks for reading! 💙
Let me know what you think in the comments 👇