BMI Calculator | Free Online Body Mass Index Tool

BMI Calculator with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #08

Project Overview

This project is a BMI Calculator built using HTML, CSS, and JavaScript. It allows users to calculate their Body Mass Index (BMI) by entering their height and weight. The app shows the BMI value along with the health category (Underweight, Normal, Overweight, Obese). It’s styled with a modern responsive design, making it beginner-friendly for learning form handling, math operations, and DOM manipulation.

Key Features

BMI Calculation – Calculates BMI from weight (kg) and height (cm).
Health Category – Shows BMI category along with the value.
Form Validation – Checks for valid input.
Responsive Design – Works on desktop, tablet, and mobile.

HTML Code

<!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="style.css">
</head>
<body>
  <div class="container">
    <h1>BMI Calculator</h1>
    <form id="bmiForm">
      <label for="weight">Weight (kg)</label>
      <input type="number" id="weight" placeholder="Enter weight in kg" required>

      <label for="height">Height (cm)</label>
      <input type="number" id="height" placeholder="Enter height in cm" required>

      <button type="submit">Calculate BMI</button>
    </form>

    <div id="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

body {
  font-family: Arial, sans-serif;
  background: #002252;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: #fff;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  text-align: center;
  width: 300px;
}

h1 {
  color: #002252;
  margin-bottom: 20px;
}

label {
  display: block;
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  background: #eea731;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

button:hover {
  transform: scale(1.05);
}

#result {
  margin-top: 20px;
  font-weight: bold;
  font-size: 18px;
  color: #002252;
}

Javascript Code

const form = document.getElementById('bmiForm');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
  e.preventDefault();

  const weight = parseFloat(document.getElementById('weight').value);
  const height = parseFloat(document.getElementById('height').value) / 100; // cm to m

  if(weight > 0 && height > 0){
    const bmi = (weight / (height * height)).toFixed(2);
    let category = '';

    if(bmi < 18.5){
      category = 'Underweight';
    } else if(bmi < 24.9){
      category = 'Normal weight';
    } else if(bmi < 29.9){
      category = 'Overweight';
    } else{
      category = 'Obese';
    }

    result.textContent = `Your BMI is ${bmi} (${category})`;
  } else {
    result.textContent = 'Please enter valid numbers';
  }
});