# Build a BMI Calculator with HTML, CSS, and JavaScript
> Learn how to create a functional web-based BMI calculator for weighing body status using HTML, CSS, and JavaScript logic in this step-by-step guide.

Tags: web-development, javascript-tutorial, html-css, bmi-calculator, coding-project, frontend-development
## BMI Calculator Overview
- Project by Syna Shah for BCA Web Development curriculum.
- Focuses on creating a functional tool to compute Body Mass Index instantly.

## Objective & Technologies
- **Objective:** Design a responsive website applying HTML structure, CSS styling, and JS logic.
- **Tech Stack:** HTML (Structure), CSS (Aesthetics), JavaScript (Logic), and Web Browser (Execution).

## Code Segmentation
- **HTML:** Skeleton with input fields for weight (kg) and height (cm), and a 'Calculate' button.
- **CSS:** Enhances UX through layout centering, background colors, and hover effects.
- **JavaScript:** Uses the `calculateBMI()` function triggered by an `onclick` event to perform client-side math.

## Logic & Calculation
- **Formula:** BMI = Weight / (Height in meters * Height in meters).
- **Input Handling:** Retrieves values via `document.getElementById().value` and converts height from cm to m.
- **Formatting:** Results are rounded using `.toFixed(2)`.

## BMI Classification Categories
- **Underweight:** < 18.5
- **Normal Weight:** 18.5 – 24.9
- **Overweight:** 25 – 29.9
- **Obese:** ≥ 30

## Error Handling & Future Scope
- **Validation:** Includes checks for empty or invalid fields to prevent 'NaN' results.
- **Future Scope:** Adding age/gender metrics, database integration for history, and visual health charts.
---
This presentation was created with [Bobr AI](https://bobr.ai) — an AI presentation generator.