How to make bmi calculator in javascript

How to make BMI calculator in javascript.png

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:

	<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"
	<link href="" rel="stylesheet">
	<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 class="card-body">
							<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 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" />
							<button type="button" class="btn btn-info form-control" onclick="calculate()">Calculate
						<div id="results" class="text-center">Your results will appear here</div>
	<script src="main.js"></script>
	<script src=""></script>



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

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


How to generate faker data in laravel using seeder

About author


Muhammad Zubair

My name is Muhammad Zubair. I'm a full-stack developer. I'm a owner of I love to write tutorials of PHP, Laravel, Html & css, Javascript, Java and much more with examples.


Hello World! Mar 24th 2023


Leave a Reply