as per the formula, we can calculate the bmi with height and weight, if you are creating a simple html page then here is the code to use.
JavaScript
function calculateBMI() {
var age = parseInt(document.getElementById("txtage").value);
if (isNaN(age) || age <= 0) {
alert("Provide valid Age");
return;
}
var weigth = parseInt(document.getElementById("txtweigth").value);
if (isNaN(weigth) || weigth <= 0) {
alert("Provide valid weight");
return;
}
var height = parseInt(document.getElementById("txtheight").value);
if (isNaN(height) || height <= 0) {
alert("Provide valid height");
return;
}
var heightPercentage = 1;
if (height > 10)
heightPercentage = height / 100;
var BMI = weigth / (heightPercentage * heightPercentage);
BMI = BMI.toFixed(2);
document.getElementById("lblBMI").innerText = "Your BMI is " + BMI;
if (BMI > 25)
document.getElementById("lblBMI").className = "redBMI";
else if (BMI > 18.5)
document.getElementById("lblBMI").className = "greenBMI";
else
document.getElementById("lblBMI").className = "yellowBMI";
}
CSS Style
<style type="text/css">
.greenBMI {
color: green;
font-weight: bold;
}
.redBMI {
color: red;
font-weight: bold;
}
.yellowBMI {
color:yellow;
font-weight: bold;
}
</style>
HTML Code
Enter the Age : <input id="txtage" type="number" name="age" min="5" max="99" maxlength="2" required />
<br />
<br />
Enter weigth : <input id="txtweigth" type="number" name="weigth" min="5" max="200" maxlength="5" /> in Kg
<br />
<br />
Enter height : <input id="txtheight" type="number" name="height" min="5" max="200" maxlength="5" /> in cm
<br />
<br />
<input type="button" onclick="calculateBMI()" value="Calculate BMI">
<br />
<span id="lblBMI"></span>
Test Code
Enter the Age :
Enter weigth : in Kg
Enter height : in cm
JavaScript
function calculateBMI() {
var age = parseInt(document.getElementById("txtage").value);
if (isNaN(age) || age <= 0) {
alert("Provide valid Age");
return;
}
var weigth = parseInt(document.getElementById("txtweigth").value);
if (isNaN(weigth) || weigth <= 0) {
alert("Provide valid weight");
return;
}
var height = parseInt(document.getElementById("txtheight").value);
if (isNaN(height) || height <= 0) {
alert("Provide valid height");
return;
}
var heightPercentage = 1;
if (height > 10)
heightPercentage = height / 100;
var BMI = weigth / (heightPercentage * heightPercentage);
BMI = BMI.toFixed(2);
document.getElementById("lblBMI").innerText = "Your BMI is " + BMI;
if (BMI > 25)
document.getElementById("lblBMI").className = "redBMI";
else if (BMI > 18.5)
document.getElementById("lblBMI").className = "greenBMI";
else
document.getElementById("lblBMI").className = "yellowBMI";
}
CSS Style
<style type="text/css">
.greenBMI {
color: green;
font-weight: bold;
}
.redBMI {
color: red;
font-weight: bold;
}
.yellowBMI {
color:yellow;
font-weight: bold;
}
</style>
HTML Code
Enter the Age : <input id="txtage" type="number" name="age" min="5" max="99" maxlength="2" required />
<br />
<br />
Enter weigth : <input id="txtweigth" type="number" name="weigth" min="5" max="200" maxlength="5" /> in Kg
<br />
<br />
Enter height : <input id="txtheight" type="number" name="height" min="5" max="200" maxlength="5" /> in cm
<br />
<br />
<input type="button" onclick="calculateBMI()" value="Calculate BMI">
<br />
<span id="lblBMI"></span>
Test Code
Enter the Age :
Enter weigth : in Kg
Enter height : in cm
No comments:
Post a Comment