# BMI calculator javascript | BMI calculator code - codewithrandom

WelcomeđźŽ‰ to Code With Random blog. In this blog, we learn that how we create a BMI calculator javascript. We use HTML, and javascript for this BMI calculator javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a BMI calculator javascript.

## HTML code for Bmi calculator

``````<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">
<span class="checkmark"></span>
</label>
<label class="container">
<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>
``````
There is all HTML code for the Bmi calculator javascript. Now, you can see output without CSS, then we write css & javascript for the Bmi calculator javascript.
output

## CSS Code for Bmi calculator

`````` * {
font-family: Quicksand;
font-size: 16px;
color: #333;
}
body {
margin: 0;
height: 100vh;
border: 0;
background: linear-gradient(to bottom right, #F1F2B5, #eef2f3);
}
.form {
background-color: #fff;
height: 240px;
width: 450px;
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: .4s;
transform: scale(1.02);
}
.row-one {
}
.row-two {
}
.text-input {
width: 60px;
height: 30px;
background-color: #dbeffe;
border: none;
outline: none;
cursor: pointer;
}
.text-input:last-child {
margin-bottom: 35px;
}
.text-input:hover {
background-color: #cbe7fd;
}
#submit {
border: none;
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 {
}
.row-two {
}
.container {
display: inline-block;
position: relative;
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;
}
.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;
display: block;
}
h2 {
font-size: 22px;
font-weight: 300;
text-align: center;
}
h3 {
font-size: 24px;
font-weight: 300;
text-align: center;
}
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);
}
``````

output

## 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)){
document.getElementById("submit").removeEventListener("click", countBmi);
}else{
countBmi();
}
}
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);
}