Create BMI Calculator with HTML
CSS and JavaScript
Body Mass Index(BMI) is a simple calculation using a person's height and weight. The formula is BMI = kg/m 2 where kg is a person's weight in kilograms and m 2 is their height in metres squared. A BMI of 25.0 or more is overweight, while the healthy range is 18.5 to 24.9.
What is a good BMI for my age?
Under 18.5 - you are very underweight and possibly malnourished. 18.5 to 24.9 - you have a healthy weight range for young and middle-aged adults. 25.0 to 29.9 - you are overweight. Over 30 - you are obese.
What is the formula for BMI?
Body mass index (BMI) is a person's weight in kilograms divided by the square of height in meters. BMI is an inexpensive and easy screening method for weight category—underweight, healthy weight, overweight, and obesity.
Video Tutorial of BMI Calculator
BMI Calculator [Source Codes]
To Create BMI Calculator with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>BMI Calculator</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <h1 class="heading">BMI Calculator</h1>
- <span>Your Height (cm):</span>
- <input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
- <span>Your Weight (kg):</span>
- <input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
- <button class="btn" id="btn">Compute BMI</button>
- <input disabled type="text" class="input" id="bmi-result">
- <h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- body{
- margin: 0;
- background:#282A35;
- display: flex;
- min-height: 100vh;
- justify-content: center;
- align-items: center;
- font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
- }
-
- .container{
- background:#f2f2f2;
- padding: 20px;
- width: 500px;
- display: flex;
- flex-direction: column;
- border-radius: 5px;
- box-shadow: 0 10px 10px rgba(0,0,0,.3);
- margin: 20px;
- }
-
- .heading{
- font-size: 35px;
- margin-left: 20px;
- }
- span{
- font-size: 20px;
- margin-left: 20px;
- }
- .input{
- padding: 15px 20px;
- font-size: 20px;
- background: #FFFFFF;
- border-color: rgba(255,255,255, .7);
- border-radius: 8px;
- margin: 15px;
- }
-
- .btn{
- background-color: #1EA5EF;
- border: none;
- padding: 15px 25px;
- border-radius: 8px;
- margin: 10px;
- font-size: 22px;
- font-weight: 600;
- }
-
- .btn:hover{
- background-color:#785BF8;
- }
-
- .info-text{
- font-size: 25px;
- font-weight: 600;
- margin-left: 20px;
- }
Now paste the following codes into your script.js file
- const btnEl = document.getElementById("btn");
- const bmiInputEl = document.getElementById("bmi-result");
- const weightConditionEl = document.getElementById("weight-condition");
-
- function calculateBMI() {
- const heightValue = document.getElementById("height").value / 100;
- const weightValue = document.getElementById("weight").value;
-
- const bmiValue = weightValue / (heightValue * heightValue);
-
- bmiInputEl.value = bmiValue;
-
- if (bmiValue < 18.5) {
- weightConditionEl.innerText = "Under weight";
- } else if (bmiValue >= 18.5 && bmiValue <= 24.9) {
- weightConditionEl.innerText = "Normal weight";
- } else if (bmiValue >= 25 && bmiValue <= 29.9) {
- weightConditionEl.innerText = "Overweight";
- } else if (bmiValue >= 30) {
- weightConditionEl.innerText = "Obesity";
- }
- }
-
- btnEl.addEventListener("click", calculateBMI);
If you face any difficulties while creating BMI Calculator or your code is not working as expected, you can download the source code files by clicking download button.