Get the complete source code of JavaScript BMI Calculator mini project programmed using HTML, CSS and JavaScript. To use the BMI calculator, input your height (in centimeters) and weight (in kilograms).
You can directly download the project here:
Or simple view the source code below:
Page Contents
index.html
<!--
BMI Calculator
This code was uploaded at tetrageek.com
For more amazing programming projects you can visit tetrageek.com/programming
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>BMI Calculator</title>
</head>
<body>
<div id="container">
<img src="BMI-icon.png" alt="BMI Icon" id="icon">
<h1>BMI Calculator</h1>
<form>
<p><label>Height in CM: </label><input type="text" id="height"></p>
<p><label>Weight in KG: </label><input type="text" id="weight"></p>
<button>Calculate</button>
<div id="results"></div>
<div id="message"></div>
<div id="weight-guide">
<h3>BMI Weight Guide</h3>
<p>Under Weight = Less than 18.6</p>
<p>Normal Range = 18.6 and 24.9</p>
<p>Overweight = Greater than 24.9</p>
</div>
</form>
</div>
<p id="credits">For more codes visit <a href="https://www.tetrageek.com/programming"
target="_blank">tetrageek.com/programming</a></p>
</body>
<script src="script.js"></script>
</html>
style.css
body {
margin: 200px;
margin-top: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
align-items: center;
}
#container {
background-color: white;
align-items: center;
width: 50%;
margin: 0 auto;
box-shadow: 0px 0px 10px 2px rgb(135, 132, 132);
border-radius: 5px;
}
#icon {
width: 80px;
margin-top: 30px;
}
#height {
width: 150px;
height: 25px;
margin-top: 10px;
}
#weight {
width: 150px;
height: 25px;
}
#weight-guide {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: blue;
color: white;
margin-top: 10px;
padding-top: 15px;
padding-bottom: 20px;
}
#results {
font-size: large;
margin-top: 20px;
font-weight: bold;
}
#message {
font-size: large;
color: red;
}
button {
width: 150px;
height: 35px;
margin-top: 10px;
border-radius: 2px;
border-style: none;
background-color: blue;
color: #fff;
font-size: 20px;
}
button:active {
border: 2px solid blue;
background-color: white;
color: blue;
}
#credits {
margin-top: 50px;
font-size: small;
}
script.js
const form = document.querySelector('form');
let message = document.getElementById("message");
form.addEventListener('submit', function (e) {
e.preventDefault();
const height = parseInt(document.querySelector('#height').value);
const weight = parseInt(document.querySelector('#weight').value);
const results = document.querySelector('#results');
if ((height === '') || (height < 0) || (isNaN(height))) {
results.innerHTML = "Please provide a valid height";
} else if (weight === '' || weight < 0 || isNaN(weight)) {
results.innerHTML = "Please provide a valid weight";
} else {
//calculate BMI
const bmi = (weight / ((height * height) / 10000)).toFixed(2);
if (bmi < 18.6) {
message.textContent = "You are underweight";
}
else if (bmi >= 18.6 && bmi < 24.6) {
message.textContent = "You have a normal BMI";
}
else {
message.textContent = "You are overweight";
}
//display the results
results.innerHTML = "Your BMI = " + `<span>${bmi}</span>`;
}
});
Have any recommendations or questions related to the code? Comment below and tell us your thoughts. We would be delighted to hear them.