Design a BMI Calculator using JavaScript
Maintaining a healthy weight is crucial for overall well-being. One common method for evaluating body weight relative to height is the Body Mass Index (BMI). A BMI calculator can provide quick insights into whether you’re underweight, normal weight, overweight, or obese. Today, we will explore how to implement a BMI calculator tool using JavaScript.
The BMI calculator is a straightforward tool that takes two key inputs: weight (in kilograms) and height (in meters). By using these values, the calculator computes the BMI and then categorizes the result into one of four health categories: underweight, normal weight, overweight, or obesity. This simple process helps users gain an understanding of their current health status and take necessary steps to improve it if needed.
Follow this video for complete guidance:
Full Source Code : BMI Calculator
<!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 href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
.card {
border: none;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.95);
}
.form-control:focus {
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}
.btn-primary {
background: linear-gradient(45deg, #4481eb, #04befe);
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
background: linear-gradient(45deg, #04befe, #4481eb);
transform: translateY(-1px);
}
.list-group-item {
border-left: 4px solid transparent;
transition: all 0.3s ease;
}
.list-group-item:hover {
transform: translateX(5px);
}
.list-group-item-primary { border-left-color: #0d6efd; }
.list-group-item-success { border-left-color: #198754; }
.list-group-item-warning { border-left-color: #ffc107; }
.list-group-item-danger { border-left-color: #dc3545; }
</style>
</head>
<body>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow-lg rounded-4">
<div class="card-body p-4 p-md-5">
<h1 class="text-center mb-4 fw-bold text-primary">BMI Calculator</h1>
<p class="text-center text-muted mb-4">Calculate your Body Mass Index to check if you're at a healthy weight</p>
<div class="row g-4">
<!-- Calculator Section -->
<div class="col-md-6">
<div class="p-4 bg-light rounded-3">
<div class="form-floating mb-3">
<input type="number" class="form-control rounded-3" id="weight" placeholder="Weight" step="0.1">
<label class="text-muted">Weight (kg)</label>
</div>
<div class="form-floating mb-4">
<input type="number" class="form-control rounded-3" id="height" placeholder="Height" step="0.01">
<label class="text-muted">Height (m)</label>
</div>
<button onclick="calculateBMI()" class="btn btn-primary w-100 py-3 rounded-3 mb-3">
Calculate BMI
</button>
<div id="result" class="alert d-none rounded-3"></div>
</div>
</div>
<!-- Info Section -->
<div class="col-md-6">
<div class="p-4 bg-light rounded-3">
<h5 class="mb-3 text-dark">BMI Categories</h5>
<div class="list-group shadow-sm">
<div class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
<span>Underweight</span>
<span class="badge bg-primary rounded-pill">< 18.5</span>
</div>
<div class="list-group-item list-group-item-success d-flex justify-content-between align-items-center">
<span>Normal weight</span>
<span class="badge bg-success rounded-pill">18.5 - 24.9</span>
</div>
<div class="list-group-item list-group-item-warning d-flex justify-content-between align-items-center">
<span>Overweight</span>
<span class="badge bg-warning text-dark rounded-pill">25 - 29.9</span>
</div>
<div class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">
<span>Obesity</span>
<span class="badge bg-danger rounded-pill">≥ 30</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function calculateBMI() {
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value);
const resultDiv = document.getElementById('result');
resultDiv.classList.remove('d-none', 'alert-primary', 'alert-success', 'alert-warning', 'alert-danger');
if (!weight || !height || height <= 0 || weight <= 0) {
resultDiv.classList.add('alert-danger');
resultDiv.innerHTML = '<strong>Error!</strong> Please enter valid weight and height.';
return;
}
const bmi = (weight / (height * height)).toFixed(1);
let category = '';
let alertClass = '';
if (bmi < 18.5) {
category = 'Underweight';
alertClass = 'alert-primary';
} else if (bmi < 24.9) {
category = 'Normal weight';
alertClass = 'alert-success';
} else if (bmi < 29.9) {
category = 'Overweight';
alertClass = 'alert-warning';
} else {
category = 'Obesity';
alertClass = 'alert-danger';
}
resultDiv.classList.add(alertClass);
resultDiv.innerHTML = `
<strong>Your BMI:</strong> ${bmi}<br>
<strong>Category:</strong> ${category}
`;
}
</script>
</body>
</html>
Features of the BMI Calculator Tool
- User-Friendly Interface: The calculator comes with a clean, modern design powered by Bootstrap, ensuring that users can easily navigate through the inputs and results. The minimalistic form asks for just two pieces of information: weight and height.
- Instant Calculation: Once the user inputs their weight and height, the tool instantly calculates the BMI and provides feedback in real-time. There’s no need to reload the page or wait for external calculations, making it a seamless experience.
- Error Handling: If the user enters invalid data, such as zero or negative values, the tool promptly notifies them with an error message. This ensures that only valid inputs are considered for BMI calculation, maintaining accuracy.
- Clear Results: After the calculation, the BMI value is displayed, along with a corresponding health category. Whether your BMI falls under underweight, normal weight, overweight, or obesity, the results are highlighted in different colors for easy identification.
- Underweight: BMI less than 18.5
- Normal weight: BMI between 18.5 and 24.9
- Overweight: BMI between 25 and 29.9
- Obesity: BMI of 30 or greater
- Responsive Design: The design ensures the BMI calculator is fully responsive, meaning it works seamlessly across devices like smartphones, tablets, and desktops. This allows users to access the tool anytime, anywhere.
Why Use a BMI Calculator?
The Body Mass Index is an important indicator of general health. It helps people understand whether they are at risk for weight-related health issues like cardiovascular disease, diabetes, and other chronic conditions. However, while BMI is useful, it should be considered alongside other factors like muscle mass, bone structure, and lifestyle when assessing overall health.
Implementing a BMI calculator in your website is a great way to provide value to users, helping them track their health with just a few simple steps. The tool can be customized further, integrated into health apps, or even expanded with additional features like calorie calculators or fitness tips.
