<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title>Water Use Calculator | The Power of 10%</title>
<script type='text/javascript' src='js/jquery/1.4.2/jquery.noleak.min.js'></script>
<script type='text/javascript' src='js/jquery/form/2.36/jquery.form.js'></script>
<script type='text/javascript' src='js/jquery/numeric/1.0/jquery.numeric.pack.js'></script>
<script type='text/javascript' src='js/jquery/json/1.3/jquery.json.min.js'></script>
<script type='text/javascript' src='js/jquery/common.js'></script>
<script type='text/javascript' src='js/jquery/1.8.2/jquery.ui.min.js'></script>
<link type='text/css' rel='stylesheet' media='screen' charset='utf-8' href='js/jquery/1.8.2/themes/redmond/jquery.ui.css' />
<link type='text/css' rel='stylesheet' media='screen' charset='utf-8' href='css/level3_new.css' />
<link type='text/css' rel='stylesheet' media='screen' charset='utf-8' href='css/calculator2012.css' />
<script type='text/javascript' src="js/app.js"></script>
<script type='text/javascript' src="calculator-dw2.js"></script>
<script type='text/javascript' src="city-bill.js"></script>
</head>
<body>
<p id="banner"><a href="/">www.WaterMatters.org</a></p>
<div id="outsidehead-bluelink">
</div>
<div id="wrapper">
<h1 id="graphic_header"><img src="okstate_img/header.jpg" alt="Water Use Calculator" /></h1>
<form id="calcForm" action="" method="post">
<div id="box_wrapper">
<div class="box">
<img src="img/howoften.png" alt="How Often" class="intro_image" />
</div>
<div class="box">
<img src="okstate_img/showers.jpg" alt="Shower" class="intro_image" />
<h2>Showers</h2>
<p class="q">
<label for="showers">Per day</label>
<select name="showers" id="showers">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</p>
<div id='showers_options' class='hidden'>
<p class="q time">
<label for="shower_minutes">Minutes?</label>
<input type="text" id="shower_minutes" name="shower_minutes" value="10" class="numeric" />
</p>
<p class="q">
<label for="shower_low_flow">Low-flow showerhead?</label>
<select name="shower_low_flow" id="shower_low_flow">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</p>
</div>
</div>
<div class="box">
<img src="okstate_img/bath.jpg" alt="Baths" class="intro_image" />
<h2>Baths</h2>
<p class="q">
<label for="baths">Per week</label>
<select name="baths" id="baths">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</p>
</div>
<br class="clear" />
<div class="box">
<img src="okstate_img/toilet_flushes.jpg" alt="Toilet flushes" class="intro_image" />
<h2>Toilet flushes</h2>
<p class="q">
<label for="toilet_flushes">Per day</label>
<select name="toilet_flushes" id="toilet_flushes">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</p>
<div id='toilet_options' class='hidden' title='You can look under your toilet tank lid to see the manufacture date.'>
<p class="q">
<label for="toilet_low_flow">Low-flow (1995 or newer) toilet?</label>
<select name="toilet_low_flow" id="toilet_low_flow">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</p>
</div>
</div>
<div class="box">
<img src="okstate_img/running_water.jpg" alt="Running water" class="intro_image" />
<h2>Running water</h2>
<p class="q"><label for="sink_minutes">Minutes per day washing hands, brushing teeth, etc.</label></p>
<p class="q time"><input type="text" id="sink_minutes" name="sink_minutes" value="0" class="numeric" /></p>
<div id='sink_options' class='hidden'>
<p class="q">
<label for="sink_low_flow">Low-flow faucet?</label>
<select name="sink_low_flow" id="sink_low_flow">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</p>
</div>
</div>
<div class="box">
<img src="okstate_img/dishes_by_hand.jpg" alt="Dishes by hand" class="intro_image" />
<h2>Dishes by hand</h2>
<p class="q"><label for="hand_minutes">Minutes per day</label></p>
<p class="q time"><input type="text" id="hand_minutes" name="hand_minutes" value="0" class="numeric" /></p>
<div id='hand_options' class='hidden'>
<p class="q">
<label for="hand_low_flow">Low-flow faucet?</label>
<select name="hand_low_flow" id="hand_low_flow">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</p>
</div>
</div>
<br class="clear" />
<div class="box">
<img src="okstate_img/dishwasher.jpg" alt="Dishwasher" class="intro_image" />
<h2>Dishwasher</h2>
<p class="q">
<label for="dishwasher">Loads per week</label>
<select name="dishwasher" id="dishwasher">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</p>
<div id='dishwasher_options' class='hidden'>
<p class="q">
<label for="dishwasher_energy_star">Water-saving/Energy Star?</label>
<select name="dishwasher_energy_star" id="dishwasher_energy_star">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</p>
<p class="q"><label for="dishwasher_gallons">Gallons per load</label>
<input type="text" id="dishwasher_gallons" name="dishwasher_gallons" value="12" class="numeric" /></p>
</div>
</div>
<div class="box">
<img src="okstate_img/laundry.jpg" alt="Laundry" class="intro_image" />
<h2>Laundry</h2>
<p class="q">
<label for="laundry">Loads per week</label>
<select name="laundry" id="laundry">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</p>
<div id='laundry_options' class='hidden'>
<p class="q">
<label for="laundry_energy_star">Water-saving/Energy Star?</label>
<select name="laundry_energy_star" id="laundry_energy_star">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</p>
<p class="q">
<label for="laundry_gallons">Gallons per load</label>
<input type="text" id="laundry_gallons" name="laundry_gallons" value="43" class="numeric" />
</p>
</div>
</div>
<div class="box">
<img src="okstate_img/lawn_watering.jpg" alt="Lawn watering" class="intro_image" />
<h2>Lawn watering</h2>
<p class="q">
<label for="lawn">Irrigation cycles <br />per week</label>
<select name="lawn" id="lawn">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</p>
<div id='lawn_options' class='hidden'>
<p class="q time" style="height:auto;">
<label for="lawn_minutes">Minutes <br />per cycle?</label>
<input type="text" id="lawn_minutes" name="lawn_minutes" value="60" class="numeric" style="margin-top:-10px;" />
</p>
<p class="q">
<label for="lawn_sensors">Rain sensor or smart irrigation controller?</label>
<select name="lawn_sensors" id="lawn_sensors">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</p>
</div>
</div>
<br class="clear" />
<div class="box">
<img src="okstate_img/outdoor_water_use.jpg" alt="Outside water" class="intro_image" />
<h2>Outside water</h2>
<p><label for="outside_minutes">Minutes per week washing cars, using the hose, etc.</label></p>
<p class="q time"><input type="text" id="outside_minutes" name="outside_minutes" value="0" class="numeric" /></p>
</div>
<div class="box">
<img src="okstate_img/pool.png" alt="Pool" class="intro_image" />
<h2>Pool</h2>
<p><label for="pool_minutes">Minutes per week filling your pool.</label></p>
<p class="q time"><input type="text" id="pool_minutes" name="pool_minutes" value="0" class="numeric" /></p>
</div>
<p style="clear:both;">On average 50-70% of water use in Oklahoma is for lawn watering. Summer bills will be significantly lowered by efficient use of water. For more information about Oklahoma lawn watering, go to <a href="http://thinkwater.okstate.edu/old-pages/irrigation">http://thinkwater.okstate.edu/old-pages/irrigation</a>.</p>
<p style="clear:both;">For more information on water saving tips, please visit <a href="http://www.epa.gov/watersense">http://www.epa.gov/watersense</a> and <a href="http://water.okstate.edu/garden">http://water.okstate.edu/garden</a>.</p>
<p style="clear:both;">This water use calculator is for general information only and based on local averages and national benchmarks for water use. Data on pricing is for 2016 for all but Norman and Stillwater which use 2017 data. Calculations are estimates that are valuable for comparison purposes but are not meant to reflect exact water usage. Mathematical rounding may cause some calculation inconsistencies.</p>
</div>
<div id="results_wrapper" style="min-height:800px;">
<!-- Show estimated bill / savings based on city -->
<div class="box-city">
<h3 style="margin:0 0 10px 0;">Estimate Water Bill:</h3>
<p class="q">
<label for="city">Select your city</label>
<select name="city" id="city">
<!-- This will be populated by javascript functions -->
</select>
</p>
<p> </p>
<p id="monthly_bill"></p>
<p id="monthly_bill_reduced"></p>
<p id="monthly_savings"></p>
</div>
<!-- end of city-based bill / savings estimate -->
<h2>Daily water use</h2>
<div class="caption" style="margin:-10px 0 20px 0;">* Rounded up to the nearest gallon.</div>
<div id="household_totals" style="margin-top:-30px;">
<div class="sections">
<h3 style="color: #3FA3D5;">Itemized Household Usage:</h3>
<p><strong>Shower & bath:</strong> <span id="bath_household_total"></span><br />
<span id='bath_household_total_jugs' class="jugs"></span></p>
<p><strong>Toilet:</strong> <span id="toilet_household_total"></span><br />
<span id="toilet_household_total_jugs" class="jugs"></span></p>
<p><strong>Sink:</strong> <span id="sink_household_total"></span><br />
<span id="sink_household_total_jugs" class="jugs"></span></p>
<p><strong>Dishes by hand:</strong> <span id="hand_household_total"></span><br />
<span id="hand_household_total_jugs" class="jugs"></span></p>
<p><strong>Dishwasher:</strong> <span id="dishwasher_household_total"></span><br />
<span id="dishwasher_household_total_jugs" class="jugs"></span></p>
<p><strong>Laundry:</strong> <span id="laundry_household_total"></span><br />
<span id="laundry_household_total_jugs" class="jugs"></span></p>
<p><strong>Lawn:</strong> <span id="lawn_household_total"></span><br />
<span id="lawn_household_total_jugs" class="jugs"></span></p>
<p><strong>Outside & pool:</strong> <span id="outside_household_total"></span><br />
<span id="outside_household_total_jugs" class="jugs"></span></p>
</div>
<p class="total">Daily: <span class="total_household_day"></span></p>
<p class="total">Weekly: <span class="total_household_week"></span></p>
<p class="total">Monthly: <span class="total_household_month"></span></p>
<p class="total">Yearly: <span class="total_household_year"></span></p>
</div>
<div id="individual_totals" class='hidden' style="margin-top:-30px;">
<div class="sections">
<h3 style="color: #3FA3D5;">Itemized Per Person Usage:</h3>
<p><strong>Shower & bath:</strong> <span id="bath_individual_total"></span><br />
<span id='bath_individual_total_jugs' class="jugs"></span></p>
<p><strong>Toilet:</strong> <span id="toilet_individual_total"></span><br />
<span id="toilet_individual_total_jugs" class="jugs"></span></p>
<p><strong>Sink:</strong> <span id="sink_individual_total"></span><br />
<span id="sink_individual_total_jugs" class="jugs"></span></p>
<p><strong>Dishes by hand:</strong> <span id="hand_individual_total"></span><br />
<span id="hand_individual_total_jugs" class="jugs"></span></p>
<p><strong>Dishwasher:</strong> <span id="dishwasher_individual_total"></span><br />
<span id="dishwasher_individual_total_jugs" class="jugs"></span></p>
<p><strong>Laundry:</strong> <span id="laundry_individual_total"></span><br />
<span id="laundry_individual_total_jugs" class="jugs"></span></p>
<p><strong>Lawn:</strong> <span id="lawn_individual_total"></span><br />
<span id="lawn_individual_total_jugs" class="jugs"></span></p>
<p><strong>Outside & pool:</strong> <span id="outside_individual_total"></span><br />
<span id="outside_individual_total_jugs" class="jugs"></span></p>
</div>
<p class="total">Daily: <span class="total_individual_day"></span></p>
<p class="total">Weekly: <span class="total_individual_week"></span></p>
<p class="total">Monthly: <span class="total_individual_month"></span></p>
<p class="total">Yearly: <span class="total_individual_year"></span></p>
</div>
<br />
<p id="button_left"><img src="img/household1.png" alt="Household total" id="household_button" width="210" /><br />
<span class="total_household_day"></span></p>
<br class="clear" />
<div class="box-people">
<h3 style="margin:0 0 10px 0;">To Calculate Per Person Water Usage:</h3>
<p class="q">
<label for="number_of_people">Select the number of people living in your home</label>
<select name="number_of_people" id="number_of_people">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</p>
</div>
<p id="button_right" ><img src="img/personal.png" alt="Your total selected" id="individual_button" width="210" />
<span class="total_individual_day"></span></p>
<br class="clear" />
<!-- Show estimated bill / savings based on city -->
<!-- <div class="box-people">
<h3 style="margin:0 0 10px 0;">Estimate Water Bill:</h3>
<p class="q">
<label for="city">Select your city</label>
<select name="city" id="city">
--><!-- This will be populated by javascript functions --><!--
</select>
</p>
</div>
<p id="monthly_bill"></p>
<p id="monthly_bill_reduced"></p>
<p id="monthly_savings"></p> -->
<!-- end of city-based bill / savings estimate -->
<br style="clear:both;" />
<br />
<div style="background-color:#B8E5FA; height:40px; margin:10px -20px;"> </div>
<div style="background-color:#B8E5FA; padding: 0 0 20px 20px; margin:-20px -20px;">
</div>
</div>
</form>
<hr class="clear" />
<h3>Comments or questions? See the <a href="faq.html">FAQ</a> or <a href="mailto:water@okstate.edu">email us.</a></h3>
<div style="font-size:11px; line-height:1.4em;">
<img src="//i.creativecommons.org/l/by/3.0/88x31.png" width="88" alt="Creative Commons License" style="margin: 20px 20px 0 0; float:left;" />
<p style="margin-top:20px;">Except where otherwise noted, content on this page is licensed by the <a href="http://WaterMatters.org">Southwest Florida Water Management District</a> under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>.</p>
<p style="margin-top:20px;">This project is funded by the National Science Foundation grant OIA-1301789 through OK NSF EPSCoR <a href="http://www.okepscor.org/">http://www.okepscor.org/</a>.</p>
<p style="margin-top:20px;">This is a product of the Department of Agricultural Economics, Oklahoma State University.</p>
</div></div>
</body>
</html>
