BMI Calculator Create With JavaScript: You can easily create bmi calculator using javascript code with html from and css.
Hello friends today i will tell you through this article how you can create bmi calculator using javascript or jquery.I will try to understand you step to step. so let’s go.
First of all, you create a form using the html code of the bmi calculator.And then add the javascript code of the bmi calculator to this page.Some javascript function has also been used in creating the bmi calculator.As explained below.
BMI Calculator Create by js, Create BMI Calculator Using js, html and css, BMI Calculator Create with html form and javascript
Overview
Step 1:- Create BMI Calculator HTML Form(bmi-calculator-using-js.html).
Step 2:- Create BMI Calculator JavaScript Code.
Step 1:- Create BMI Calculator HTML Form.
bmi-calculator-using-js.html
<!DOCTYPE html>
<html>
<head>
<title>BMI Calculator Create Using JavaScript</title>
</head>
<body>
<h1>BMI Calculator Create Using JavaScript</h1>
<form name="bmiForm">
Your Weight(kg): <input type="text" name="weight" size="10"><br />
Your Height(cm): <input type="text" name="height" size="10"><br />
<input type="button" value="Calculate BMI" onClick="bmiCalculator()"><br />
Your BMI: <input type="text" name="bmi" size="10"><br />
This Means: <input type="text" name="meaning" size="25"><br />
<input type="reset" value="Reset" />
</form>
</body>
</html>
Step 2:- Create BMI Calculator JavaScript Code.
<script>
function bmiCalculator() {
var weight = document.bmiForm.weight.value;
var height = document.bmiForm.height.value;
if(weight > 0 && height > 0){
var finalBmi = weight/(height/100*height/100);
document.bmiForm.bmi.value = finalBmi;
if(finalBmi < 18.5){
document.bmiForm.meaning.value = "That you are too thin.";
}
if(finalBmi > 18.5 && finalBmi < 25){
document.bmiForm.meaning.value = "That you are healthy.";
}
if(finalBmi > 25){
document.bmiForm.meaning.value = "That you have overweight.";
}
}
else{
alert("Please Fill in everything correctly");
}
}
</script>
The html code and javascript code of the bmi calculator are explained by adding it to the same file.You can see below as an example. Also its demo is given.
bmi-calculator-using-js.html
<!DOCTYPE html>
<html>
<head>
<title>BMI Calculator Create Using JavaScript</title>
</head>
<body>
<h1>BMI Calculator Create Using JavaScript</h1>
<form name="bmiForm">
Your Weight(kg): <input type="text" name="weight" size="10"><br />
Your Height(cm): <input type="text" name="height" size="10"><br />
<input type="button" value="Calculate BMI" onClick="bmiCalculator()"><br />
Your BMI: <input type="text" name="bmi" size="10"><br />
This Means: <input type="text" name="meaning" size="25"><br />
<input type="reset" value="Reset" />
</form>
<script>
function bmiCalculator() {
var weight = document.bmiForm.weight.value;
var height = document.bmiForm.height.value;
if(weight > 0 && height > 0){
var finalBmi = weight/(height/100*height/100);
document.bmiForm.bmi.value = finalBmi;
if(finalBmi < 18.5){
document.bmiForm.meaning.value = "That you are too thin.";
}
if(finalBmi > 18.5 && finalBmi < 25){
document.bmiForm.meaning.value = "That you are healthy.";
}
if(finalBmi > 25){
document.bmiForm.meaning.value = "That you have overweight.";
}
}
else{
alert("Please Fill in everything correctly");
}
}
</script>
</body>
</html>