BMI Calculator
IMS BMI Calculator - jQuery
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<form>
<p><strong>Height:</strong></p>
<div id="heightslider" class="slider"></div>
<div id="heightslidecm">100cm</div>
<div id="heightslidein">0ft</div>
<input type="text" id="input_height" style="display: none;" />
<hr />
<p><strong>Weight:</strong></p>
<div id="weightslider" class="slider"></div>
<div id="weightslidekg">0kg</div>
<div id="weightslidelb">0lb</div>
<input type="text" id="input_weight" style="display: none;" />
<input type="button" id="calculatebutton" value="Calculate" />
<div id="result"></div>
</form>
CSS
body {
margin-top: 20px;
}
JavaScript
$(document).ready(function() {
$('#weightslider').slider({
animate: true,
range: 'min',
min: 0,
max: 200,
step: 1,
slide: function(event, ui) {
$('#weightslidekg').html(ui.value + 'kg');
$('#weightslidelb').html((ui.value * 2.20462).toFixed(0) + 'lb');
},
change: function(event, ui) {
$('#input_weight').attr('value', ui.value);
}
});
$('#heightslider').slider({
animate: true,
range: 'min',
min: 100,
max: 250,
step: 1,
slide: function( event, ui ) {
$( "#heightslidecm" ).html( ui.value + 'cm' );
var inches = (ui.value*0.393700787).toFixed(0);
var feet = Math.floor(inches / 12);
inches %= 12;
$( "#heightslidein" ).html( feet + "ft " + inches + 'in');
},
change: function(event, ui) {
$('#input_height').attr('value', (ui.value / 100));
}
});
$('#calculatebutton').click(function() {
var weight = $('#input_weight').val(),
height = $('#input_height').val(),
heightsqaured = (height) * (height),
result = (weight) / (heightsqaured);
if (result < 16) {
var rating = ('You are severely underweight');
} else if (result > 16 && result < 18.5) {
var rating = ('You are underweight');
} else if (result > 18.5 && result < 25) {
var rating = ('You are healthy');
} else if (result > 25 && result < 30) {
var rating = ('You are overweight <a href="http://google.com"> test link </a>');
} else if (result > 30 && result < 35) {
var rating = ('You are moderately obese');
} else if (result > 35 && result < 40) {
var rating = ('You are severely obese');
} else if (result > 40 && result < 80) {
var rating = ('You are very severely obese');
...