Friday, April 22, 2016

How to calculate BMI in HTML and Javascript

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


No comments:

Post a Comment