Hacktoberfestmine/BMI_Calculator.html at main · pythonites/Hacktoberfestmine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- BMI CALCULATOR-->

<!DOCTYPE html>
<html>

<head>
    <!-- Include JS files -->
//    <script src="app.js"></script>
</head>

<body>
    <script>
        window.onload = () => {
            let button = document.querySelector("#btn");
            // Function for calculating BMI
            button.addEventListener("click", calculateBMI);
        };

        function calculateBMI() {

            /* Getting input from user into height variable.
             Input is string so typecasting is necessary. */
            let height = parseInt(document.querySelector("#height").value);

            /* Getting input from user into weight variable.
             Input is string so typecasting is necessary.*/
            let weight = parseInt(document.querySelector("#weight").value);

            let result = document.querySelector("#result");

            // Checking the user providing a proper
            // value or not
            if (height === "" || isNaN(height))
                result.innerHTML = "Provide a valid Height!";

            else if (weight === "" || isNaN(weight))
                result.innerHTML = "Provide a valid Weight!";

            // If both input is valid, calculate the bmi
            else {

                // Fixing upto 2 decimal places
                let bmi = (weight / ((height * height)/ 10000)).toFixed(2);

                // Dividing as per the bmi conditions
                if (bmi < 18.6) result.innerHTML = `Under Weight : <span>${bmi}</span>`;

                else if (bmi >= 18.6 && bmi < 24.9)
                    result.innerHTML = `Normal : <span>${bmi}</span>`;

                else result.innerHTML = `Over Weight : <span>${bmi}</span>`;
            }
        }
    </script>

    <div class="container">
        <h1>BMI Calculator</h1>

        <!-- Option for providing height
            and weight to the user-->
        <p>Height (in cm)</p>

        <input type="text" id="height">

        <p>Weight (in kg)</p>

        <input type="text" id="weight">

        <button id="btn">Calculate</button>

        <div id="result"></div>
    </div>
</body>

</html>