We're also using techniques that can be used for any basic JavaScript calculator. I'm a huge fan of taking the work load off of the server and handing it to the browser. Extremely fast JavaScript processing in modern browsers, like Chrome, make this a viable solution for simple interactive web tools.
This HTML/JavaScript uses simple client-side form handling for the select values. The values are calculated using multipliers from Handbook of Water Use and Conservation. Adjust the multipliers accordingly as necessary, I am quite sure they are dated and severely underestimated If anyone can provide a reliable reference to better water use multipliers it would be appreciated..
The user selects the number of each use event: showers, toilet flushes, etc and submits the form for calculation. The calculateUsage() function rewites the innerHTML of the divs with the calculated water usage. One other short function that may be of interest is writing out the select options through a loop in a function. I have not fully checked this for cross-browser compatibility. Let me know in the comments if anyone has difficulty with it.
<head>
<title>Water Use Calculator</title>
<script type="text/javascript">
function calculateUsage(form){
document.getElementById('shower').innerHTML = form.showers.selectedIndex * 15 + " gallons taking showers.";
document.getElementById('clothe').innerHTML = form.clothes.selectedIndex * 15.0 + " gallons washing clothes.";
document.getElementById('dish').innerHTML = form.dishes.selectedIndex * 10 + " gallons using the dishwasher";
document.getElementById('toilet').innerHTML = form.toilets.selectedIndex * 3 + " gallons flushing toilets.";
document.getElementById('bath').innerHTML = form.baths.selectedIndex * 9 + " gallons in the bathtub.";
document.getElementById('other').innerHTML = form.hands.selectedIndex * 2 + " gallons for handwashing.";
document.getElementById('total').innerHTML = (form.showers.selectedIndex * 15) + (form.clothes.selectedIndex * 15) + (form.dishes.selectedIndex * 10) + (form.toilets.selectedIndex * 3) + (form.baths.selectedIndex * 9) + (form.hands.selectedIndex * 2) + " Approximate Total Gallons Daily Water Usage";
}
function generateOptions() {
for (var i=0;i<11;i++) { document.write('<option>' + i + '</option>'); }
}
</script>
<body>
<fieldset>
<legend>Water Use Calculator</legend>
<form id="waterCalculator">
<div id="shower">
<label for="showers">Showers</label>
<select name="showers">
<script>generateOptions();</script>
</select>
</div>
<div id="clothe">
<label for="clothes">Clothes</label>
<select name="clothes">
<script>generateOptions();</script>
</select>
</div>
<div id="dish">
<label for="dishes">Dishwashers</label>
<select name="dishes">
<script>generateOptions();</script>
</select>
</div>
<div id="toilet">
<label for="toilets">Toilet Flushes</label>
<select name="toilets">
<script>generateOptions();</script>
</select>
</div>
<div id="bath">
<label for="baths">Baths</label>
<select name="baths">
<script>generateOptions();</script>
</select>
</div>
<div id="other">
<label for="hands">Hand Washing</label>
<select name="hands">
<script>generateOptions();</script>
</select>
</div>
<div id="total">
<input type="button" name="calculate" value="submit" onclick="calculateUsage(this.form);">
</div>
</form>
</fieldset>
</body>
</html>
Here is a working demo of the water use calculator
0 comments:
Post a Comment