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
<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">
<!-- bootstrap 3.3.7-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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>
<!-- 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>
<!-- 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>
Github url : https://github.com/raojeet/bmi-calculator
Posted On: http://www.bolbhai.in/2018/01/bmi-calculator-jquery.html
@raojeet