💪 Basic BMI Calculator HTML/Javascript

Table of Contents

JavaScript program to calculate Body Mass Index (BMI)

The Body Mass Index (BMI) is a quick way to assess your body size simply with your weight and height, regardless of your gender. Quickly calculate your BMI and find out which category you fall into.The Body Mass Index (BMI) is the only index validated by the World Health Organization to assess an individual’s build and therefore health risks. The BMI makes it possible to determine whether one is the situation of thinness, overweight or obesity for example.In this program we will calculate BMI. Body mass index (BMI) is a measure of body fat based on height and weight that applies to adult men and women.Online Preview:

Write a program that calculates and displays a person’s body mass index javaScript


<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> CODE4EXAMPLE </title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
    
        #vki{
            transition: 1s all;
        }
    
    </style>
</head>

	<body>
        <div class="container">
            <h1>JavaScript BODY MASS INDEX (BMI)</h1>
            <form>
                <div class="form-group">
                  <label for="height">Please Enter your Height in Inches :</label>
                  <input type="text" class="form-control" id="height" placeholder="69">
                </div>
                <div class="form-group">
                  <label for="weight">Please Enter your weight in Pounds :</label>
                  <input type="text" class="form-control" id="weight" placeholder="150">
                </div>
              </form>
              <div class="alert alert-primary" role="alert" id="bmi">
                Body Mass Index
            </div>
          </div>  
    
    <script>
        
        const height =document.querySelector("#height")
        const weight =document.querySelector("#weight")
        const vki =document.querySelector("#vki")
        
        height.addEventListener('input',vkiHesapla);
        weight.addEventListener('input',vkiHesapla);
        
        function vkiHesapla()
        {
            h=height.value
            w=weight.value
            index = w/(h*h)* 703;
            index=index.toFixed(2)

            if (index < 18.5) {
                bmi.innerHTML="underweight - BMI : " + index  
                bmi.setAttribute("class","alert alert-secondary")
            } else if (index < 25) {
                bmi.innerHTML="normal - BMI : "+ index  
                bmi.setAttribute("class","alert alert-success")
            } else if (index < 30) {
                bmi.innerHTML="overweight - BMI : " + index  
                bmi.setAttribute("class","alert alert-warning")
            } else {
                bmi.innerHTML="obese - BMI : " + index  
                bmi.setAttribute("class","alert alert-danger")
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title> CODE4EXAMPLE </title>

<style>

#vki{

transition: 1s all;

}

</style>

</head>

<body>

<h1>JavaScript BODY MASS INDEX (BMI)</h1>

<form>

<label for="height">Please Enter your Height in Inches :</label>

</div>

<label for="weight">Please Enter your weight in Pounds :</label>

</div>

</form>

Body Mass Index

</div>

const height =document.querySelector("#height")

const weight =document.querySelector("#weight")

const vki =document.querySelector("#vki")

height.addEventListener('input',vkiHesapla);

weight.addEventListener('input',vkiHesapla);

function vkiHesapla()

{

h=height.value

w=weight.value

index = w/(h*h)* 703;

index=index.toFixed(2)

if (index < 18.5) {

bmi.innerHTML="underweight - BMI : " + index

bmi.setAttribute("class","alert alert-secondary")

} else if (index < 25) {

bmi.innerHTML="normal - BMI : "+ index

bmi.setAttribute("class","alert alert-success")

} else if (index < 30) {

bmi.innerHTML="overweight - BMI : " + index

bmi.setAttribute("class","alert alert-warning")

} else {

bmi.innerHTML="obese - BMI : " + index

bmi.setAttribute("class","alert alert-danger")

}

</script>

</body>

</html>

Output:

BMI calculator HTML code,
Body Mass Index calculator HTML code,
BMI Calculator JavaScript,

You May Also Like:

💪 Basic BMI Calculator HTML/Javascript2 min read

JavaScript program to calculate Body Mass Index (BMI)

Write a program that calculates and displays a person’s body mass index javaScript

2 Comments

Leave a Comment X

JavaScript program to calculate Body Mass Index (BMI)

Write a program that calculates and displays a person’s body mass index javaScript

You may also like

2 Comments

Leave a Comment X