How to Create a BMI (Body Mass Index) Calculator with JavaScript and Tailwind CSS

Nowadays, Body Mass Index (BMI) is a valuable tool for assessing a person's health status in relation to their weight and height. In this article, you will learn how to create a BMI calculator using JavaScript and Tailwind CSS. This project will not only help you better understand these two languages but will also allow you to build an attractive and responsive user interface.

What is Body Mass Index (BMI)?

Body Mass Index is a measure used to evaluate the amount of body tissue in a person. It is calculated using the following formula:

[ \text{BMI} = \frac{\text{Weight (kg)}}{(\text{Height (m)})^2} ]

BMI results are classified into different categories, including:

Underweight: BMI less than 18.5
Normal weight: BMI from 18.5 to 24.9
Overweight: BMI from 25 to 29.9
Obesity: BMI of 30 or more

Why Use JavaScript and Tailwind CSS?

JavaScript

JavaScript is a widely used programming language for creating interactivity on web pages. In this project, we will use JavaScript to perform the BMI calculations and display the results in the user interface.

Tailwind CSS

Tailwind CSS is a CSS framework that allows for the quick and easy creation of elegant and responsive user interfaces. We will use Tailwind CSS to style our BMI calculator, making it visually appealing and easy to use.

Prerequisites

Before starting, make sure you have the following items installed:

A text editor (like Visual Studio Code or Sublime Text).
A web browser (like Google Chrome or Firefox).
Basic knowledge of HTML, CSS, and JavaScript.

Project Structure

Start by creating the structure of your project. You can create a folder named bmi-calculator and within it, create the following files:

index.html
style.css
script.js

Step 1: Basic HTML

Let's start by creating the HTML structure in index.html:

<!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://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto mt-10">
        <h1 class="text-3xl text-center font-bold">BMI Calculator</h1>
        <div class="bg-white shadow-md rounded-lg p-6 mt-6">
            <form id="bmi-form" class="space-y-4">
                <div>
                    <label for="weight" class="block text-sm font-medium text-gray-700">Weight (kg)</label>
                    <input type="number" id="weight" class="mt-1 block w-full border-gray-300 rounded-md" required>
                </div>
                <div>
                    <label for="height" class="block text-sm font-medium text-gray-700">Height (m)</label>
                    <input type="number" id="height" class="mt-1 block w-full border-gray-300 rounded-md" required>
                </div>
                <button type="submit" class="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Calculate BMI</button>
            </form>
            <div id="result" class="mt-4 text-lg font-semibold"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation of the HTML Code

We use Tailwind CSS to style the interface.
We create a form that asks for the user's weight and height.
A button is included to calculate the BMI and an area to display the result.

Step 2: Adding Styles with Tailwind CSS

Most of the styling is achieved through the utility classes of Tailwind CSS that we've added in the previous HTML. If you want to add more custom styles, you can include them in style.css.

/* style.css */
body {
    font-family: Arial, sans-serif;
}

input {
    padding: 0.5rem;
    border: 1px solid #ccc;
}

Step 3: Creating the JavaScript Logic

Now, let's add the logic to calculate the BMI in script.js:

// script.js
document.getElementById('bmi-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);

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

        if (bmi < 18.5) {
            category = 'Underweight';
        } else if (bmi >= 18.5 && bmi < 24.9) {
            category = 'Normal weight';
        } else if (bmi >= 25 && bmi < 29.9) {
            category = 'Overweight';
        } else {
            category = 'Obesity';
        }

        document.getElementById('result').innerText = `Your BMI is: ${bmi.toFixed(2)} (${category})`;
    } else {
        document.getElementById('result').innerText = 'Please enter valid values.';
    }
});

Explanation of the JavaScript Code

We listen for the submit event of the form.
We obtain the weight and height entered by the user.
We calculate the BMI and determine the corresponding category.
We display the result in the interface.

Step 4: Testing the Calculator

Open index.html in your browser and test the calculator by entering different weight and height values. Make sure that the results are calculated correctly and displayed in the appropriate format.

Conclusion

You have successfully created a BMI calculator using JavaScript and Tailwind CSS. This project is not only functional but also presents a great opportunity to improve your web programming and design skills.

If you enjoyed this article, feel free to share it and leave your comments!