Articles by "Programming"
Showing posts with label Programming. Show all posts
Blog about cryptocurrency, latest news, celebrity, Bollywood news, facts, riddle, Interesting facts, daily facts, amazing facts and latest trends.
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