-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBano.html
204 lines (156 loc) · 8.76 KB
/
Bano.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Baño</title>
<link rel="stylesheet" href="./css/styleBano.css">
<link rel="stylesheet" href="./css/styleIndex.css">
</head>
<body>
<header>
<h1>Electrodomésticos que puedes tener en tu baño</h1>
<nav id="vinculos">
<a href="index.html" id="inicioLink">Página Principal</a>
<a href="Salon.html" id="salonLink">Salón</a>
<a href="Cocina.html" id="cocinaLink">Cocina</a>
<a href="Dormitorio.html" id="dormitorioLink">Dormitorio</a>
<a href="Lavanderia.html" id="lavanderiaLink">Lavandería</a>
</nav>
</header>
<main>
<!--Listado de electrodomésticos de un baño-->
<h2>
Aquí puedes consultar el consumo de electricidad que tenrás en el día de hoy.
</h2>
<p>
El precio de esta hora es:
<p id="precioHora"></p>
</p>
<p id="textoLista">
A continuación te presentamos un listado de electrodomésticos:
</p>
<section id="electrodomesticos" aria-label="Listado de electrodomésticos de un baño">
<!--Section es un contenedor-->
<li>
<input type="checkbox" id="secadoraPelo" name="secadoraPelo">
<label for="secadoraPelo"><h3>Secadora de pelo</h3></label>
<img src="./img/baño/secadoraSmall.jpg" alt="Una imagen que muestra una secadora de pelo" id="img">
<p>El consumo de electricidad de una secadora de pelo es de 0.0016 MW</p>
<li>
<input type="checkbox" id="secadoraPelo" name="secadoraPelo">
<label for="secadoraPelo">
<h3>Secadora de pelo</h3>
</label>
<img src="./img/baño/secadoraSmall.jpg" alt="Una imagen que muestra una secadora de pelo" id="img">
<p>El consumo de electricidad de una secadora (MV/h)</p>
<!-- CON JS CREAR <p> para meter -> <p>Gasto de luz en el día presente Mv/h</p>
-->
</li>
<li>
<input type="checkbox" id="calefactor" name="calefactor">
<label for="calefactor"><h3>Calefactor</h3></label>
<img src="./img/baño/calefactorSmall.jpg" alt="Una imagen de un calefactor eléctrico" id="img">
<p>El consumo de electricidad de un calefactor 0.0015 MW</p>
<!-- Con JS <p> Gasto de luz el día de hoy Mv/h<p> -->
</li>
<li>
<input type="checkbox" id="maquinaAfeitar" name="maquinaAfeitar">
<label for="maquinaAfeitar"><h3>Máquina de afeitar</h3></label>
<img src="./img/baño/máquinaDeAfeitarSmall.jpg" alt="Una imagen de una máquina eléctrica de afeitar." id="img">
<p>El consumo de electricidad de una máquina de afeitar 0.000005 MW</p>
<!--Con JS <p>Gasto de luz en el día presente Mv/h<p> -->
</li>
<li>
<input type="checkbox" id="depiladora" name="depiladora">
<label for="depiladora"><h3>Depiladora</h3></label>
<img src="./img/baño/depiladoraSmall.jpg" alt="Una imagen de una depiladora con sus accesorios" id="img">
<p>El consumo de electricidad de una depiladora 0.00004 MW </p>
</li>
<li>
<input type="checkbox" id="planchaPelo" name="planchaPelo">
<label for="planchaPelo"><h3>Plancha de pelo</h3></label>
<img src="./img/baño/planchaDePeloSmall.jpg" alt="Una imagen de una plancha de pelo." id="img">
<p>El consumo de electricidad de una plancha de pelo 0.001 MW </p>
<!--<p>Gasto de luz en el día presente Mv/h</p> -->
</li>
<li>
<input type="checkbox" id="cepilloDientes" name="cepillo">
<label for="cepillo"><h3>Cepillo eléctrico de diente</h3></label>
<img src="./img/baño/cepilloDeDientesSmall.jpg" alt="Una imagen de un cepillo de dientes eléctrico." id="img">
<p>El consumo de electricidad de un cepillo de dientes 0.000035 MW </p>
<li>
<input type="checkbox" id="maquinaAfeitar" name="maquinaAfeitar">
<label for="maquinaAfeitar">
<h3>Máquina de afeitar</h3>
</label>
<img src="./img/baño/máquinaDeAfeitarSmall.jpg"
alt="Una imagen de una máquina eléctrica de afeitar." id="img">
<p>El consumo de electricidad de una máquina de afeitar (MV/h)</p>
<!--Con JS <p>Gasto de luz en el día presente Mv/h<p> -->
</li>
<li>
<input type="checkbox" id="depiladora" name="depiladora">
<label for="depiladora">
<h3>Depiladora</h3>
</label>
<img src="./img/baño/depiladoraSmall.jpg" alt="Una imagen de una depiladora con sus accesorios"
id="img">
<p>El consumo de electricidad de una depiladora (MV) </p>
</li>
<li>
<input type="checkbox" id="planchaPelo" name="planchaPelo">
<label for="planchaPelo">
<h3>Plancha de pelo</h3>
</label>
<img src="./img/baño/planchaDePeloSmall.jpg" alt="Una imagen de una plancha de pelo." id="img">
<p>El consumo de electricidad de una plancha de pelo (MV/h)</p>
<!--<p>Gasto de luz en el día presente Mv/h</p> -->
</li>
<section id="resultadoFinal" aria-label="Resultado total del consumo de los electrodomésticos seleccionados">
<div>
<input class="button" type="button" value="Calcular" onclick="consumoTotal()" />
</div>
<h3 id="mensajeTotal"> ¡Aquí aparecerá tu consumo por hora en MW!</h3>
</section>
<input type="checkbox" id="cepilloDientes" name="cepillo">
<label for="cepillo">
<h3>Cepillo eléctrico de diente</h3>
</label>
<img src="./img/baño/cepilloDeDientesSmall.jpg" alt="Una imagen de un cepillo de dientes eléctrico."
id="img">
<p>El consumo de electricidad de un cepillo de dientes (MV/h)</p>
<!--<p>Gasto de luz en el día presente Mv/h</p> -->
</li>
<li>
<input type="checkbox" id="toallero" name="toallero">
<label for="toallero">
<h3>Toallero eléctrico</h3>
</label>
<img src="./img/baño/toalleroSmall.jpg" alt="Una imagen de un toallero eléctrico." id="img">
<p>El consumo de electricidad de un toallero (MV/h)</p>
<!--<p>Gasto de luz en el día presente Mv/h</p> -->
</li>
</ul>
</section>
<!--Otra sectión con los resultados de los checkbox seleccionados por el usuario-->
<!--Para enviar los checkbox seleccionados un botón submit, y posiblemente un <outpuut> para mostrar el resultado del cálculo que es lanzado desde JS -->
<section id="resultadoFinal" aria-label="Resultado total del consumo de los electrodomésticos seleccionados">
<div>
<input class="button" type="button" value="Calcular" onclick="consumoTotal()" />
</div>
<h3 id="mensajeTotal"> ¡Aquí aparecerá tu consumo por hora en €!</h3>
</section>
<!-- OPCIONAL: si nos da tiempo, mostrar aquí también la mejor y peor hora para utilizar los electrodomésticos -->
</main>
<footer>
<h3 id="h3Footer">Práctica Hack a Boss</h3>
<h4>Integrantes de equipo</h4>
<p>Roberto</p>
<p>Inez</p>
<p>Salvador</p>
<p>German</p>
</footer>
<script src="/js/banoMain.js"></script>
</body>
</html>