<html>
<head>
<title>Gali's Overweight Calculator</title>
<style>
/* This is a CSS style sheet: it adds style to the program output */
.result { font-weight: bold; } /* For elements with class="result" */
#payment { text-decoration: underline; } /* For element with id="payment" */
</style>
</head>
<body>
<!--
This is an HTML form that allows the user to enter data and allows
JavaScript to display the results it computes back to the user. The
form elements are embedded in a table to improve their appearance.
The form itself is given the name "loandata", and the fields within
the form are given names such as "interest" and "years". These
field names are used in the JavaScript code that follows the form.
Note that some of the form elements define "onchange" or "onclick"
event handlers. These specify strings of JavaScript code to be
executed when the user enters data or clicks on a button.
-->
<form name="bodydata">
<table>
<tr><td><b>Enter Your Body Weight and Height Information:</b></td></tr>
<tr>
<td>1) Height: <input type="text" name="ft" onchange="calculate();">feet </td>
<td>and <input type="text" name="inches" onchange="calculate();"> inches</td>
</tr>
<tr>
<td>2) Weight: <input type="text" name="weight" onchange="calculate();">
pounds</td>
</tr>
<tr>
<td><input type="button" value="Compute" onclick="calculate();"></td>
</tr>
<tr><td><b>Health Information:</b></td></tr>
<tr>
<td>Your BMI is:</td>
<td><span class="result" id="bmi"></span></td>
</tr>
<tr>
<td>You are currently:</td>
<td><span class="result" id="weightclass"></span></td>
</tr>
</table>
</form>
<script language="JavaScript">
/*
* This is the JavaScript function that makes the example work. Note that
* this script defines the calculate() function called by the event
* handlers in the form. The function reads values from the form
* <input> fields using the names defined in the previous HTML code. It outputs
* its results into the named <span> elements.
*/
function calculate() {
// Get the user's input from the form. Assume it is all valid.
// Convert interest from a percentage to a decimal, and convert from
// an annual rate to a monthly rate. Convert payment period in years
// to the number of monthly payments.
var ft = document.bodydata.ft.value * 12;
var inches = document.bodydata.inches.value;
var weight = document.bodydata.weight.value * 703;
var height = eval(inches) + eval(ft);
var denom = Math.pow(height, 2);
var totalbmi = weight/denom;
// Get named <span> elements from the form.
var bmi = document.getElementById("bmi");
var weightclass = document.getElementById("weightclass");
// Check that the result is a finite number. If so, display the
// results by setting the HTML content of each <span> element.
if (isFinite(totalbmi)) {
bmi.innerHTML = totalbmi.toFixed(2);
if (totalbmi<18.5) weightclass.innerHTML = "Underweight, eat some food!";
if (totalbmi>=18.5 && totalbmi<24.9) weightclass.innerHTML = "Normal, looking hot!!";
if (totalbmi>=24.9 && totalbmi<29.9) weightclass.innerHTML = "Overweight, tighten it up!";
if (totalbmi>=30) weightclass.innerHTML = "FAT, hit the GYM!!";
}
// Otherwise, the user's input was probably invalid, so display nothing.
else {
bmi.innerHTML = "nada";
weightclass.innerHTML = "nada";
}
}
</script>
</body>
</html>
|