How to create a Body Mass Index calculator using JavaScript

Body Mass Index (BMI) is a measurement of body fat. Calculating a person’s BMI involves dividing their weight in kilograms by the square of their height in meters. The BMI formula is as follows:

This HTML document sets up a basic BMI calculator web page. It includes essential meta tags for character encoding and responsive design, a title, and a linked external CSS file for styling.

The text body includes a container div with a heading, input fields for height and weight, and a button to trigger the BMI calculation. A designated result div displays the calculated BMI.
We define a button that will use onclick attributes to call the calculateBMI() function from an external JavaScript file (script.js) in the next section. This setup ensures a user-friendly interface for calculating BMI, with the styles and functionality managed through linked CSS and JavaScript files.

CSS structure

Next, let’s add some basic CSS styling to make our BMI calculator look better:

CSS styles aim to create a clean, centered, and visually appealing BMI calculator interface.

The body is styled with the Arial, sans-serif font and a light gray background color (#f0f0f0). The margins and padding are set to zero to remove any default spacing, and the display: flex property, along with justify-content: center and align-items: center, which centers the content both horizontally and vertically within the viewport that is set to 100% of the viewport height (height: 100vh).
The .container class styles a central content box with a white background (#fff), 20 pixels of padding, rounded corners (border-radius: 5px), and a subtle shadow effect (box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)), enhancing its visual separation from the background.
The input fields and buttons share a consistent look with padding of 10 pixels, the margin of 5 pixels, black border (border: 2px solid rgb(7, 7, 7)), and rounded corners. The width of these elements is set to 70% to ensure a balanced appearance.
The button is styled with a blue background color (#6895c5), white text, and a cursor change on hover to indicate interactivity. Additionally, a hover effect is provided to change the button’s background to a darker blue (#0056b3), enhancing the user's interactive experience.

JavaScript logic

Finally, let’s add the JavaScript code to calculate the BMI based on the user’s input.

function calculateBMI() {
    var height = document.getElementById("height").value;
    var weight = document.getElementById("weight").value;
    if (height === "" && weight === "") {
        alert("Please enter both height and weight.");
        return;
    }
    else if (height === "") {
        alert("Please enter both height.");
        return;
    }else if(weight === "")
    {
        alert("Please enter weight.");
        return;
    }
    var bmi = (weight / ((height) ** 2)).toFixed(1);
    var resultDiv = document.getElementById("result");
    resultDiv.innerHTML = "Your BMI is: " + bmi;
    if (bmi < 18.5) {
        resultDiv.innerHTML += " (Underweight)";
    } else if (bmi >= 18.5 && bmi < 25) {
        resultDiv.innerHTML += " (Normal weight)";
    } else if (bmi >= 25 && bmi < 30) {
        resultDiv.innerHTML += " (Overweight)";
    } else {
        resultDiv.innerHTML += " (Obese)";
    }
}

Line 1: This line defines a new function named calculateBMI.
Lines 2–3: These lines retrieve the values entered by the user for height and weight from the input fields with IDs height and weight, respectively.
Lines 5–16: These conditional statements check if the user has entered both height and weight. If either or both are missing, an alert is shown, and the function exits early using return.
- The first if checks if both height and weight are empty.
- The second else if checks if only height is empty.
- The third else if checks if only weight is empty.
Line 18: This line calculates the BMI using the formula BMI = weight / (height in meters squared). Since height is entered in centimeters, it’s divided by 100 to convert it to meters. The result is then squared and used to divide the weight. The .toFixed(1) method rounds the BMI to one decimal place.
Line 20: These lines get the result div and set its inner HTML to display the calculated BMI.
Lines 23–31: These conditional statements categorize the BMI and append the corresponding category to the result displayed in the resultDiv:
- If bmi is less than 18.5, the user is classified as Underweight.
- If bmi is between 18.5 and 24.9, the user is classified as Normal weight.
- If bmi is between 25 and 29.9, the user is classified as Overweight.
- If bmi is 30 or higher, the user is classified as Obese.

Complete code

Here is the complete working application.

Conclusion

We’ve developed a simple yet effective BMI calculator using HTML, CSS, and JavaScript. This application allows users to input their height and weight, and with a click of a button, it calculates their BMI automatically. BMI, a measure of body fat based on height and weight, serves as a useful screening tool for assessing weight status. While our BMI calculator doesn’t directly measure body fat percentage, it categorizes users into four general BMI categories: underweight, normal weight, overweight, and obese, providing valuable insights into their overall health status. By following the steps outlined in this Answer, we’ve created a functional tool that enhances health awareness and promotes better well-being.

How to create a Body Mass Index calculator using JavaScript

Expected output

General BMI categories

HTML structure

CSS structure

JavaScript logic

Complete code

Conclusion