bmi-calculator
Version:
Bmi calculator for jQuery
125 lines (121 loc) • 6.33 kB
HTML
<html>
<head>
<title>BMI calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="dist/css/default.min.css" />
<link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default" id="bmi-calculator">
<div class="panel-heading">
<h1 class="panel-title">Calculate your BMI</h1>
</div>
<div class="panel-body">
<form id="bmi-form">
<ul class="list-group">
<li class="list-group-item">
<label>Measurement type</label>
<select class="form-control">
<option value="imperial">Imperial</option>
<option value="customary">Customary</option>
<option value="metric">Metric</option>
</select>
</li>
<li class="list-group-item bmi-imperial">
<label>Height in</label>
<div class="form-group">
Feet
<input class="form-control" type="number" name="impFt" min="0" />
</div>
<div class="form-group">
Inches
<input class="form-control" type="number" name="impInch" min="0" />
</div>
</li>
<li class="list-group-item bmi-metric" style="display: none;">
<label>Height in</label>
<div class="form-group">
Metres
<input class="form-control" type="number" name="m" min="0" />
</div>
<div class="form-group">
Centimetres
<input class="form-control" type="number" name="cm" min="0" />
</div>
</li>
<li class="list-group-item bmi-imperial">
<label>Weight in</label>
<div class="form-group">
Pounds
<input class="form-control" type="number" name="impLb" min="0" />
</div>
</li>
<li class="list-group-item bmi-customary" style="display: none;">
<label>Height in</label>
<div class="form-group">
Feet
<input class="form-control" type="number" name="custFt" min="0" />
</div>
<div class="form-group">
Inches
<input class="form-control" type="number" name="custInch" min="0" />
</div>
</li>
<li class="list-group-item bmi-customary" style="display: none;">
<label>Weight in</label>
<div class="form-group">
Pounds
<input class="form-control" type="number" name="custLb" min="0" />
</div>
<div class="form-group">
Stones
<input class="form-control" type="number" name="custSt" min="0" />
</div>
</li>
<li class="list-group-item bmi-metric" style="display: none;">
<label>Weight in</label>
<div class="form-group">
Kilogrammes
<input class="form-control" type="number" name="kg" min="0" />
</div>
</li>
<li class="list-group-item bmi-score">
<h1>BMI</h1>
</li>
<li class="list-group-item">
<table class="table table-bordered">
<tbody>
<tr>
<th style="color:orange"> Orange </th>
<td>Lower than 20</td>
<td>Underweight</td>
</tr>
<tr>
<th style="color:green"> Green </th>
<td>Between 20 and 25</td>
<td>Ideal weight</td>
</tr>
<tr>
<th style="color:red"> Red </th>
<td>Higher than 25</td>
<td>Overweight</td>
</tr>
</tbody>
</table>
</li>
</ul>
<input class="btn btn-success" type="submit" value="submit">
</form>
</div>
</div>
<!-- vendors -->
<script src="vendors/jquery/dist/jquery.min.js"> </script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"> </script>
<!-- dist -->
<script src="dist/js/settings.min.js"> </script>
<script src="dist/js/plugin/jquery.bmi.min.js"> </script>
</body>
</html>