-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (182 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--linking javascript and css-->
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript" src="file.js"></script>
<title>Energy Calculator</title>
</head>
<!--load the onLoadFunction() when the page loads and set the type of user-->
<body onload=onloadFunction()>
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">Energy Calculator</span>
<form class="form-inline my-2 my-lg-0">
<button class="navbar-toggler" onclick="setUser('Naive', 0)" type="button">Naive</button>
<button class="navbar-toggler" onclick="setUser('Novice', 2)" type="button">Novice</button>
<button class="navbar-toggler" onclick="setUser('Typical', 7)" type="button">Typical</button>
<button class="navbar-toggler" onclick="setUser('Advanced', 12)" type="button">Advanced</button>
</form>
</nav>
<!--contains all the body content except the footer-->
<!--to make applying page padding easier-->
<div class="body-container">
<div class="intro-content">
<h1>Energy Calculator</h1>
<h4>How much electricity do your devices use? What is the cost of eletricity used each time you charge your laptop?</h4>
</div>
<p>Determining how much electricity your appliances and home electronics use can help you understand how much money you are spending to use them. To use this calculator, you simply need to enter the wattage of your devices and the time they have been plugged. After this the calculator will tell you your energy usage and the cost of using the devices.The calculations are based on <a href="https://www.electricchoice.com/electricity-prices-by-state/">average rates of electricity per kWh</a> which is 13.19 cents.</p><br />
<h6>How to find the wattage of a device:</h6>
<ul>
<li>Stamped on the charger of appliance: It is usually stamped on the charger and the wattage listed is the maximum power drawn by the device.</li>
<li>Multiply the appliance ampere usage by the appliance voltage usage: If the wattage is not listed, it can still be estimated by multiplying the current drawn (in amperes for e.g. listed as 1.5A) with the voltage of the appliance. Most devices in the USA use 120 volts.</li>
<li>Use online resources to find the typical wattage of your device</li>
</ul>
<!--PROGRESS BAR (bootstrap)-->
<div class="progress">
<div id="progress-bar" class="progress-bar bg-warning" role="progressbar" style="width: 0%"></div>
</div>
<!--POPOVER-->
<button id="expand-check-energy" style="display:none" onclick="myInput()" class="btn btn-info mb-5" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Click here to check your energy usage. You will be asked to input some numbers. That's it!">Check your energy usage</button>
<!--NAIVE USER-->
<div id="naive" style="display:none">
<!--COACH MARK-->
<!--Add inputs, calculate button and coachmark-->
<form>
<!--Add dropdown-->
<select class="btn btn-secondary dropdown-toggle mb-2">
<option value="desktop">Desktop</option>
<option value="laptop">Laptop</option>
<option value="tablet">Tablet</option>
<option value="mobile">Mobile</option>
<option value="smartwatch">Smartwatch</option>
</select><br />
<!--power input-->
<div class="input-group mb-3 w-50">
<input id="userwattinput_naive" type="number" class="form-control" onkeydown="step1a()" required>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Watts</span>
</div>
<b id="step1a">< Enter Power in Watts</b>
</div>
<!--time used input-->
<div class="input-group mb-3 w-50">
<input id="userhourinput_naive" type="number" class="form-control" onkeydown="step1b()" required>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Hours</span>
</div>
<b id="step1b">< Enter Time used in Hours</b>
</div>
</form>
<!--button to calculate output-->
<button id="calculate_naive" class="btn btn-secondary" onclick="calcTotalEnergyAndCost()">Calculate Energy and Cost</button>
<b id="step2" style="display:none"> ^ Press Calculate</b>
<p id="showtotalcost_naive"></p>
</div>
<!--NOVICE-->
<div id="novice" style="display:none">
<form class="form-inline">
<!--Add dropdown-->
<select class="btn btn-secondary dropdown-toggle mb-2 mr-3">
<option value="desktop">Desktop</option>
<option value="laptop">Laptop</option>
<option value="tablet">Tablet</option>
<option value="mobile">Mobile</option>
<option value="smartwatch">Smartwatch</option>
</select>
<!--power input-->
<div class="input-group mb-3 mr-3 w-25">
<input id="userwattinput_novice" type="number" class="form-control" placeholder="Enter power in Watts" required>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Watts</span>
</div>
</div>
<!--time used input-->
<div class="input-group mb-3 w-25">
<input id="userhourinput_novice" type="number" class="form-control" placeholder="Enter time used in hours" required>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Hours</span>
</div>
</div>
</form>
<!--button to calculate output-->
<button class="btn btn-secondary" onclick="calcTotalEnergyAndCostNovice()">Calculate Energy and Cost</button>
<p id="showtotalcost_novice"></p>
</div>
<!--COMMON PATTERNS FOR TYPICAL AND ADVANCED USER-->
<div id="advanced" style="display:none">
<div id="expanded"></div>
<!--add another row of options-->
<button id="add" class="btn btn-warning my-2 mr-3" onclick="addMore()">Add More</button>
<!--OVERFLOW MENU-->
<!--only for advanced users-->
<button id="OverflowButton" class="btn btn-secondary my-2" onclick="myOverflow()" style="display:none">Settings</button>
<div id="settingsselect" style="display:none">
<label class="radio-label"><input class="radio-input" type=radio name="optradio" id="set1" name=myradio>kWh</label>
<label class="radio-label"><input class="radio-input" type=radio name="optradio" id="set2" name=myradio>Joules</label>
<label class="radio-label"><input class="radio-input" type=radio name="optradio" id="set3" name=myradio>KwH and Joules</label>
</div>
<!--EXPANDABLE-->
<!--calculate energy use-->
<button id="calculate" class="btn btn-info my-2" onclick="calcTotalEnergy()">Calculate Energy</button>
<p id="showtotalenergy"></p>
<!--calculate cost of energy use-->
<button id="cost" class="btn btn-info my-2" onclick="calcCostInCents()" style="display:none">Calculate Cost</button>
<p id="showtotalcost"></p>
</div>
<div>
<h4> How can you reduce your energy usage? </h4>
<p>Many appliances continue to draw a small amount of stand-by power when they are switched "off." These "phantom loads" occur in most appliances that use electricity, such as televisions, stereos, computers, and kitchen appliances. Most phantom loads will increase the appliance's energy consumption a few watt-hours, and you can use a monitor to estimate those too.</p>
</div>
<!--HIDDEN INFORMATION-->
<button type="button" class="btn btn-info mb-4" onclick="document.getElementById('moreinfo').style.display='block'">More Info...</button>
<div style="display:none" id="moreinfo">
<p>These loads can be avoided by the following methods:</p>
<ul>
<li>Unplug the appliance when not in use</li>
<li>Use a power strip with switches to selectively cut off supply to appliances when they are plugged in and not in use</li>
<li>Delete screensavers which create random patterns on your screen when your PC is idle. They were designed to protect cathode-ray screens from local wear and no longer serve any purpose with LCD screens.</li>
</ul><a href="https://www.energy.gov/energysaver/save-electricity-and-fuel/appliances-and-electronics/estimating-appliance-and-home">More information can be found here.</a>
</div>
<!--FEATURED CONTENT-->
<!--only for advanced users-->
<div class="row mb-2" id="featured-content" style="display:none">
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow-sm h-md-200">
<div class="card-body d-flex flex-column align-items-start">
<h5 class="mb-0">Top 5 Steps to Reduce Your Energy Consumption</h5>
<p class="card-text mb-auto">Computers are some of the biggest energy users in office buildings. LED bulbs are the most energy efficient lighting option...</p>
<a href="https://green.harvard.edu/tools-resources/poster/top-5-steps-reduce-your-energy-consumption">Continue reading</a>
</div>
<img class="card-img-right flex-auto d-none d-md-block" style="width: 200px; height: 200px;" src="images/bulb.jpg" data-holder-rendered="true">
</div>
</div>
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow-sm h-md-200">
<div class="card-body d-flex flex-column align-items-start">
<h5 class="mb-0">How does saving energy help the environment?
</h5>
<p class="card-text mb-auto">Although it may not be obvious, there’s a direct connection between your energy use and the environment. When you consume less power, you...</p>
<a href="https://www.saveonenergy.com/learning-center/energy-saving-tips/how-does-saving-energy-help-the-environment/">Continue reading</a>
</div>
<img class="card-img-right flex-auto d-none d-md-block" style="width: 200px; height: 200px;" src="images/ecosystem.jpg" data-holder-rendered="true">
</div>
</div>
</div>
</div>
<!--footer-->
<footer class="blog-footer">
<p>Posted by: Harshika Jain</p>
<p>Contact information:<a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>
<!--document scripts of bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>