Simple BMI CalculatorHeight(m):Weight(kg): |
Simple BMI CalculatorThis is my first attempt of developing a simple application using JavaScript and HTML forms, got sample coding from W3School and played around this I got this working build.
Feel free to copy and play around with it. |
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Simple BMI Calculator</h1>
Height(m): <input id="ht"><br><br>
Weight(kg): <input id="wt"><br><br>
<script>
function myFunction() {
var BMIOUTPUT = document.getElementById("text");
var height = document.getElementById("ht").value;
var weight = document.getElementById("wt").value
var bmiValue = weight/(height*height);
if(bmiValue >= 25){
BMIOUTPUT.style.color="#FF0000"
BMIOUTPUT.innerHTML = "Your BMI is : " + bmiValue.toFixed(1) + " , it's over the recommended value.";
}
else if (bmiValue < 18.5 ){
BMIOUTPUT.style.color="#FF0000"
BMIOUTPUT.innerHTML = "Your BMI is : " + bmiValue.toFixed(1) + ", it's under the recommended value." ;
}
else
{
BMIOUTPUT.style.color="#000000"
BMIOUTPUT.innerHTML = "Your BMI is : " + bmiValue.toFixed(1) + " , it's within the recommended value.";
}
}
</script>
<h3 id = "text"> </h3>
<button onclick="myFunction()">Calculate</button>
</body>
</html>
<html>
<body>
<h1 id="header">Simple BMI Calculator</h1>
Height(m): <input id="ht"><br><br>
Weight(kg): <input id="wt"><br><br>
<script>
function myFunction() {
var BMIOUTPUT = document.getElementById("text");
var height = document.getElementById("ht").value;
var weight = document.getElementById("wt").value
var bmiValue = weight/(height*height);
if(bmiValue >= 25){
BMIOUTPUT.style.color="#FF0000"
BMIOUTPUT.innerHTML = "Your BMI is : " + bmiValue.toFixed(1) + " , it's over the recommended value.";
}
else if (bmiValue < 18.5 ){
BMIOUTPUT.style.color="#FF0000"
BMIOUTPUT.innerHTML = "Your BMI is : " + bmiValue.toFixed(1) + ", it's under the recommended value." ;
}
else
{
BMIOUTPUT.style.color="#000000"
BMIOUTPUT.innerHTML = "Your BMI is : " + bmiValue.toFixed(1) + " , it's within the recommended value.";
}
}
</script>
<h3 id = "text"> </h3>
<button onclick="myFunction()">Calculate</button>
</body>
</html>