How To Calculate BMI Calculator With JavaScript?

BMI (Body Mass Index) means the ratio of a person’s weight (kg) and the square of that person’s height (m). BMI calculates the value of a person’s health in some different ranges.

Formula:

BMI = (weight) / (height * height)

The ideal value of BMI is 18.5 to 24.9. Anyone having a BMI within this range is healthy enough to lead a better life.

The Chart Is given below.

A BMI calculator is a tool that helps to find out BMI easily. By using a BMI calculator, one does not need to calculate manually. He can just put his weight in kilograms and height in meters and click the button “Calculate”/or something of the same task. The calculator will give him his BMI result and as well as comment on his health condition.

If you want to design the BMI calculator using HTML, CSS & JS please try to follow the below source code.

<div>
    <form name="techBMI">
        <h3>BMI Calculator</h3>
        <br/>
        <input type="text" name="weight" placeholder="Enter Weight (kg)" size="20"><br /><br/>
        <input type="text" name="height" placeholder="Enter Height (Meters)" size="20"><br /><br/>
        <input class="decoration-one px-3 py-2" type="button" value="Calculate BMI" onClick="calculateBmi()"><br /><br/>
        <input type="text" name="bmi" placeholder="Your BMI Will be here" size="20"><br /><br/>
        <input type="text" name="meaning" size="35"><br /><br/>
        <input class="decoration-one px-3 py-2" type="reset" value="Reset" />
        <br/>
    </form>
</div>

CSS:

* {
        box-sizing: border-box;
    }
    .decoration-one {
        background-color:rgb(249, 154, 154);
        margin: 0;
        border:0;
        border-radius: 12px;
        padding: 9px;
        font-weight: bold;
    }
    .decoration-one:hover {
        background-color:yellow;

    }
    a {
        text-decoration: none;
        color:black;
    }

JS:

function calculateBmi() {
    var weight = document.techBMI.weight.value
    var height = document.techBMI.height.value

    if( weight > 0 && height > 0 ) {	
        var finalBmi = weight/(height*height)
        document.techBMI.bmi.value = finalBmi.toFixed(3);

        if( finalBmi < 18.5 ) {
            document.techBMI.meaning.value = "You are unhealthy, too thin."
        }
        if( finalBmi > 18.5 && finalBmi < 25 ) {
            document.techBMI.meaning.value = "You are healthy enough."
        }
        if( finalBmi > 25 &&  finalBmi <30 ) {
            document.techBMI.meaning.value = "You have overweight."
        }
        if( finalBmi > 30 ) {
            document.techBMI.meaning.value = "Your condition is serious."
        }
    }
    else {
        alert("Data you've entered might be incorrect. Please check and try again.")
    }
}

That’s it.

Thanks & enjoy happy coding.