Hello Friends,
I would like to share the code for BMI calculator. You can calculate your body mass index with help of this simple program.
I explain below in order to help the functions used in the code

index.html

<html>
<head>
    <meta charset="UTF-8">
    <title>BMI Calculator</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="description" content="BMI Calculator">
    <meta name="keywords" content="BMI Calculator">
    (html comment removed:  bootstrap 3.3.7)
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    (html comment removed:  HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries )
    (html comment removed:  WARNING: Respond.js doesn't work if you view the page via file:// )
    (html comment removed: [if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif])
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <aside class="col-md-8 col-md-offset-2">
            <section class="content-header">
                <h1>BMI Calculator 
                    <small>Health</small>
                </h1>
            </section>
            (html comment removed:  Main content )
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-7">
                            <h4><span class="label label-primary">Weight <strong><span class ='' id="weight-value">56</span></strong> kgs.</span></h4>
                            <input type="text" data-slider="true" value="56" data-slider-range="5,200" data-slider-step=".5" data-slider-snap="true" id="la">
                            <h4><span class="label label-danger">Height <strong><span class =''  id="height-value">160</span> </strong> cm</span></h4>
                            <input type="text" data-slider="true" value="160" data-slider-range="20,200" data-slider-step="1" data-slider-snap="true" id="nm">
                        </div>
                        <div class="alert alert-info col-md-4">
                            <center>
                                <strong>BMI Value</strong> <br>
                                <button type="button" class="btn btn-warning btn-sm" id="table-bmi">
                                    <h1>33.5</h1>
                                    <small>Obese Class I (Moderately obese)</small>
                                </button>
                            </center>
                        </div>
                        <br><br><br>
                        <div class="col-md-12">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>BMI Index</th>
                                        <th>Meaning</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="row_1" class="">
                                        <td>Less Than 15</td>
                                        <td>Very severely underweight</td>
                                    </tr>
                                    <tr id="row_2" class="">
                                        <td>15.0 - 16.0</td>
                                        <td>Severely underweight</td>
                                    </tr>
                                    <tr id="row_3" class="">
                                        <td>16.0 - 18.4</td>
                                        <td>Underweight</td>
                                    </tr>
                                    <tr id="row_4" class="">
                                        <td>18.5 - 24.9</td>
                                        <td>Normal</td>
                                    </tr>
                                    <tr id="row_5" class="">
                                        <td>25 - 29.9</td>
                                        <td>Overweight</td>
                                    </tr>
                                    <tr id="row_6" class="label-success">
                                        <td>30 - 34.9</td>
                                        <td>Obese Class I (Moderately obese)</td>
                                    </tr>
                                    <tr id="row_7" class="">
                                        <td>35 - 39.9</td>
                                        <td>Obese Class II (Severely obese)</td>
                                    </tr>
                                    <tr id="row_8" class="">
                                        <td>Above 40</td>
                                        <td>Obese Class III (Very severely obese)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </aside>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    (html comment removed:  Left side column. contains the logo and sidebar )
    <script src="slider/simple-slider.js"></script>
    <link href="slider/simple-slider.css" rel="stylesheet" type="text/css">
    <script type="text/Javascript">
       $(document).ready(function () {
           $("#la").bind(
                   "slider:changed",
                   function (event, data) {
                           $("#weight-value").html(data.value.toFixed(0));
                           calculateBMI();
                   });
     
           $("#nm").bind(
                   "slider:changed",
                   function (event, data) {
                           $("#height-value").html(data.value.toFixed(0));
                           calculateBMI();
                   });
     
           function calculateBMI() {
                   var weight = $("#weight-value").html();
                   var height = parseInt($("#height-value").html()) / 100;
                   var bmi = weight / (height * height);
     
                   var type = "Normal";
                   var pos = "";
                   if (bmi < 15) {
                           type = "Very severely underweight";
                           pos = "row_1";
                   } else if (bmi <= 16) {
                           type = "Severely underweight";
                           pos = "row_2";
                   } else if (bmi <= 18.4) {
                           type = "Underweight";
                           pos = "row_3";
                   } else if (bmi <= 24.9) {
                           type = "Normal";
                           pos = "row_4";
                   } else if (bmi <= 29.9) {
                           type = "Overweight";
                           pos = "row_5";
                   } else if (bmi <= 34.9) {
                           type = "Obese Class I (Moderately obese)";
                           pos = "row_6";
                   } else if (bmi <= 39.9) {
                           type = "Obese Class II (Severely obese)";
                           pos = "row_7";
                   } else {
                           type = "Obese Class III (Very severely obese)";
                           pos = "row_8";
                   }
                   $("tr").removeClass('label-success');
                   $("#table-bmi").html("<H1>" + bmi.toFixed(1) + "</h1><small>" + type + "</small>");
                   $("#" + pos).addClass('label-success');
           }
           calculateBMI();
       });
    </script>
</body>
Screen Shot 2018-01-21 at 3.47.50 PM.png

Bolbhai

Bolbhai

I have been a developer for last five years working experience in different technology, apart from this I loved traveling, blogging and exploring the crypto world.

Post A Comment:

2 comments: