BMI Calculator | Free Online Body Mass Index Tool

BMI Calculator with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #08

Project Overview

The BMI Calculator is a simple beginner-friendly project built using HTML, CSS, and JavaScript. This application allows a user to input their height and weight and calculates their Body Mass Index (BMI). The calculated BMI value and category are displayed on the page.

This project is designed to help beginners practice important JavaScript concepts while creating a useful interactive application. Using this code example, one can see how to get values from HTML input, make calculations, change the content of HTML elements, and use conditional statements to show different messages. This project is also helpful to learn how HTML, CSS, and JavaScript are integrated in web applications.

Key Features

Height and Weight Input: The application allows user to input their height and weight into the provided input fields. These values are then used by JavaScript to calculate the BMI.
BMI Calculation: The application calculates the Body Mass Index using the user’s height and weight. The calculated value is then displayed directly on the screen after the user submits the values.
BMI Category: After calculating the BMI, the application identifies the corresponding BMI category. This helps users understand the general range in which their calculated value falls.
Input Validation: The BMI calculator validates the data inputted to ensure a correct calculation is produced. This helps prevent invalid or empty inputs from producing an incorrect result.
Instant Result Display: The calculated BMI and its category appear on the page after the calculation. Users can therefore see the result without manually performing the calculation themselves.
Simple User Interface: The project uses a clean and straightforward interface with input fields, a calculation button, and a result area. This keeps the main purpose of the application easy to understand.
JavaScript-Based Functionality: JavaScript handles the input values, BMI calculation, category checking, and result display. This demonstrates how JavaScript can turn a basic HTML form into an interactive application.
Responsive Design: The BMI Calculator can adapt to different screen sizes, allowing users to use it comfortably on desktops, tablets, and mobile devices.
Easy Customization: The simple structure of this project makes it easy to customize the colors, fonts, spacing, buttons, and overall appearance according to personal preferences.

What You’ll Learn

Understand how to collect values from HTML input fields using JavaScript.
Learn how to convert input values into numbers for calculations.
Practice performing mathematical calculations with JavaScript.
Understand how to use conditional statements to determine BMI categories.
Learn how to validate user input before performing a calculation.
Practice updating HTML elements dynamically using JavaScript.
Understand how form buttons and click events work.
Learn how HTML, CSS, and JavaScript work together to create an interactive calculator.
Practice creating a clean and responsive interface using CSS.

HTML Code

The HTML code creates the structure of the BMI Calculator. First the style.css file is linked inside the <head> section so CSS can control the appearance of the BMI Calculator. The main content is placed inside the calculator container, which holds the heading the input fields, the button and the result area.

The height and weight input fields allow users to enter the required values, for the calculation. The Calculate button provides an action for JavaScript to process the entered information. A separate result section provides space for displaying the BMI and its category. Finally the script.js file is linked at the bottom of the <body> so JavaScript can handle the calculation and update the result.

<!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

The CSS code controls the appearance and layout of the BMI Calculator. The main container is styled to create a clean calculator box with suitable spacing, rounded corners, and a clear visual structure. Flexbox can also be used to center the calculator on the page and keep the layout organized.

The input fields and button are styled to make them easy to use. The result section also receives its own styling so that the calculated BMI and category are clearly visible. Responsive CSS helps the calculator maintain a usable layout on smaller screens.

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

The JavaScript code provides the main functionality of the BMI Calculator. It first selects the input fields, button, and result elements from the HTML. When the user enters their height and weight and clicks the Calculate button, JavaScript reads the values and converts them into numbers.

Next, the code uses the BMI formula to calculate the result from the entered height and weight. Conditional statements then check the calculated value and determine the appropriate BMI category. Finally, JavaScript updates the result section so the user can see the calculated BMI and category directly on the webpage.

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';
  }
});