<!DOCTYPE html>
<html>
<head>
<title>Energy Use Calculator</title>
<style>
#numInput
{
width: 40px;
}
.head
{
background: #999999;
padding-left: 5px;
padding-right: 5px;
}
table td:not(.head)
{
background: #CCCCCC
}
table
{
background: black;
}
#inputTable tr td:nth-child(2)
{
width: 200px;
}
div
{
background: #FFFFFF;
}
.center
{
text-align: center;
padding: 5px;
}
div:not(.center)
{
max-width: 500px;
padding: 20px;
}
.red
{
color: red;
}
select .red
{
color: red;
}
</style>
</head>
<body onLoad="advModeCheck(); prevCheck(); updateDone()" style="background: #00e600;">
<div class="center">
<p style="font-size: 35px;"> Energy-use Calculator </p>
<p> Find out how much energy you use </p>
</div>
<br>
<!--[if IE]>
<div class="warning"><p class="warning" style=" padding: 100px; font-weight: bold; color: red; font-size: 40px;"> THIS WEBSITE WILL NOT WORK CORRECTLY FOR YOU BECAUSE OF YOUR WEB BROWSER, PLEASE USE GOOGLE CHROME </p></div>
<![endif]-->
<div id="calculate">
<button onClick="prevSet()">VIEW PREVIOUS CALCULATIONS</button>
<p>Advanced mode: <input id="advMode" type="checkbox" onClick="advModeSet()"></p>
<span>Cost/kW-h: <input id="cost" value="0.80" type="number"></span>
<br>
<br>
<span><input id="numInput" value="1" type="number"> x</span>
<span id="basicMode">
<select id="itemInput">
<option disabled selected value> SELECT ONE </option>
<optgroup label="LIGHTS">
<option value="1"> LED LIGHT </option>
<option value="2"> INCANDECENT LIGHT </option>
<option value="3"> LOW VOLTAGE HALOGEN </option>
<option value="4"> CFW LIGHT </option>
</optgroup>
<optgroup label="KITCHEN">
<option value="5"> FRIDGE </option>
<option value="6" class="red"> *OVEN* </option>
<option value="13" class="red"> *MICROWAVE* </option>
<option value="14" class="red"> *TOASTER* </option>
</optgroup>
<optgroup label="OFFICE">
<option value="7"> COMPUTER </option>
<option value="8"> LCD MONITOR </option>
<option value="9"> CRT (OLD) MONITOR </option>
</optgroup>
<optgroup label="GENERAL">
<option value="10"> CLOCK </option>
</optgroup>
<optgroup label="LAUNDRY">
<option value="11" class="red"> *WASHING MACHINE* </option>
<option value="12" class="red"> *DRYER* </option>
</optgroup>
</select>
<button onClick="insertTable()">SUBMIT</button></span>
<span id="advancedMode"><input id="itemInputAdv" type="number">Watts
<button onClick="insertTable()">SUBMIT</button></span>
<p> Power Usage: <span id="wattage">0</span> kW/h *<sup><sup style="font-size: 8px;">1</sup></sup></p>
<p> Cost: <span id="caledCost">0</span> $/h *<sup><sup style="font-size: 8px;">1</sup></sup></p>
<button onClick="done()">RESET/SAVE RESULTS</button>
<br>
<p> *<sup><sup style="font-size: 8px;">1</sup></sup>: Per Hour (one hour of full usage), watts are estimates only and, are not accurate</p>
<p> *<span style="color: red;">RED</span>*: Recommended not to use, these items are typically not used constantly. <br> <span style="color: red; font-weight: bold;">Note: The Red coloring will not work on some browsers.</span></p>
</div>
<div style="position: relative; bottom: 395px; float: right;">
<p> List of Inputs: </p>
<table id="inputTable">
<tr>
<td class="head">#</td>
<td class="head">Item</td>
</tr>
</table>
<br>
</div>
<div id="prev">
<button onClick="prevSet()">CALCULATE</button>
<br>
<br>
<table>
<tr>
<td class="head">Date</td>
<td class="head">kW/h</td>
<td class="head">$/h</td>
<td><button onClick="clearDone1(); clearDone2(); clearDone3(); clearDone4(); clearDone5()">CLEAR</button></td>
</tr>
<tr>
<td id="time1"> </td>
<td id="kwh1"> </td>
<td id="cost1"> </td>
<td><button onClick="clearDone1()">CLEAR</button></td>
</tr>
<tr>
<td id="time2"> </td>
<td id="kwh2"> </td>
<td id="cost2"> </td>
<td><button onClick="clearDone2()">CLEAR</button></td>
</tr>
<tr>
<td id="time3"> </td>
<td id="kwh3"> </td>
<td id="cost3"> </td>
<td><button onClick="clearDone3()">CLEAR</button></td>
</tr>
<tr>
<td id="time4"> </td>
<td id="kwh4"> </td>
<td id="cost4"> </td>
<td><button onClick="clearDone4()">CLEAR</button></td>
</tr>
<tr>
<td id="time5"> </td>
<td id="kwh5"> </td>
<td id="cost5"> </td>
<td><button onClick="clearDone5()">CLEAR</button></td>
</tr>
</table>
</div>
<script>
var wattage = 0;
var caledWattage = 0;
var cost = 0;
var caledCost = 0;
var noReset = 0;
var advMode = "false";
var prev = "false";
if (localStorage.advMode != "true")
{
localStorage.advMode = "false";
}
if (localStorage.prev != "true")
{
localStorage.prev = "false";
}
var table = document.getElementById("inputTable");
var numInput = document.getElementById("numInput").value;
// LIGHTS
var value1 = "LED LIGHT";
var value2 = "INCANDECENT LIGHT";
var value3 = "LOW VOLTAGE HALOGEN";
var value4 = "CFW LIGHT";
// KITCHEN
var value5 = "FRIDGE";
var value6 = "OVEN";
var value13 = "MICROWAVE";
var value14 = "TOASTER";
// OFFICE
var value7 = "COMPUTER";
var value8 = "LCD MONITOR";
var value9 = "CRT (OLD) MONITOR";
// GENERAL
var value10 = "CLOCK";
// LAUNDRY
var value11 = "WASHING MACHINE";
var value12 = "DRYER";
function advModeSet()
{
advMode = localStorage.advMode;
if (advMode === "false")
{
localStorage.advMode = "true";
}
else if (advMode === "true")
{
localStorage.advMode = "false";
}
advModeCheck()
}
function advModeCheck()
{
advMode = localStorage.advMode;
if (advMode === "true")
{
document.getElementById("advancedMode").style.display = "initial";
document.getElementById("basicMode").style.display = "none";
document.getElementById("advMode").checked = true;
}
else if (advMode === "false")
{
document.getElementById("advancedMode").style.display = "none";
document.getElementById("basicMode").style.display = "initial";
}
}
function prevSet()
{
prev = localStorage.prev;
if (prev === "false")
{
localStorage.prev = "true";
}
else if (prev === "true")
{
localStorage.prev = "false";
}
prevCheck()
}
function prevCheck()
{
prev = localStorage.prev;
if (prev === "true")
{
document.getElementById("prev").style.display = "block";
document.getElementById("calculate").style.display = "none";
document.getElementById("itemInputAdv").value = null;
}
else if (prev === "false")
{
document.getElementById("prev").style.display = "none";
document.getElementById("calculate").style.display = "block";
document.getElementById("itemInput").value = null;
}
}
function insertTable()
{
row = table.insertRow(1);
num = row.insertCell(0);
item = row.insertCell(1);
numInput = document.getElementById("numInput").value;
itemInputValue = Number(document.getElementById("itemInput").value);
{
num.innerHTML = numInput;
nameDecryptor();
calculate()
}
} function nameDecryptor()
{
if (itemInputValue === 1)
{
item.innerHTML = value1;
}
if (itemInputValue === 2)
{
item.innerHTML = value2;
}
if (itemInputValue === 3)
{
item.innerHTML = value3;
}
if (itemInputValue === 4)
{
item.innerHTML = value4;
}
if (itemInputValue === 5)
{
item.innerHTML = value5;
}
if (itemInputValue === 6)
{
item.innerHTML = value6;
}
if (itemInputValue === 7)
{
item.innerHTML = value7;
}
if (itemInputValue === 8)
{
item.innerHTML = value8;
}
if (itemInputValue === 9)
{
item.innerHTML = value9;
}
if (itemInputValue === 10)
{
item.innerHTML = value10;
}
if (itemInputValue === 11)
{
item.innerHTML = value11;
}
if (itemInputValue === 12)
{
item.innerHTML = value12;
}
if (itemInputValue === 13)
{
item.innerHTML = value13;
}
if (itemInputValue === 14)
{
item.innerHTML = value14;
}
else if (document.getElementById("itemInputAdv").value != 0)
{
item.innerHTML = document.getElementById("itemInputAdv").value;
}
}
function calculate()
{
// LED LIGHT
if (itemInputValue === 1)
{
wattage = wattage + (10 * numInput);
}
if (itemInputValue === 2)
{
wattage = wattage + (60 * numInput);
}
if (itemInputValue === 3)
{
wattage = wattage + (30 * numInput);
}
if (itemInputValue === 4)
{
wattage = wattage + (14 * numInput);
}
if (itemInputValue === 5)
{
wattage = wattage + (700 * numInput);
}
if (itemInputValue === 6)
{
wattage = wattage + (4000 * numInput);
}
if (itemInputValue === 7)
{
wattage = wattage + (200 * numInput);
}
if (itemInputValue === 8)
{
wattage = wattage + (30 * numInput);
}
if (itemInputValue === 9)
{
wattage = wattage + (60 * numInput);
}
if (itemInputValue === 10)
{
wattage = wattage + (3 * numInput);
}
if (itemInputValue === 11)
{
wattage = wattage + (500 * numInput);
}
if (itemInputValue === 12)
{
wattage = wattage + (5000 * numInput);
}
if (itemInputValue === 13)
{
wattage = wattage + (1400 * numInput);
}
if (itemInputValue === 14)
{
wattage = wattage + (1100 * numInput);
}
else
{
wattage = wattage + (Number(document.getElementById("itemInputAdv").value) * numInput)
}
caledWattage = wattage / 1000;
document.getElementById("wattage").innerHTML = caledWattage;
cost = document.getElementById("cost").value;
caledCost = caledWattage * cost;
document.getElementById("caledCost").innerHTML = caledCost;
}
function done()
{
if (localStorage.done1 != "full")
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
localStorage.done1 = "full";
localStorage.time1 = String(day) + "/" + String(month + 1) + "/" + String(year);
localStorage.kwh1 = caledWattage;
localStorage.cost1 = caledCost;
}
else if (localStorage.done2 != "full")
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
localStorage.done2 = "full";
localStorage.time2 = String(day) + "/" + String(month + 1) + "/" + String(year);
localStorage.kwh2 = caledWattage;
localStorage.cost2 = caledCost;
}
else if (localStorage.done3 != "full")
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
localStorage.done3 = "full";
localStorage.time3 = String(day) + "/" + String(month + 1) + "/" + String(year);
localStorage.kwh3 = caledWattage;
localStorage.cost3 = caledCost;
}
else if (localStorage.done4 != "full")
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
localStorage.done4 = "full";
localStorage.time4 = String(day) + "/" + String(month + 1) + "/" + String(year);
localStorage.kwh4 = caledWattage;
localStorage.cost4 = caledCost;
}
else if (localStorage.done5 != "full")
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
localStorage.done5 = "full";
localStorage.time5 = String(day) + "/" + String(month + 1) + "/" + String(year);
localStorage.kwh5 = caledWattage;
localStorage.cost5 = caledCost;
}
else
{
alert("LOCAL STORAGE FULL, PLEASE DELETE IT");
noReset = 1;
}
if (noReset != 1)
{
document.getElementById("inputTable").deleteRow(1);
var table = document.getElementById("inputTable");
var rows = table.rows;
var i = rows.length;
while (--i)
{
rows[i].parentNode.removeChild(rows[i]);
}
wattage = 0;
caledWattage = 0;
cost = 0;
caledCost = 0;
document.getElementById("wattage").innerHTML = caledWattage;
cost = document.getElementById("cost").value;
document.getElementById("caledCost").innerHTML = caledCost;
updateDone();
}
noReset = "0";
}
function updateDone()
{
document.getElementById("time1").innerHTML = localStorage.time1;
document.getElementById("kwh1").innerHTML = localStorage.kwh1;
document.getElementById("cost1").innerHTML = localStorage.cost1;
document.getElementById("time2").innerHTML = localStorage.time2;
document.getElementById("kwh2").innerHTML = localStorage.kwh2;
document.getElementById("cost2").innerHTML = localStorage.cost2;
document.getElementById("time3").innerHTML = localStorage.time3;
document.getElementById("kwh3").innerHTML = localStorage.kwh3;
document.getElementById("cost3").innerHTML = localStorage.cost3;
document.getElementById("time4").innerHTML = localStorage.time4;
document.getElementById("kwh4").innerHTML = localStorage.kwh4;
document.getElementById("cost4").innerHTML = localStorage.cost4;
document.getElementById("time5").innerHTML = localStorage.time5;
document.getElementById("kwh5").innerHTML = localStorage.kwh5;
document.getElementById("cost5").innerHTML = localStorage.cost5;
}
function clearDone1()
{
localStorage.done1 = "";
localStorage.time1 = "";
localStorage.kwh1 = "";
localStorage.cost1 = "";
updateDone();
}
function clearDone2()
{
localStorage.done2 = "";
localStorage.time2 = "";
localStorage.kwh2 = "";
localStorage.cost2 = "";
updateDone();
}
function clearDone3()
{
localStorage.done3 = "";
localStorage.time3 = "";
localStorage.kwh3 = "";
localStorage.cost3 = "";
updateDone();
}
function clearDone4()
{
localStorage.done4 = "";
localStorage.time4 = "";
localStorage.kwh4 = "";
localStorage.cost4 = "";
updateDone();
}
function clearDone5()
{
localStorage.done5 = "";
localStorage.time5 = "";
localStorage.kwh5 = "";
localStorage.cost5 = "";
updateDone();
}
</script>
</body>
</html>