Showing posts with label bmi. Show all posts
Showing posts with label bmi. Show all posts

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>