 # JavaScript BMI Calculator - Beginner Project

In this article, we are going to create a BMI calculator in Javascript. It is a beginner-friendly javascript project that will help you to understand the basics of javascript.

The BMI stands for Body Mass Index. It is a measure of body weight in relation to height. It is used to determine whether a person is underweight, normal, overweight, or obese.

The BMI is calculated by dividing the weight in kilograms by the square of the height in meters. The formula is `weight / (height * height)`.

It is quite reliable and can be used to determine fitness levels.

The BMI calculator that we are going to create is shown below. There is also a button that takes you to the preview of the calculator. Test the app

## BMI Calculator In JavaScript

We are going to use HTML, CSS, and Javascript to create the BMI calculator. The calculator will have 2 input fields for weight and height.

The user will be able to enter the values in the input fields and click on the button to calculate the BMI. The result will be displayed in the result field.

We will first create the structure of the calculator and style it with CSS and then we will add the functionality to the calculator using Javascript.

### Structure Of The Calculator (HTML + CSS)

I. Create Main Container For Calculator

The main container will be a `div` element with the class `container` that holds 2 other elements, one is the BMI calculator and the other is BMI status (range of BMI).

``````<div class="container">
<div class="bmi-calculator"></div>
<div class="bmi-status"></div>
</div>``````

The `bmi-calculator` will have all the inputs, calculate button, and the result field. The `bmi-status` will have a list of all the BMI ranges and categories of the user.

II. Create BMI Calculator Structure

Within the `bmi-calculator` element, we will have the following elements:

• `h1` element for the heading of the calculator.
• 2 input elements for the weight and height.
• Calculate the button that will calculate the BMI.
• Result field that will display the result of the BMI calculation.
``````<div class="bmi-calculator">
<h1>BMI Calculator</h1>
<div class="input">
<label for="height">Height (cm)</label>
<input type="text" id="height" placeholder="Height in cm">
</div>
<div class="input">
<label for="weight">Weight (kg)</label>
<input type="text" id="weight" placeholder="Weight in kg">
</div>
<button type="submit" class="calculate">Check BMI</button>
<div class="result"></div>
</div>``````

Now style the BMI calculator with CSS. The CSS style totally depends on your imagination and requirements.

The CSS code for the style we have used is given below.

``````.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e0e0e0;
}

.bmi-calculator {
background-color: #e0e0e0;
width: 300px;
-5px -5px 10px #ffffff;
}

h1 {
margin: 0 0 10px 0;
text-align: center;
}

.input {
margin: 10px 0;
}

.input input {
border: 1px solid #ccc;
height: 20px;
}

.input input:focus {
outline: none;
}

.calculate {
display: block;
margin: 0 auto;
border: none;
background-color: #e4c495;
width: 100%;
font-size: 16px;
font-weight: bold;
-5px -5px 10px #ffffff;
}``````

Here is what our app looks like for now. III. Add BMI Status to show the BMI category

We will create a `bmi-status` element that will hold the BMI status. We will have 4 `div` elements for the ranges of BMI with the classes `Underweight`, `Normal`, `Overweight`, and `Obese`.

``````<div class="bmi-status">
<div class="Underweight">Underweight: 0 - 18.5</div>
<div class="Normal">Normal: 18.5 - 25</div>
<div class="Overweight">Overweight: 25 - 30</div>
<div class="Obese">Obese: 30 - 35</div>
</div>``````

The `bmi-status` element will be shown in the top right corner of the application. So we will use the `position: absolute` property to position the element.

``````.bmi-status {
position: absolute;
top: 0;
right: 0;
}

.bmi-status div {
margin: 0;
font-size: 15px;
font-weight: normal;
}

.Underweight {
background-color: #ffc0cb;
}

.Normal {
background-color: #90ee90;
}

.Overweight {
background-color: #ffa07a;
}

.Obese {
background-color: #ff0000;
}

.Underweight,
.Normal,
.Overweight,
.Obese {
font-weight: bold;
margin-top: 20px;
}``````

Here is what our app looks like. ### JavaScript Code for BMI Calculator

Here comes the most interesting part of the application. We will create the logic of the BMI calculator in JavaScript.

First, select the calculate button and add an event listener to it. When the user clicks on the button, we will calculate the BMI and display the result.

``````// select the calculate button
var calculate = document.querySelector('.calculate');

// attach event listener to the button

Write the function that will calculate the BMI.

In this function, first we will store the current values of height and weight from the input fields in variables. Then we will convert it to a number using + operator.

Now check if the height and weight are valid numbers and is not zero. If not, show an alert message and return.

Now convert the height to meter and find the BMI using the formula `BMI = weight / (height * height)`.

Now execute the function `showResult` to show the result.

``````// write the function that will calculate the BMI
function findBMI() {
var height = +document.querySelector('#height').value;
var weight = +document.querySelector('#weight').value;
// check height & weight are a valid number
if (height <= 0 || weight <= 0 || isNaN(height) || isNaN(weight)) {
return;
}
// convert height to meters
height = height / 100;
var bmi = weight / (height * height);
showResult(bmi);
}``````

Write the function that will show the result.

In this function, we will calculate the BMI category and store it in a variable called `bmiStatus`.

Now select the result element and set the innerHTML to the result. The innerHTML will be a div element whose class will be bmiStatus and text will be `Your BMI is bmi and you are bmiStatus.`

``````// write the function that will show the result

function showResult(bmi) {
var result = document.querySelector('.result');
var bmiStatus;
if (bmi < 18.5) {
bmiStatus = 'Underweight';
} else if (bmi < 25) {
bmiStatus = 'Normal';
} else if (bmi < 30) {
bmiStatus = 'Overweight';
} else {
bmiStatus = 'Obese';
}
result.innerHTML = `<div class=\${bmiStatus}>Your BMI is \${bmi.toFixed(2)} and you are \${bmiStatus}.</div>`;
}``````

## Complete Code For BMI Calculator

Here is the complete code for the BMI calculator.

## Conclusion

We have created a JavaScript BMI calculator application. We have used HTML, CSS and, JavaScript to create the application.

It takes your height and weight as input and displays your BMI and tells you which category you fall in based on your BMI.

You can also work further and create an age calculator in javascript.