javascript

### How to make bmi calculator in javascript How to make BMI calculator in javascript; This tutorial take two input from user one is height of user and other one is weight of user to calculate BMI. Its important to calculate weight in Killograms and height in Meters.

If BMI is less then 18.5 then we will say that the person is underweight range.

If BMI under in 18.5 and 24.9 we will say that the person is healthy weight range or normal

If BMI under in 25.0 and 29.9 we will say that the person is overweight range.

If the BMI is 30.0 or High we will say that the person is obese range.

In this tutorial we will learn how to make Body Mass Index in javascript step by step and learn the formula of BMI calculation.

How to make Bmi calculator in javascript

There are some step which use to make BMI calculator

Step 01: Index.html file creating

Step 02: main.js File creating

Step 03: Project Testing

Step 01: Index.html file creating

Firs step is to create a index.html file and open it into your favourite code editor and update with given code:

``````<html>
<title>BMI Calculator - TheSkillStock</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<body>
<div class="container">
<div class="row">
<div class="col-md-12 mt-3 pt-3 m-3">
<div class="card m-3">
</div>
<div class="card-body">
<form>
<div class="form-group mb-3">
<input id="weight" type="number" class="form-control" pattern="[0-9]*" name="a" />
</div>
<div class="form-group mb-3">
<input id="height" class="form-control" type="number" pattern="[0-9]*" name="b" />
</div>
<button type="button" class="btn btn-info form-control" onclick="calculate()">Calculate
BMI</button>
</form>
<div id="results" class="text-center">Your results will appear here</div>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>``````

Step 02: main.js File creating

Now this step is main part of this tutorial. Create main.js file and update with given code:

``````var weight, height, measure, bmi, error ;
function calculate() {
weight = document.getElementById("weight").value;
height = document.getElementById("height").value;
error = "Please Entter weight and Hight";
height /= 100;
height *= height;
bmi = weight/height;
bmi = bmi.toFixed(1);
if (bmi <= 18.4) {
measure = "Your BMI is " + bmi + " which means " + "you are Underweight";
} else if (bmi >= 18.5 && bmi <= 24.9) {
measure = "Your BMI is " + bmi + " which means " + "You are Normal";
} else if (bmi >= 25 && bmi <= 29.9) {
measure = "Your BMI is " + bmi + " which means " + "You are Overweight";
} else if (bmi >= 30) {
measure = "Your BMI is " + bmi + " which means " + "You are Obese";
}
if (weight === 0 ) {
document.getElementById("results").innerHTML = error;
} else if (height === 0){
document.getElementById("results").innerHTML = error;
}
else {
document.getElementById("results").innerHTML = measure;
}
if (weight < 0) {
document.getElementById("results").innerHTML = "Negative Values not Allowed";
}
}``````

Step 03: Project Testing

So open your index.html file and test it.

Thank you for reading this tutorial

You may also like this:

CRUD System app in Laravel 9

### How to generate faker data in laravel using seeder 