How to make bmi calculator in javascript
-
Muhammad Zubair
- 3 Mins To Read
- 2 September, 2022
- 595
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>
<head>
<title>BMI Calculator - TheSkillStock</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 mt-3 pt-3 m-3">
<div class="card m-3">
<div class="card-header text-center bg-info">
Check Your BMI
</div>
<div class="card-body">
<form>
<div class="form-group mb-3">
<p>Enter Your weight in KG</p>
<input id="weight" type="number" class="form-control" pattern="[0-9]*" name="a" />
</div>
<div class="form-group mb-3">
<p>Enter Your Height in CM</p>
<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:
Login and Registration system in php
How to show models data into blade file in laravel
How to Install Bootstrap 5 in Laravel 9 With Vite
Laravel 9 Custom Login and Registration System