-
Notifications
You must be signed in to change notification settings - Fork 4
/
taller3.html
306 lines (299 loc) · 14.1 KB
/
taller3.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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http`-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Ingresa a esta calculardora de áreas y perímetros del cuadrado, triangulo y circulo"
/>
<meta
name="keywords"
content="HTML, CSS, JavaScript, sass, calculadore. "
/>
<meta name="author" content="Emanuel Sandries" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index,follow" />
<title>Curso Práctico JS</title>
<meta property="og:title" content="Calculadora de áreas y perimetros" />
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://javascript-basico.netlify.app/taller1.html"
/>
<meta property="og:image" content="./images/thumbnail-talle1.png" />
<link rel="stylesheet" href="./css/master.css" />
</head>
<body>
<header class="ESandries--header">
<div class="esandries--wrapper">
<div class="Header--logo">
<svg
width="46"
height="35"
viewBox="0 0 46 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M45.4477 0.0451731L45.4477 0.0452562L45.4477 0.0453215C45.4427 0.0776748 45.4377 0.110056 45.4376 0.142437C45.4369 2.10434 45.4369 4.06625 45.4369 6.02816L45.4369 6.86253V7.01236H45.3004H34.9539C33.2149 7.01236 31.7485 8.26694 31.4872 9.98858C31.456 10.1942 31.4564 10.4058 31.4568 10.6154L31.4569 10.6959C31.4558 13.3388 31.4563 15.9817 31.4567 18.6246L31.4571 20.8907V20.9914C31.4123 20.9914 31.3681 20.9922 31.3243 20.993H31.3243H31.3243H31.3243C31.2312 20.9947 31.14 20.9964 31.0495 20.9902C29.3839 20.8779 27.9279 20.266 26.7055 19.1269C25.489 17.9937 24.7708 16.5929 24.5389 14.9471C24.4949 14.6349 24.4759 14.3168 24.4753 14.0014C24.4701 11.6814 24.4668 9.36136 24.4742 7.04132C24.4802 5.17285 25.1159 3.5444 26.4013 2.18507C27.5065 1.01645 28.864 0.317309 30.4562 0.0816529C30.5968 0.0608482 30.7387 0.0487802 30.8806 0.0367121L30.8806 0.0367099C30.9534 0.0305191 31.0261 0.024328 31.0987 0.0169574C31.1141 0.0154141 31.1291 0.0107911 31.1442 0.00615894L31.1442 0.0061541C31.1512 0.00400184 31.1582 0.00184782 31.1652 0L45.4543 8.75736e-05C45.4524 0.0150533 45.4501 0.0300277 45.4478 0.045008L45.4478 0.0450904L45.4477 0.0451731ZM24.4691 0.000298948C24.4603 0.00824782 24.4518 0.0167211 24.4433 0.0251891C24.4257 0.0427519 24.4081 0.0602917 24.3876 0.0730817C22.6733 1.13988 21.5834 2.65321 21.1445 4.62715C20.9772 5.37942 20.9485 6.14117 21.0416 6.90683C21.044 6.9268 21.0446 6.94704 21.0452 6.97062V6.97066V6.97071L21.0457 6.98738L21.0465 7.0091H20.8958L0.146059 7.00918C0.113162 7.00918 0.0802654 7.01018 0.0473686 7.01117L0.000298948 7.01249V6.49074C0.00235116 6.48269 0.00468763 6.47468 0.00702361 6.46667C0.0121078 6.44923 0.0171897 6.4318 0.0193336 6.41404C0.0274885 6.34724 0.0344582 6.28023 0.0414274 6.21323C0.0549597 6.08313 0.0684905 5.95304 0.0906931 5.82447C0.36874 4.2161 1.11102 2.85973 2.32829 1.77354C3.46507 0.759094 4.7989 0.182475 6.31743 0.0383854C6.39963 0.0306103 6.48171 0.0215604 6.5638 0.0125083L6.67562 0.000298948H24.4691ZM0.042636 27.9878L0 27.9866V28.4458C0.00698092 28.5027 0.0135511 28.5597 0.0201214 28.6166L0.0201301 28.6167L0.0201323 28.6167C0.0345002 28.7413 0.0488692 28.8659 0.0675343 28.9898C0.313597 30.6262 1.03509 32.0176 2.25115 33.1387C3.55065 34.3364 5.09682 34.9803 6.86211 34.9883C10.2004 35.0034 13.5388 35.0006 16.8772 34.9977C18.2073 34.9966 19.5373 34.9954 20.8674 34.9954H20.9774V27.99H20.8253L0.14576 27.9899C0.111385 27.9899 0.0770105 27.9888 0.042636 27.9878ZM0 14.0039H17.4712V20.9988H17.3532L0.104039 20.9987C0.0806714 20.9987 0.0573034 20.9977 0.0339353 20.9966L0 20.9953V14.0039ZM38.7624 14.0115C38.6578 14.0041 38.5521 13.9967 38.4452 13.9875L38.4452 14.1522C38.4452 15.0997 38.4454 16.0473 38.4455 16.9949C38.4459 19.4837 38.4463 21.9725 38.444 24.4613C38.443 25.5282 38.0438 26.4262 37.2429 27.1317C36.6217 27.679 35.8901 27.9844 35.0587 27.9862C32.5142 27.9918 29.9697 27.9911 27.4252 27.9905C26.4828 27.9903 25.5404 27.99 24.598 27.9901H24.4804V34.999H24.6025C25.5933 34.999 26.5842 34.9991 27.575 34.9993C31.2357 34.9999 34.8965 35.0005 38.5572 34.993C38.9814 34.9922 39.412 34.941 39.8287 34.8578C41.4096 34.5422 42.7299 33.7622 43.7728 32.5333C44.8579 31.2545 45.4252 29.7687 45.4336 28.0882C45.4452 25.8079 45.4398 23.5275 45.4344 21.2471L45.4336 20.9094C45.433 20.5942 45.4108 20.2759 45.3628 19.9646C45.1113 18.3288 44.3745 16.9457 43.1541 15.8286C42.0941 14.8582 40.8447 14.2765 39.4228 14.0737C39.2057 14.0428 38.9865 14.0273 38.7624 14.0115Z"
fill="#FF0380"
/>
</svg>
</div>
<nav class="esandries--header--navbar">
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
<div class="header--callToActionBtn">
<a href="" class="esandriesBtn">Contact me</a>
</div>
</div>
</div>
</header>
<main>
<div class="project">
<h2 class="project--title">PLTZ - Curso de JavaScript Práctico</h2>
<p class="project--description">Este es el proyecto que elaboré en el curso práctico de JavaScript que esta disponible en Platzi. En este curso cree funciones usando JavaScript y la modificación del DOM para crear la interactividad. <br> <br> Las 3 primeras tarjetas son calculadoras que son utiles si quieres conseguir areas o perimetros de una manera muy rápida. </p>
<div class="project--container">
<div class="calcuCard">
<!--cuadrado-->
<p class="calcuCard--title">Cuadrado</p>
<form action="" class="caluCard--form">
<label for="ladoCuadrado" class="calcuCard--formSubtitle"
>¿Cuánto mide un lado?</label
>
<div class="calcuCard--inputContainer">
<input
type="number"
placeholder="Número"
id="ladoCuadrado"
class="calcuCard--input"
/>
</div>
<div class="card--buttons">
<button
type="button"
class="button calcuCard--btnprimary"
onclick="calcularAreaCuadrado()"
>
Área
</button>
<button
type="button"
class="button calcuCard--btnsecondary"
onclick="calcularPerimetroCuadrado()"
>
Perímetro
</button>
</div>
<p class="calcuCard--formSubtitle">Resultado:</p>
<div class="calcuCard--result">
<p class="calcuCard--textresult" id="resultCuadrado"></p>
</div>
</form>
</div>
<div class="calcuCard">
<!--Triangulo-->
<p class="calcuCard--title">Triangulo</p>
<form action="" class="caluCard--form">
<label for="ladoAtriangulo" class="calcuCard--formSubtitle"
>¿Cuánto mide un lado?</label
>
<div class="calcuCard--inputContainer">
<input
type="number"
placeholder="número"
id="ladoAtriangulo"
class="calcuCard--input"
/>
</div>
<label for="ladoBTriangulo" class="calcuCard--formSubtitle"
>¿Cuánto mide el otro lado?</label
>
<div class="calcuCard--inputContainer">
<input
type="number"
placeholder="número"
id="ladoBTriangulo"
class="calcuCard--input"
/>
</div>
<label for="baseTriangulo" class="calcuCard--formSubtitle"
>¿Cuánto mide la base?</label
>
<div class="calcuCard--inputContainer">
<input
type="number"
placeholder="número"
id="baseTriangulo"
class="calcuCard--input"
/>
</div>
<div class="card--buttons">
<button
class="button calcuCard--btnprimary"
type="button"
onclick="calcularAreaTriangulo()"
>
Área
</button>
<button
class="button calcuCard--btnsecondary"
type="button"
onclick="calcularPerimetroTriangulo()"
>
Perímetro
</button>
</div>
<p class="calcuCard--formSubtitle">Resultado:</p>
<div class="calcuCard--result">
<p class="calcuCard--textresult" id="resultTriangulo"></p>
</div>
</form>
</div>
<div class="calcuCard">
<!--Circulo-->
<p class="calcuCard--title">Circulo</p>
<form action="" class="caluCard--form">
<label for="ladoCuadrado" class="calcuCard--formSubtitle"
>¿Cuál es el radio?</label
>
<div class="calcuCard--inputContainer">
<input
type="number"
placeholder="número"
id="radioCirculo"
class="calcuCard--input"
/>
</div>
<div class="card--buttons">
<button
type="button"
class="button calcuCard--btnprimary"
onclick="calcularAreaCirculo()"
>
Área
</button>
<button
type="button"
class="button calcuCard--btnprimary"
onclick="calcularCircunferencia()"
>
Circunferencia
</button>
</div>
<button
type="button"
class="button calcuCard--btnsecondary"
onclick="calcularDiametro()"
>
Diametro
</button>
<p class="calcuCard--formSubtitle">Resultado:</p>
<div class="calcuCard--result">
<p class="calcuCard--textresult" id="resultCirulo"></p>
</div>
</form>
</div>
<div class="calcuCard">
<!--cuadrado-->
<p class="calcuCard--title">Precio con descuento</p>
<form action="" class="caluCard--form">
<label for="priceInput" class="calcuCard--formSubtitle"
>¿Cuál es el precio?</label
>
<div class="calcuCard--inputContainer">
<input
type="number"
placeholder="Precio"
id="priceInput"
class="calcuCard--input"
/>
</div>
<label for="descuento" class="calcuCard--formSubtitle"
>¿Cuál es el porentaje de descuento?</label
>
<div class="div-Input-Cuadrado">
<input
type="number"
placeholder="Descuento"
id="descuento"
class="calcuCard--input"
/>
</div>
<div class="card--buttons">
<button
type="button"
class="button calcuCard--btnprimary"
onclick="calcularPrecioConDescuento()"
>
Calcular precio con descuento
</button>
</div>
<p class="calcuCard--formSubtitle">Resultado:</p>
<div class="calcuCard--result">
<p class="calcuCard--textresult" id="resultDescuento"></p>
</div>
</form>
</div>
<div class="calcuCard">
<!--cuadrado-->
<p class="calcuCard--title">Promedio, media y moda</p>
<form action="" class="caluCard--form">
<label for="datos" class="calcuCard--formSubtitle"
>Inserta tus datos</label
>
<div class="calcuCard--inputContainer">
<input
type="text"
placeholder="Ej: 20, 12, 120, 021"
id="datos"
class="calcuCard--input"
/>
</div>
<div class="card--buttons">
<button
type="button"
class="button calcuCard--btnprimary"
onclick="calcularMediaAritmetica()"
>
Media
</button>
<button
type="button"
class="button calcuCard--btnsecondary"
onclick="calcularMediana()"
>
Mediana
</button>
<button
type="button"
class="button calcuCard--btnprimary"
onclick="calcularPrecioConDescuento()"
>
Moda
</button>
</div>
<p class="calcuCard--formSubtitle">Resultado:</p>
<div class="calcuCard--result">
<p class="calcuCard--textresult" id="resultEstadistica"></p>
</div>
</form>
</div>
</div>
</div>
</main>
<script src="./javascript/taller1/calcuFiguras.js"></script>
<script src="./javascript/taller2/descuentos.js"></script>
<script src="./javascript/taller3/estadistica.js"></script>
</body>
</html>