BMI Calculator Card using Tailwind CSS & JavaScript

Last Updated : 07 Mar, 2024

The Body Mass Index (BMI) Calculator can be used to calculate BMI values based on height and weight. BMI is a fairly reliable indicator of body fatness for most people. In this article, we will implement a BMI (Body Mass Index) Calculator using JavaScript with Tailwind CSS framework.

Formula to calcuate BMI:

BMI = (weight) / (height * height) 
height in cms and weight in kgs
OR
height in inches and weight in pounds

Approach to create BMI Calculator:

BMI is a number calculated from an individual’s weight and height. To find out BMI we will take input from the user (both height and weight) which will be stored in height and weight variables for further calculation.

Create a file named – “index.html” and set up the HTML structure.
Add Tailwind CSS for styling.
Design a form to take user’s height and weight as input.
Create a file named – “script.js” and implement JavaScript for the BMI calculation and category determination.

Example: In this example, we will structure in the index.html file and implement the logic in the script.js file.

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/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container">
        <div class="max-w-md mx-auto p-6 
                    bg-white rounded-lg 
                    shadow-md border 
                    border-green-500">
            <h1 class="text-2xl font-semibold 
                       mb-4 text-center">
                BMI Calculator
            </h1>
            <div class="mb-4">
                <label for="height" class="block mb-2">Height:</label>
                <div class="flex">
                    <input type="number"
                           id="height"
                           class="form-input flex-1 mr-2"
                           placeholder="Enter height">
                    <select id="heightUnit" class="form-select w-24">
                        <option value="cm">cm</option>
                        <option value="ft">ft</option>
                    </select>
                </div>
            </div>
            <div class="mb-4">
                <label for="weight" class="block mb-2">Weight:</label>
                <div class="flex">
                    <input type="number"
                           id="weight"
                           class="form-input flex-1 mr-2"
                           placeholder="Enter weight">
                    <select id="weightUnit" class="form-select w-24">
                        <option value="kg">kg</option>
                        <option value="lb">lb</option>
                    </select>
                </div>
            </div>
            <button id="calculate"
                    class="bg-blue-500 text-white 
                           font-semibold py-2 px-4 
                           rounded w-full mb-4">
                Calculate BMI
            </button>
            <div id="result" class="text-center"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Javascript

document.getElementById('calculate').addEventListener('click', function() {
    var height = parseFloat(document.getElementById('height').value);
    var weight = parseFloat(document.getElementById('weight').value);
    var heightUnit = document.getElementById('heightUnit').value;
    var weightUnit = document.getElementById('weightUnit').value;
    if (!isNaN(height) && !isNaN(weight) && height > 0 && weight > 0) {
        if (heightUnit === 'ft') {
            height *= 30.48;
        }
        if (weightUnit === 'lb') {
            weight *= 0.453592;
        }
        var bmi = calculateBMI(height, weight);
        var category = getBMICategory(bmi);
        document.getElementById('result').innerHTML = 
            `Your BMI is <span class="font-semibold">${bmi.toFixed(2)}</span>. You are ${category}.`;
    } else {
        document.getElementById('result').innerHTML = 
            '<span class="text-red-500">Please enter valid height and weight.</span>';
    }
});
function calculateBMI(height, weight) {
    return weight / Math.pow(height / 100, 2);
}
function getBMICategory(bmi) {
    if (bmi < 18.5) {
        return 'Underweight';
    } else if (bmi >= 18.5 && bmi < 24.9) {
        return 'Normal weight';
    } else if (bmi >= 24.9 && bmi < 29.9) {
        return 'Overweight';
    } else {
        return 'Obese';
    }
}