Build a BMI Calculator with HTML, CSS, and JavaScript

BMI Calculator Using HTML, CSS & JavaScript

Syna Shah | BCA (First Year) | Web Development

College Name | Academic Year 2024-2025

Introduction

• BMI stands for Body Mass Index, a key metric for measuring body weight status.<br><br>• This project is a functional web-based calculator designed to compute BMI instantly.<br><br>• Developed using core web technologies, it demonstrates the practical application of frontend logic.

Objective of the Project

To design a simple, responsive BMI calculator website.

To practically apply HTML structure, CSS styling, and JavaScript logic.

To calculate BMI accurately and determine the corresponding health category.

To understand the fundamentals of client-side scripting and user interaction.

Technologies Used

<strong>HTML</strong><br>Used for the structural skeleton of the webpage.<br><br><strong>CSS</strong><br>Handling styling, layout, aesthetics, and responsiveness.<br><br><strong>JavaScript</strong><br>Managing the core logic, calculation, and DOM manipulation.<br><br><strong>Web Browser</strong><br>Environment execution for the code.

Overall Code Structure

The entire project utilizes a unified structure for simplicity. The code functionality is logically segmented:<br><br><strong>1. HTML Section:</strong> Defines the UI elements.<br><br><strong>2. CSS Section:</strong> Controls the visual presentation.<br><br><strong>3. JavaScript Section:</strong> Handles the BMI math and updates the interface.

HTML Code Explanation

Structure: HTML builds the skeleton of the calculator interface.

Inputs: Two explicit input fields created for Weight (kg) and Height (cm).

Action: A 'Calculate' button triggers the logic.

Identification: Unique IDs are assigned to inputs so JavaScript can fetch data easily.

CSS Code Explanation

• CSS enhances the visual appeal and user experience.<br><br>• <strong>Background:</strong> Sets a pleasing color scheme for the page.<br><br>• <strong>Layout:</strong> Centers the calculator box for focus.<br><br>• <strong>Styling:</strong> Customizes fonts, button hover effects, and spacing to make it user-friendly.

JavaScript Function Explanation

The core interactivity is handled by the <code>calculateBMI()</code> function.<br><br>• Triggered by the <span style="color:#d32f2f;">onclick</span> event attached to the HTML button.<br><br>• Executes client-side, meaning no page reload occurs.<br><br>• Transforms a static page into a dynamic application.

User Input & Calculation Logic

Fetching Input: Uses document.getElementById().value to retrieve numbers.

Conversion: Height is converted from CM to Meters (Height / 100).

Formula: BMI = Weight / (Height × Height).

Rounding: results are formatted using .toFixed(2) for readability.

BMI Category Logic

The application uses <code>if-else</code> conditional statements to classify the result:<br><br>• <span style="color:#1976d2;">Underweight:</span> BMI < 18.5<br>• <span style="color:#388e3c;">Normal Weight:</span> BMI 18.5 – 24.9<br>• <span style="color:#fbc02d;">Overweight:</span> BMI 25 – 29.9<br>• <span style="color:#d32f2f;">Obese:</span> BMI ≥ 30

Result Display & Error Handling

Dynamic Output: Results are injected into a specific <div> container instantly.

Validation: Checks if fields are empty or invalid before calculating.

Feedback: Displays error messages (e.g., 'Please enter valid height') to the user.

Reliability: Ensures the calculator doesn't break or show 'NaN' (Not a Number).

Conclusion & Future Scope

<ul><li>Successfully calculates BMI using client-side JavaScript.</li><li>Demonstrates effective use of HTML structure and CSS design.</li><li>Code is efficient, lightweight, and beginner-friendly.</li></ul>

<ul><li>Incorporate Age and Gender for precise metabolism headers.</li><li>Implement Database integration to save user history.</li><li>Add visual Health Charts and diet tips based on results.</li></ul>