BMI Calculator Using HTML , CSS & JavaScript
Introduction:
The Body Mass Index (BMI) calculator is a web application designed to help users calculate
their BMI based on their height and weight. BMI is a measure of body fat based on an
individual’s weight in relation to their height. This calculator provides a convenient way for
users to assess their body composition and determine if they are underweight, normal
weight, overweight, or obese according to standard BMI categories.
Key Features:
1. User Input: The calculator allows users to enter their height and weight in
metric units (centimeters and kilograms) or imperial units (feet, inches, and
pounds).
2. BMI Calculation: The application calculates the BMI using the formula: BMI =
weight (kg) / (height (m))^2. The result is then displayed to the user.
3. BMI Categories: The calculated BMI is categorized into different ranges such as
underweight, normal weight, overweight, and obese. These categories provide
users with an understanding of their current body composition.
4. Responsive Design: The web application is designed to be responsive, adapting
to different screen sizes and devices, ensuring optimal user experience across
desktop, tablet, and mobile devices.
5. Attractive Layout Design: The user interface is visually appealing, featuring a
modern and clean design to enhance the overall user experience.
6. Background Animation: The application incorporates a background animation
to add an element of visual interest and engagement, making the user
experience more enjoyable.
Source Code:
HTML:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>BMI Calculator</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>BMI Calculator</h1>
<div class="input-container">
<label for="height">Height:</label>
<input type="number" id="height" placeholder="Height
(cm)">
</div>
<div class="input-container">
<label for="weight">Weight:</label>
<input type="number" id="weight" placeholder="Weight">
<select id="weightUnit">
<option value="kg" selected>Kilograms (kg)</option>
<option value="lbs">Pounds (lbs)</option>
</select>
</div>
<button > <div id="result"></div>
</div>
<script src="[Link]"></script>
</body>
</html>
JavaScript ([Link]):
function calculateBMI() {
var heightInput = [Link]("height");
var weightInput = [Link]("weight");
var weightUnit = [Link]("weightUnit");
var resultDiv = [Link]("result");
var height = parseFloat([Link]);
var weight = parseFloat([Link]);
if (isNaN(height) || isNaN(weight)) {
[Link] = "Please enter valid height and
weight.";
return;
}
// Convert weight to kilograms if the unit is pounds
if ([Link] === "lbs") {
weight = weight * 0.453592; // 1 pound = 0.453592 kilograms
}
var bmi = weight / ((height / 100) ** 2);
var category = "";
if (bmi < 18.5) {
category = "Underweight";
} else if (bmi < 25) {
category = "Normal weight";
} else if (bmi < 30) {
category = "Overweight";
} else {
category = "Obese";
}
[Link] = "Your BMI is " + [Link](2) + " (" +
category + ")";
}
Output: considers the selected weight unit and converts the weight
to kilograms if it's in pounds before calculating the BMI.
