adnan360
/
bmi-calc-html


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
							<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Source code available under GPLv3 here: https://notabug.org/adnan360/bmi-calc-html -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>BMI Calculator</title>
		<script src="assets/js/jquery.min.js" type="text/javascript"></script>
		<style>
			* {
				padding:0;
				margin:0;
				font-family:sans-serif;
			}
			h1 {
				text-align:center;
				font-weight: 400;
				margin: 10px 0;
			}
			p {
				margin:5px 0;
				line-height: 2em;
			}
			label {
				width:120px;
				display: inline-block;
			}
			input[type=text] {
				width: 100px;
				border-radius:3px;
				border:1px solid #aaa;
				padding:5px 7px;
			}
			select {
				border-radius: 3px;
				padding: 4px;
				border: 1px solid #ccc;
			}
			.wrap {
				width: 600px;
				margin: 0 auto;
			}
			form.bmi, input[type=text], input[type=submit], select {
				font-size:28px;
			}
			input[type=submit] {
				border-radius: 3px;
				padding:5px 25px;
				border:1px solid #aaa;
				margin:0 auto;
				display: inherit;
			}
			.result {
				margin:10px auto;
				padding: 8px 10px;
				border-radius: 5px;
				border: 1px solid #ddd;
				background: #feffdd;
				text-align: center;
			}
			.result.error {
				background:#fbccaf;
			}
			.result .message {
				display:none;
			}
			.result .result-body {
				display:unset;
			}
			.result .bmi {
				border: 4px solid #f00;
				border-radius: 50%;
				width: 80px;
				height: 80px;
				text-align: center;
				vertical-align: middle;
				display: table-cell;
				font-size: 30px;
			}
			.result.error .message {
				display:unset;
			}
			.result.error .result-body, .legend-content {
				display:none;
			}
			.legend li {
				margin-left: 20px;
			}
			.legend-toggle {
				text-align:center;
				width: 100%;
				display: inline-block;
			}
			select {
				-moz-appearance: none;
				-webkit-appearance:none;
				appearance: none;
				padding: 4px 25px 4px 8px;
				background:#eee;
			}
			.select-wrapper {
				position:relative;
				display: inline-block;
			}
			.select-arrow {
				right: 8px;
				top: -1px;
				position: absolute;
				pointer-events: none;
				font-size: 15px;
			}

			/* --- RESPONSIVE --- */

			/* --- Little smaller than 1024 --- */
			@media only screen and (max-width: 900px) {
			}

			/* --- Tablet --- */
			@media only screen and (max-width: 768px) {
				label {
					display:block;
				}
				.wrap {
					width: unset;
					padding:0 20px;
				}
			}

			/* --- Mobile Phone --- */
			@media only screen and (max-width: 480px) {
				select, .select-wrapper {
					display:block;
					width: 100%;
				}
				input[type="text"] {
					width:80%;
				}
				#weight1 {
					width: -moz-available;
					width: -webkit-fill-available;
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<h1>BMI Calculator</h1>
			<form class="bmi" method="post">
				<p>
				<label for="height1">Height:</label>
				<input type="text" id="height1" name="height1" value="" />
				<span id="height1_label">Ft</span>
				<span id="height2_container">
					<input type="text" id="height2" name="height2" value="" />
					<span id="height2_label">In</span>
				</span>
				<select name="height_measurement" id="height_measurement">
					<option value="ftin" data-label1="Ft" data-label2="In">Ft+In</option>
					<option value="cm" data-label1="Cm" data-label2="">Cm</option>
					<option value="in" data-label1="In" data-label2="">In</option>
				</select>
				</p>
				<p><label for="weight1">Weight:</label> <input type="text" name="weight1" id="weight1" value="" />
				<select name="weight_measurement" id="weight_measurement">
					<option value="kg">Kg</option>
					<option value="lbs">lbs</option>
				</select>
				</p>
				<p><input type="submit" name="submit" value="Calculate!" /></p>
			</form>
			<div class="result" style="display:none">
				<div class="result-body">
					<p>BMI:</p> <div class="bmi"></div>
					<p>This means you are: <span class="bmi-meaning"></span></p>
				</div>
				<p class="message"></p>
			</div>
			<div class="legend">
				<a class="legend-toggle" href="javascript:void(0);">BMI Categories</a>
				<div class="legend-content">
					<h4>BMI Categories</h4>
					<ul>
						<li>Underweight = less than 18.5</li>
						<li>Normal weight (healthy) = 18.5–24.9</li>
						<li>Overweight = 25–29.9</li>
						<li>Obese = BMI of 30 or greater</li>
					</ul>
					<p><a href="https://en.wikipedia.org/wiki/Body_mass_index#Categories">(The categories have been simplified from here)</a></p>
				</div>
			</div>

			<script>
				// Select arrow styling
				$('select').wrap( '<span class="select-wrapper"></span>' ).after( '<span class="select-arrow">▼</span>' );
				$('#height_measurement').change(function(){
					var label1 = $( "#height_measurement option:selected" ).attr('data-label1');
					var label2 = $( "#height_measurement option:selected" ).attr('data-label2');
					$('#height2_container').css('display', (label2=='') ? 'none' : '' );
					$('#height1_label').html(label1);
					$('#height2_label').html(label2);
				});
				$('form.bmi').submit(function(e){
					e.preventDefault();
					var measure1 = $( "#height_measurement option:selected" ).val();
					var measure2 = $( "#weight_measurement option:selected" ).val();

					var cm = convertMeasurement($('#height1').val(), $('#height2').val(), measure1);
					var kg = convertMeasurement($('#weight1').val(), 0, measure2);
					var bmi = calculateBMI(cm, kg);
					var bmiMeaning = getBMIMeaning(bmi);
					if ( isNaN(bmi) == true || isFinite(bmi) == false ) {
						$('.result').addClass('error').find('.message').html( 'Error occured. Please check inputs. Enter only numbers and not any characters.' );
					} else {
						$('.result').removeClass('error');
						$('.result .bmi').html( bmi );
						$('.result .bmi-meaning').html( bmiMeaning );
					}
					$('.result').show();
				});
				$('.legend-toggle').click(function(){
					$('.legend-content').toggle();
				});
				// type can be: ftin, cm, in, kg, lbs
				// converts to cm for lengths, kg for masses
				function convertMeasurement(input1, input2=0, input_type) {
					var lengths = ['ftin', 'cm', 'in'];
					var masses = ['kg', 'lbs'];
					var output;
					input1 = parseFloat(input1);
					input2 = parseFloat(input2);

					if (lengths.includes(input_type)==true) { // length conversions
						if (input_type=='ftin') {
							output = ( parseFloat(input1 * 12) + parseFloat(input2) ) * 2.54;
						} else if (input_type=='cm') {
							output = input1;
						} else if (input_type=='in') {
							output = input1 * 2.54;
						}
					} else if (masses.includes(input_type)==true) { // masses conversion
						if (input_type=='kg') {
							output = input1;
						} else if (input_type=='lbs') {
							output = input1 * 0.45359;
						}
					} else {
						// TODO: raise error
					}
					return output;
				}
				// Source: https://www.codentricks.com/make-bmi-calculator-using-pure-javascript/
				function calculateBMI(cm, kg){
					var bmi;
					var newCm= parseFloat(cm/100);

					bmi = kg / (newCm * newCm);
					bmi = bmi.toFixed(1);

					return bmi;
				}
				function getBMIMeaning(bmi) {
					if ( isNaN(bmi) == true || isFinite(bmi) == false ) {
						bmiMeaning = '';
					} else if (bmi < 18.5) {
						bmiMeaning = 'Underweight';
					} else if (bmi >= 18.5 && bmi <= 24.9) {
						bmiMeaning = 'Normal weight (healthy)';
					} else if (bmi >= 25 && bmi <= 29.9) {
						bmiMeaning = 'Overweight';
					} else if (bmi >= 30) {
						bmiMeaning = 'Obese';
					} else {
						bmiMeaning = '';
					}
					return bmiMeaning;
				}
			</script>
		</div>
	</body>
</html>