BMI Calculator

Overview

This project is a simple and interactive BMI (Body Mass Index) Calculator built with HTML, CSS, and JavaScript. It allows users to input their height and weight to calculate their BMI and provides feedback on the result. The calculator also offers guidance on BMI categories, helping users understand their BMI score relative to healthy ranges.

How I Built It

HTML Structure:

I structured the page using semantic HTML elements, including headings, paragraphs, and an easy-to-navigate form. The form fields prompt users for height (in centimeters) and weight (in kilograms) and include validation to ensure only positive numbers can be submitted.

Styling:

Using style.css, I applied basic styling to make the layout clean and readable. The headings and instructional text are styled to be clear and direct, while the form layout keeps everything accessible and user-friendly. JavaScript for BMI Calculation:

A JavaScript function (handleForm in script.js) captures form data, performs the BMI calculation, and displays the result directly on the page. The function also prevents the default form submission behavior, ensuring the page doesn’t reload when calculating the result, which improves the user experience.

BMI Guidance:

Below the calculator, I added a brief reference guide explaining different BMI ranges, helping users interpret their results (e.g., “Too low,” “Healthy weight,” and “Too high” categories). This educational element provides users with immediate context about their BMI calculation without needing to look up additional resources.

This project gave me practical experience in building interactive web forms, performing calculations using JavaScript, and creating a simple user-friendly design that provides both functionality and guidance.