Create BMI Calculator Using Html Css Javascript Code
Welcome To The Codewithrandom Blog. In This Article, We Learn How To Create A Bmi Calculator Project. We Use Html, Css, And Javascript For This Bmi Calculator Source Code.
Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For A Bmi Calculator Source Code.
HTML Code For Bmi Calculator
<head>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
</head>
<body>
<h3><b>B</b>ody <b>M</b>ass <b>I</b>ndex Calculator</h3>
<form class="form" id="form" onsubmit="return validateForm()">
<div class="row-one">
<input type="text" class="text-input" id="age" autocomplete="off" required/><p class="text">Age</p>
<label class="container">
<input type="radio" name="radio" id="f"><p class="text">Female</p>
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="radio" id="m"><p class="text">Male</p>
<span class="checkmark"></span>
</label>
</div>
<div class="row-two">
<input type="text" class="text-input" id="height" autocomplete="off" required><p class="text">Height (cm)</p>
<input type="text" class="text-input" id="weight" autocomplete="off" required><p class="text">Weight (kg)</p>
</div>
<button type="button" id="submit">Submit</button>
</form>
</body>
Here Is All The Html Code For The Bmi Calculator Project. Now, You Can See Output Without Css And Javascript Code. Then We Write Css & Javascript For The Bmi Calculator Source Code.
Html Code Output Bmi Calculator
Css Code For Bmi Calculator
* {
font-family: Quicksand;
font-size: 16px;
color: #333;
}
body {
margin: 0;
height: 100vh;
padding: 0;
border: 0;
background: linear-gradient(to bottom right, #F1F2B5, #eef2f3);
}
.form {
background-color: #fff;
height: 240px;
width: 450px;
border-radius: 20px;
margin: 20px auto 20px auto;
display: block;
border: solid 1px #289df6;
box-shadow: 0 0 40px 0 #ddd;
}
.form:hover {
box-shadow: 0 0 60px 0 #ccc;
transition: 0.4s;
transform: scale(1.02);
}
.row-one {
padding: 20px;
}
.row-two {
padding: 20px;
}
.text-input {
width: 60px;
height: 30px;
border-radius: 10px;
background-color: #dbeffe;
border: none;
outline: none;
padding: 5px 10px;
cursor: pointer;
}
.text-input:last-child {
margin-bottom: 35px;
}
.text-input:hover {
background-color: #cbe7fd;
}
#submit {
border: none;
border-radius: 10px;
height: 40px;
width: 140px;
background-color: #289df6;
color: #fff;
margin: auto;
display: block;
outline: none;
cursor: pointer;
}
#submit:hover {
background-color: #0a8ef2;
}
.text {
display: inline-block;
margin: 5px 20px 5px 8px;
}
.row-one {
padding: 30px 20px 15px 20px;
}
.row-two {
padding: 15px 20px 30px 20px;
}
.container {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #dbeffe;
border-radius: 50%;
}
.container:hover input ~ .checkmark {
background-color: #cbe7fd;
}
.container input:checked ~ .checkmark {
background-color: #289df6;
}
h1 {
font-size: 30px;
font-weight: 300;
text-align: center;
color: #289df6;
padding-top: 15px;
display: block;
}
h2 {
font-size: 22px;
font-weight: 300;
text-align: center;
}
h3 {
font-size: 24px;
font-weight: 300;
text-align: center;
padding: 15px;
}
h3 b {
font-size: 32px;
font-weight: 300;
color: #289df6;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
Now we have completed our css code section for bmi calculator, here is our updated output css.
Html Css Bmi Calculator Output
Now add javascript code for calculating bmi using bmi calculator.
Javascript Code For Bmi Calculator
var age = document.getElementById("age");
var height = document.getElementById("height");
var weight = document.getElementById("weight");
var male = document.getElementById("m");
var female = document.getElementById("f");
var form = document.getElementById("form");
function validateForm() {
if (
age.value == "" ||
height.value == "" ||
weight.value == "" ||
(male.checked == false && female.checked == false)
) {
alert("All fields are required!");
document
.getElementById("submit")
.removeEventListener("click", countBmi);
} else {
countBmi();
}
}
document.getElementById("submit").addEventListener("click", validateForm);
function countBmi() {
var p = [age.value, height.value, weight.value];
if (male.checked) {
p.push("male");
} else if (female.checked) {
p.push("female");
}
form.reset();
var bmi = Number(p[2]) / (((Number(p[1]) / 100) * Number(p[1])) / 100);
var result = "";
if (bmi < 18.5) {
result = "Underweight";
} else if (18.5 <= bmi && bmi <= 24.9) {
result = "Healthy";
} else if (25 <= bmi && bmi <= 29.9) {
result = "Overweight";
} else if (30 <= bmi && bmi <= 34.9) {
result = "Obese";
} else if (35 <= bmi) {
result = "Extremely obese";
}
var h1 = document.createElement("h1");
var h2 = document.createElement("h2");
var t = document.createTextNode(result);
var b = document.createTextNode("BMI: ");
var r = document.createTextNode(parseFloat(bmi).toFixed(2));
h1.appendChild(t);
h2.appendChild(b);
h2.appendChild(r);
document.body.appendChild(h1);
document.body.appendChild(h2);
document.getElementById("submit").removeEventListener("click", countBmi);
document
.getElementById("submit")
.removeEventListener("click", validateForm);
}
document.getElementById("submit").addEventListener("click", countBmi);
Final Output Of Bmi Calculator
Now we have completed our javascript Code section For the BMI calculator. Here is our updated output with javascript Code. Hope you like the BMI Calculator Source Code. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
Create Image Slider Using HTML, CSS And JavaScript Code
In this post, we learn how to create a BMI Calculator project form using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
code by – @nikolett_codes
Error at form.reset();