I am trying to do the below using HTML, CSS and JavaScript:
Category (Coffee Appliance) drop down
product (Kurig Coffe Maker) drop down
Wattage : 1500kWh (pre polulated using Local Storage)
Daily Energy Consumption (1,500 W × 1) ÷ 1,000 = 1.5 kWh
Annual energy consumption: User enters no of Days used.(365) 1.5 kWh × 365 = 547.5 kWh
Annual cost: The utility rate is 11 cents per kWh. (User enters utility rate as per his geography) 547.5 kWh × $0.11/kWh = $60.23/year
ALSO : Please find my attempt at writing the PSEUDO CODE in the JS file as comments. Can you please guide me if I am on the the right path.
What is working :Dropdowns
function configureDropDownLists(category, products) {
var refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS');
var dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');
<!-- begin snippet: js hide: false -->#leftColumn {
width: 500px;
float: left;
}
.placeholderText {
font: bold 12px/30px Georgia, serif;
}
body {
padding-left: 45px;
}
#annualEnergyConsumption {
font: bold 25px arial, sans-serif;
color: #00ff00;
}
#annualCostOperation {
font: bold 40px arial, sans-serif;
color: #00ff00;
}
.dailyButInline {
display: inline;
}
/* mouse over link */
button:hover {
background-color: #00ff00;
}
/* selected link */
button:active {
background-color: #00ff00;
}<h2>Annual Energy Consumption and Cost Calculator</h2>
<form id="costForm">
<div id="leftColumn">
<div>
<span class="placeholderText">Choose Category</span>
</br>
<span>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('products'))">
<option value="">Select a Category</option>
<option value="refrigerators">Refrigerators</option>
<option value="dishWasher">DishWasher</option>
</select>
</span>
</br>
</br>
</div>
<div>
<span class="placeholderText">Select a Product</span>
</br>
<span>
<select id="products">
<option selected>--------------------------</option>
</select>
</span>
</br>
</br>
</div>
<div>
<span class="placeholderText">Wattage</span>
</br>
<span id="wattage">1500</span>
</br>
</br>
</div>
<div id="buttonBoundary">
<div class="placeholderText">Estimated Daily Use</div>
<div class="dailyButInline">
<button id="h1">Not a Lot</br>1 hour per day</button>
</div>
<div class="dailyButInline">
<button id="h3">Average</br>3 hour per day</button>
</div>
<div class="dailyButInline">
<button id="h6">A Lot</br>6 hour per day</button>
</div>
<div class="dailyButInline">
<button id="h24">Always On</br>24 hours per day</button>
</div>
</br>
</br>
</div>
<div>
<span class="placeholderText">Daily Energy Consumption</span>
</br>
<div id="annualEnergyConsumption">0.268 kWh</div>
</br>
</div>
<div>
<span class="placeholderText">Approximate Days used per year</span>
</br>
<div id="daysUsed">
<input type="number" id="hour" maxlength="2" min="1">
</br>
<input type="checkbox" id="allYear" />
<label for="allYear">All year</label>
</div>
</br>
</div>
<div>
<span class="placeholderText">Annual Energy Consumption</span>
</br>
<div id="annualEnergyConsumption">547.5 kWh</div>
</br>
</div>
</div>
<div id="right">
<div>
<span class="placeholderText">Enter your Utility Rate per Kw/h</span>
</br>
<span><input type="number" id="utilityRate" /></span>
</br>
</br>
</div>
<div>
<span class="placeholderText"><button id="annualCost">Annual Cost to Operate</button></span>
</br>
<span id="annualCostOperation" /></span>
</div>
</div>
</form>
</body> switch (category.value) {
case 'refrigerators':
products.options.length = 0;
for (i = 0; i < refrigerators.length; i++) {
createOption(products, refrigerators[i], refrigerators[i]);
}
break;
case 'dishWasher':
products.options.length = 0;
for (i = 0; i < dishWasher.length; i++) {
createOption(products, dishWasher[i], dishWasher[i]);
}
break;
default:
products.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
/*
dailyEnergyConsumption = function()
initialize dailyEnergyConsumption = null; Check what the user has selected from the products drop down and display that unique wattage. Wattage is stored is stored in Local Storage. it will be called based on what product is selected.
Store and Call the selected wattage as we need that to calculate Daily Energy Consumption
Track the 4 buttons with an Event Listener (Estimated Daily Use)
Based on the above pass wattage to the formula (1,500 W × 1) ÷ 1,000 = 1.5 kWh Display and store 1.5 Kwh Make sure the Category and Products drop down don’t get reset. }
annualEnergyConsumption = function() { take the variable from dailyEnergyConsumption and multiply that by no of days the user enters 1.5 kWh × 365 (days) = 547.5 kWh Store it do not display this Pass it to annual Cost function }
annualCost = function() { take 547.5 Kwh from annualEnergyConsumption function capture what the user enters in Utility Rate textbox (11 cents per K Wh) So ( Calculate 547.5 kWh × $0.11/kWh = $60.23/year) Display 60.23 /year }
*/
#leftColumn {
width: 500px;
float: left;
}
.placeholderText {
font: bold 12px/30px Georgia, serif;
}
body {
padding-left: 45px;
}
#annualEnergyConsumption {
font: bold 25px arial, sans-serif;
color: #00ff00;
}
#annualCostOperation {
font: bold 40px arial, sans-serif;
color: #00ff00;
}
.dailyButInline {
display: inline;
}
/* mouse over link */
button:hover {
background-color: #00ff00;
}
/* selected link */
button:active {
background-color: #00ff00;
}
<h2>Annual Energy Consumption and Cost Calculator</h2>
<form>
<div id="leftColumn">
<div>
<span class="placeholderText">Choose Category</span>
</br>
<span>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('products'))">
<option value="">Select a Category</option>
<option value="refrigerators">Refrigerators</option>
<option value="dishWasher">DishWasher</option>
</select>
</span>
</br>
</br>
</div>
<div>
<span class="placeholderText">Select a Product</span>
</br>
<span>
<select id="products">
<option selected>--------------------------</option>
</select>
</span>
</br>
</br>
</div>
<div>
<span class="placeholderText">Wattage</span>
</br>
<span id="wattage">1500</span>
</br>
</br>
</div>
<div id="buttonBoundary">
<div class="placeholderText">Estimated Daily Use</div>
<div class="dailyButInline">
<button id="h1">Not a Lot</br>1 hour per day</button>
</div>
<div class="dailyButInline">
<button id="h3">Average</br>3 hour per day</button>
</div>
<div class="dailyButInline">
<button id="h6">A Lot</br>6 hour per day</button>
</div>
<div class="dailyButInline">
<button id="h24">Always On</br>24 hours per day</button>
</div>
</br>
</br>
</div>
<div>
<span class="placeholderText">Approximate Days used per year</span>
</br>
<div id="daysUsed">
<input type="number" id="hour" maxlength="2" min="1">
</br>
<input type="checkbox" id="allYear" />
<label for="allYear">All year</label>
</div>
</br>
</div>
<div>
<span class="placeholderText">Enter your Utility Rate per Kw/h</span>
</br>
<span><input type="number" id="utilityRate" /></span>
</br>
</br>
</div>
</div>
<div id="right">
<div>
<span class="placeholderText">Annual Energy Consumption</span>
</br>
<div id="annualEnergyConsumption">547.5 kWh</div>
</br>
</div>
<div>
<span class="placeholderText">Annual Cost to Operate</span>
</br>
<span id="annualCostOperation" />$10.76 / year</span>
</div>
</div>
</form>
