├── LICENSE
├── README.md
├── assets
    ├── css
    │   └── main.css
    ├── img
    │   ├── circle.png
    │   ├── cube.png
    │   ├── discount.png
    │   ├── dollar.png
    │   ├── js-challenge-logo.png
    │   ├── platzi.webp
    │   ├── price.png
    │   ├── square.png
    │   └── triangle.png
    └── js
    │   ├── salarios.js
    │   ├── taller-1.js
    │   ├── taller-2.js
    │   ├── taller-3.js
    │   └── taller-4.js
├── index.html
├── taller-1.html
├── taller-2.html
├── taller-3.html
└── taller-4.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Lucas Frezzini
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # platzi-curso-practico-javascript
 2 | Proyecto para el Curso Práctico de JavaScript de Platzi
 3 | 
 4 | ## Link en Pages
 5 | Live: https://lucasfrezzini.github.io/platzi-curso-practico-javascript/index.html
 6 | 
 7 | ## Conceptos vistos en el curso
 8 | - Manipulación del DOM
 9 | - Manipulación de Array
10 | - Functions
11 | - HTML y CSS
12 | - Animaciones y transiciones
13 | 
14 | ## Cursos relacionados en Platzi
15 | - Curso de Frontend - @teffcode
16 | - Curso Básico de JavaScript - @degranda10
17 | - Curso Práctico de JavaScript - @juandc
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   padding: 0;
  3 |   margin: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | html {
  8 |   font-size: 62.5%;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: "Open Sans", sans-serif;
 13 |   color: #090909;
 14 |   position: relative;
 15 | }
 16 | 
 17 | h1, h2, h3, h4, h5, h6 {
 18 |   font-family: "Poppins", sans-serif;
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 3.6rem;
 23 |   line-height: 5.4rem;
 24 | }
 25 | 
 26 | h2, h3 {
 27 |   font-size: 2.4rem;
 28 |   line-height: 3.6rem;
 29 | }
 30 | 
 31 | h3 span {
 32 |   float: right;
 33 | }
 34 | h3 span a {
 35 |   color: #97C93E;
 36 |   text-decoration: none;
 37 | }
 38 | 
 39 | h4 {
 40 |   font-size: 1.8rem;
 41 |   line-height: 2.4rem;
 42 | }
 43 | 
 44 | p {
 45 |   font-size: 1.4rem;
 46 |   line-height: 1.8rem;
 47 | }
 48 | 
 49 | *::before,
 50 | *::after {
 51 |   box-sizing: border-box;
 52 | }
 53 | 
 54 | :root {
 55 |   --select-border: #777;
 56 |   --select-focus: blue;
 57 |   --select-arrow: var(--select-border);
 58 | }
 59 | 
 60 | select {
 61 |   appearance: none;
 62 |   background-color: transparent;
 63 |   border: none;
 64 |   padding: 10px;
 65 |   margin: 0;
 66 |   width: 100%;
 67 |   font-weight: bold;
 68 |   font-family: inherit;
 69 |   font-size: inherit;
 70 |   cursor: inherit;
 71 |   line-height: inherit;
 72 |   z-index: 1;
 73 |   outline: none;
 74 | }
 75 | select::-ms-expand {
 76 |   display: none;
 77 | }
 78 | 
 79 | .select {
 80 |   display: grid;
 81 |   grid-template-areas: "select";
 82 |   align-items: center;
 83 |   position: relative;
 84 |   min-width: 15ch;
 85 |   max-width: 30ch;
 86 |   border: 2px solid #090909;
 87 |   padding-right: 10px;
 88 |   border-radius: 0;
 89 |   font-size: 1.4rem;
 90 |   cursor: pointer;
 91 |   line-height: 1.1;
 92 |   background-color: #fff;
 93 |   background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
 94 | }
 95 | .select select, .select::after {
 96 |   grid-area: select;
 97 | }
 98 | .select:not(.select--multiple)::after {
 99 |   content: "";
100 |   justify-self: end;
101 |   width: 0.8em;
102 |   height: 0.5em;
103 |   background-color: var(--select-arrow);
104 |   clip-path: polygon(100% 0%, 0 0%, 50% 100%);
105 | }
106 | 
107 | select:focus + .focus {
108 |   position: absolute;
109 |   top: -1px;
110 |   left: -1px;
111 |   right: -1px;
112 |   bottom: -1px;
113 |   border: 2px solid var(--select-focus);
114 |   border-radius: inherit;
115 | }
116 | 
117 | @media (min-width: 1024px) {
118 |   body {
119 |     display: flex;
120 |   }
121 | 
122 |   h1 {
123 |     font-size: 4.8rem;
124 |     line-height: 7.2rem;
125 |   }
126 | }
127 | nav {
128 |   height: 100px;
129 |   width: 100%;
130 |   background-color: #090909;
131 |   display: flex;
132 |   align-items: center;
133 |   justify-content: space-around;
134 | }
135 | nav .js-challenge {
136 |   width: 70px;
137 |   height: 70px;
138 | }
139 | nav .platzi {
140 |   display: none;
141 | }
142 | nav a.user {
143 |   font-size: 2.4rem;
144 |   font-weight: bold;
145 |   color: #F6DF1C;
146 |   text-transform: uppercase;
147 |   text-decoration: none;
148 | }
149 | nav a.user::after {
150 |   content: "";
151 |   width: 0%;
152 |   height: 3px;
153 |   display: block;
154 |   background: #F6DF1C;
155 |   transition: 300ms;
156 | }
157 | nav a.user:hover::after {
158 |   width: 100%;
159 | }
160 | 
161 | @media (min-width: 1024px) {
162 |   .nav-bar nav {
163 |     position: fixed;
164 |     z-index: 50;
165 |     height: 100vh;
166 |     width: 100px;
167 |     display: flex;
168 |     flex-direction: column-reverse;
169 |     justify-content: space-between;
170 |   }
171 |   .nav-bar nav div {
172 |     display: flex;
173 |     flex-direction: column-reverse;
174 |     align-items: center;
175 |     justify-content: space-around;
176 |   }
177 |   .nav-bar nav div .platzi {
178 |     display: inline-block;
179 |     width: 100%;
180 |     height: auto;
181 |     transform: rotate(-90deg);
182 |     margin-bottom: 60px;
183 |   }
184 |   .nav-bar nav div .js-challenge {
185 |     width: 50px;
186 |     height: 50px;
187 |     margin-bottom: 25px;
188 |   }
189 |   .nav-bar nav a.user {
190 |     transform: rotate(-90deg) translate(-100px, 0px);
191 |     font-size: 1.8rem;
192 |   }
193 | }
194 | main .home-btn {
195 |   display: none;
196 |   position: fixed;
197 |   right: 0;
198 |   top: 10px;
199 |   background: #090909;
200 |   font-size: 2.4rem;
201 |   text-decoration: none;
202 |   font-weight: bold;
203 |   color: #F6DF1C;
204 |   padding: 20px 30px 20px 20px;
205 |   transform: rotate(-90deg) translateX(0);
206 |   transition: all 0.5s;
207 | }
208 | 
209 | .main-section {
210 |   padding: 50px 30px;
211 | }
212 | .main-section header h3 {
213 |   color: #97C93E;
214 |   text-transform: uppercase;
215 | }
216 | .main-section header h1 {
217 |   margin-top: 15px;
218 |   margin-bottom: 25px;
219 | }
220 | .main-section ul {
221 |   margin-bottom: 25px;
222 | }
223 | .main-section ul li {
224 |   list-style: none;
225 |   font-size: 1.4rem;
226 | }
227 | .main-section .taller header {
228 |   display: flex;
229 |   justify-content: space-between;
230 |   align-items: center;
231 | }
232 | 
233 | .nav-works .card:hover {
234 |   background-color: #F6DF1C;
235 | }
236 | .nav-works .card:hover .card__item {
237 |   background-color: #090909;
238 |   color: #FFFFFF;
239 | }
240 | .nav-works .card:hover .card__item img {
241 |   filter: invert(1);
242 | }
243 | .nav-works .card .card__item {
244 |   background-color: #F6DF1C;
245 |   padding: 15px 10px;
246 |   min-height: 100px;
247 |   display: flex;
248 |   align-items: center;
249 |   cursor: pointer;
250 |   border-bottom: 5px solid #090909;
251 |   transition: all 0.3s;
252 | }
253 | .nav-works .card .card__item img {
254 |   width: 80px;
255 |   height: 80px;
256 |   margin-right: 15px;
257 | }
258 | .nav-works .card .card__item h5 {
259 |   font-size: 1.8rem;
260 |   font-weight: normal;
261 | }
262 | .nav-works .card .card__item h4 {
263 |   font-family: "Open Sans", sans-serif;
264 |   font-weight: normal;
265 | }
266 | .nav-works .card .card__item h2 {
267 |   margin-bottom: 15px;
268 | }
269 | .nav-works .card .card__item:nth-child(1) {
270 |   border-top: 5px solid #090909;
271 | }
272 | .nav-works .card .card__item:nth-child(4) {
273 |   border-bottom: 0px solid #090909;
274 | }
275 | .nav-works .card .card__item:hover {
276 |   background-color: #F6DF1C;
277 |   transform: translateX(-10px);
278 |   border: 5px solid #F6DF1C;
279 |   color: #090909;
280 | }
281 | .nav-works .card .card__item:hover img {
282 |   filter: invert(0);
283 | }
284 | 
285 | @media (min-width: 1024px) {
286 |   main {
287 |     display: flex;
288 |     margin-left: 100px;
289 |     width: 100%;
290 |     height: 100%;
291 |   }
292 |   main .home-btn {
293 |     display: inline-block;
294 |   }
295 |   main .home-btn:hover {
296 |     transform: rotate(-90deg) translateX(-10px);
297 |     background-color: #F6DF1C;
298 |     color: #090909;
299 |   }
300 | 
301 |   .main-section {
302 |     width: 50%;
303 |   }
304 | 
305 |   .nav-works {
306 |     width: 50%;
307 |   }
308 |   .nav-works .card {
309 |     display: flex;
310 |     flex-direction: column;
311 |     height: 100vh;
312 |     background-color: #090909;
313 |   }
314 |   .nav-works .card:hover {
315 |     background-color: #F6DF1C;
316 |   }
317 |   .nav-works .card:hover .card__item {
318 |     background-color: #090909;
319 |     color: #FFFFFF;
320 |   }
321 |   .nav-works .card:hover .card__item img {
322 |     filter: invert(1);
323 |   }
324 |   .nav-works .card a {
325 |     flex-grow: 1;
326 |     color: initial;
327 |     text-decoration: none;
328 |   }
329 |   .nav-works .card .card__item {
330 |     height: 100%;
331 |     border-left: 5px solid #090909;
332 |     border-bottom: 5px solid #090909;
333 |     transition: all 0.3s;
334 |   }
335 |   .nav-works .card .card__item:nth-child(4) {
336 |     border-bottom: 5px solid #090909;
337 |   }
338 |   .nav-works .card .card__item:hover {
339 |     background-color: #F6DF1C;
340 |     transform: translateX(-10px);
341 |     border: 5px solid #F6DF1C;
342 |     color: #090909;
343 |   }
344 |   .nav-works .card .card__item:hover img {
345 |     filter: invert(0);
346 |   }
347 | }
348 | @media (min-width: 1200px) {
349 |   .main-section {
350 |     width: 60%;
351 |   }
352 | 
353 |   .nav-works {
354 |     width: 40%;
355 |   }
356 | }
357 | @media (min-width: 1024px) {
358 |   .main-section--inside {
359 |     width: 100%;
360 |     margin-bottom: 100px;
361 |   }
362 | 
363 |   .nav-works--inside {
364 |     width: calc(100% - 100px);
365 |     position: fixed;
366 |     z-index: 50;
367 |     bottom: 0;
368 |   }
369 |   .nav-works--inside .card {
370 |     height: initial;
371 |     flex-direction: row;
372 |     align-items: flex-end;
373 |   }
374 |   .nav-works--inside .card .card__item {
375 |     width: 33.3%;
376 |   }
377 |   .nav-works--inside .card .card__item:nth-child(1) {
378 |     border-left: 0px solid #090909;
379 |   }
380 |   .nav-works--inside .card .card__item p, .nav-works--inside .card .card__item h4 {
381 |     display: none;
382 |   }
383 |   .nav-works--inside .card .card__item h2 {
384 |     font-size: 1.8rem;
385 |     margin-bottom: 0;
386 |   }
387 |   .nav-works--inside .card .card__item:hover {
388 |     background-color: #F6DF1C;
389 |     transform: translateY(-10px);
390 |     border: 5px solid #F6DF1C;
391 |     color: #090909;
392 |   }
393 |   .nav-works--inside .card .card__item:hover img {
394 |     filter: invert(0);
395 |   }
396 | }
397 | @media (min-width: 1200px) {
398 |   .nav-works--inside .card .card__item h2 {
399 |     font-size: 2.4rem;
400 |   }
401 | }
402 | .taller-card {
403 |   margin-bottom: 40px;
404 | }
405 | .taller-card img {
406 |   width: 55px;
407 |   height: 55px;
408 | }
409 | .taller-card img:nth-of-type(2) {
410 |   margin-top: 30px;
411 | }
412 | .taller-card h2 {
413 |   margin-top: 15px;
414 |   margin-bottom: 20px;
415 | }
416 | .taller-card form {
417 |   font-size: 1.4rem;
418 | }
419 | .taller-card form label, .taller-card form input {
420 |   display: inline-block;
421 |   width: 100%;
422 | }
423 | .taller-card form .form-group {
424 |   margin-bottom: 15px;
425 | }
426 | .taller-card form .form-group input {
427 |   padding-left: 10px;
428 |   margin: 5px 0;
429 |   height: 35px;
430 |   border: 1px solid #090909;
431 | }
432 | .taller-card form p {
433 |   color: #FF3535;
434 |   font-size: 1.4rem;
435 |   margin-bottom: 5px;
436 | }
437 | .taller-card form .btn-form {
438 |   cursor: pointer;
439 |   display: inline-block;
440 |   width: 100%;
441 |   margin-bottom: 10px;
442 |   background-color: #97C93E;
443 |   border: 2px solid #090909;
444 |   font-family: "Poppins", sans-serif;
445 |   font-weight: bold;
446 |   font-size: 1.4rem;
447 |   text-transform: uppercase;
448 |   padding: 5px;
449 |   transition: all 0.2s;
450 | }
451 | .taller-card form .btn-form:hover {
452 |   box-shadow: 1px 1px 10px #3d501b;
453 | }
454 | .taller-card form .btn-form--alert {
455 |   background-color: #ffbf35;
456 | }
457 | .taller-card form .btn-form--alert:hover {
458 |   box-shadow: 1px 1px 10px #50371b;
459 | }
460 | .taller-card form .check {
461 |   color: #97C93E;
462 |   font-weight: bold;
463 |   text-transform: uppercase;
464 |   margin-bottom: 15px;
465 | }
466 | .taller-card form .check input {
467 |   width: initial;
468 | }
469 | 
470 | @media (min-width: 1024px) {
471 |   .taller {
472 |     display: flex;
473 |   }
474 |   .taller .taller-card {
475 |     padding: 20px;
476 |     width: 33.3%;
477 |   }
478 |   .taller .taller-card:nth-of-type(1) {
479 |     padding-left: 0;
480 |   }
481 |   .taller .taller-card:nth-of-type(3) {
482 |     padding-right: 0;
483 |   }
484 | }
485 | .overlay {
486 |   position: fixed;
487 |   top: 0;
488 |   left: 0;
489 |   z-index: 100;
490 |   height: 100vh;
491 |   width: 100%;
492 |   background-color: rgba(9, 9, 9, 0.6);
493 |   display: none;
494 |   place-items: center;
495 | }
496 | .overlay .result {
497 |   background-color: #F6DF1C;
498 |   border: 5px solid #090909;
499 |   padding: 50px;
500 |   text-align: center;
501 | }
502 | .overlay .result p {
503 |   margin-bottom: 20px;
504 |   text-align: right;
505 |   font-weight: bold;
506 |   font-family: "Poppins", sans-serif;
507 |   font-size: 2.4rem;
508 | }
509 | .overlay .result p span {
510 |   cursor: pointer;
511 | }
512 | .overlay .result img {
513 |   width: 55px;
514 |   height: 55px;
515 | }
516 | .overlay .result h4 {
517 |   margin-top: 25px;
518 |   font-family: "Open Sans", sans-serif;
519 |   font-weight: normal;
520 | }
521 | .overlay .result h4 .unit {
522 |   position: relative;
523 | }
524 | .overlay .result h4 .unit span {
525 |   position: absolute;
526 |   top: -5px;
527 |   right: -10px;
528 |   font-size: 1.4rem;
529 | }
530 | 
531 | /*# sourceMappingURL=main.css.map */
532 | 


--------------------------------------------------------------------------------
/assets/img/circle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/circle.png


--------------------------------------------------------------------------------
/assets/img/cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/cube.png


--------------------------------------------------------------------------------
/assets/img/discount.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/discount.png


--------------------------------------------------------------------------------
/assets/img/dollar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/dollar.png


--------------------------------------------------------------------------------
/assets/img/js-challenge-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/js-challenge-logo.png


--------------------------------------------------------------------------------
/assets/img/platzi.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/platzi.webp


--------------------------------------------------------------------------------
/assets/img/price.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/price.png


--------------------------------------------------------------------------------
/assets/img/square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/square.png


--------------------------------------------------------------------------------
/assets/img/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucasfrezzini/platzi-curso-practico-javascript/8058495a8ba345a651029620d651ed591ad2595d/assets/img/triangle.png


--------------------------------------------------------------------------------
/assets/js/salarios.js:
--------------------------------------------------------------------------------
 1 | const colombia = [];
 2 | colombia.push({
 3 |   name: "Camila",
 4 |   salary: 500,
 5 | });
 6 | colombia.push({
 7 |   name: "Nath",
 8 |   salary: 1500,
 9 | });
10 | colombia.push({
11 |   name: "Luisa",
12 |   salary: 1800,
13 | });
14 | colombia.push({
15 |   name: "Laura",
16 |   salary: 1000,
17 | });
18 | colombia.push({
19 |   name: "Daniela",
20 |   salary: 2200,
21 | });
22 | colombia.push({
23 |   name: "Esperancita",
24 |   salary: 200,
25 | });
26 | colombia.push({
27 |   name: "Carla",
28 |   salary: 500,
29 | });
30 | colombia.push({
31 |   name: "Antonieta",
32 |   salary: 1500,
33 | });
34 | colombia.push({
35 |   name: "Alicia",
36 |   salary: 1300,
37 | });
38 | colombia.push({
39 |   name: "Ana",
40 |   salary: 2400,
41 | });
42 | colombia.push({
43 |   name: "Julia",
44 |   salary: 3400,
45 | });
46 | colombia.push({
47 |   name: "Rosa",
48 |   salary: 400,
49 | });
50 | colombia.push({
51 |   name: "Angélica",
52 |   salary: 400,
53 | });
54 | colombia.push({
55 |   name: "Tatiana",
56 |   salary: 400,
57 | });
58 | colombia.push({
59 |   name: "Lorena",
60 |   salary: 600,
61 | });
62 | colombia.push({
63 |   name: "Carolina",
64 |   salary: 1600,
65 | });
66 | colombia.push({
67 |   name: "Fernanda",
68 |   salary: 2600,
69 | });
70 | colombia.push({
71 |   name: "Nora",
72 |   salary: 1000,
73 | });
74 | colombia.push({
75 |   name: "Gisselle",
76 |   salary: 2000,
77 | });
78 | colombia.push({
79 |   name: "Bill Gates",
80 |   salary: 100000000,
81 | });


--------------------------------------------------------------------------------
/assets/js/taller-1.js:
--------------------------------------------------------------------------------
  1 | // CALCULOS Y FORMULAS
  2 | // ===================
  3 | 
  4 | // Codigo del cuadrado 
  5 | 
  6 | function perimetroCuadrado(lado) { 
  7 |     return lado * 4; 
  8 | }
  9 | function areaCuadrado (lado) {
 10 |     return lado * lado
 11 | }
 12 | 
 13 | // Codigo del rectangulo 
 14 | 
 15 | function perimetroRectangulo(lado1, lado2) { 
 16 |     return lado1 * 2 + lado2 + 2; 
 17 | }
 18 | function areaRectangulo (lado1, lado2) {
 19 |     return lado1 * lado2;
 20 | }
 21 | 
 22 | // Codigo del triangulo
 23 | 
 24 | function perimetroTriangulo (ladoTriangulo1, ladoTriangulo2, base) {
 25 |     return ladoTriangulo1 + ladoTriangulo2 + base;
 26 | }
 27 | 
 28 | function areaTriangulo (base, altura) {
 29 |     return ((base * altura) / 2).toFixed(2);
 30 | }
 31 | 
 32 | function esIsosceles(ladoTriangulo1, ladoTriangulo2, base) {
 33 |     if (ladoTriangulo1 == ladoTriangulo2 && ladoTriangulo1 != base) {
 34 |         // formula de altura de un isosceles --> raiz(a^2 - b^2 / 4)
 35 |         altura = Math.sqrt((ladoTriangulo1 ** 2) - (base ** 2) / 4 );
 36 |         console.log('aca')
 37 |         console.log(altura)
 38 |         return altura.toFixed(2);
 39 |     } else {
 40 |         return false;
 41 |     }
 42 | }
 43 | 
 44 | // Codigo del circulo
 45 | const PI = Math.PI;
 46 | 
 47 | function diametroCirculo (radio) {
 48 |     return radio * 2;
 49 | }
 50 | 
 51 | function perimetroCirculo(radio) {
 52 |     const diametro = diametroCirculo(radio);
 53 |     return (diametro * PI).toFixed(2);
 54 | }
 55 | 
 56 | function areaCirculo(radio) {
 57 |     return ((radio * radio) * PI).toFixed(2);
 58 | }
 59 | 
 60 | // UTILIDADES
 61 | // ===================
 62 | 
 63 | function cleanError (id) {
 64 |     errors = document.getElementById(id).querySelectorAll('.error');
 65 |     for (e of errors) {
 66 |         e.innerHTML = '';
 67 |     }
 68 | }
 69 | 
 70 | function closeOverlay() {
 71 |     const overlay = document.getElementById('overlay');
 72 |     overlay.style.display = 'none';
 73 | }
 74 | 
 75 | // LLAMADAS
 76 | // ==========
 77 | 
 78 | // Cuadrado
 79 | 
 80 | function checkInputsSquare(l1) {
 81 |     if (Number.isNaN(l1) || l1 <= 0) {
 82 |         e = document.getElementById('errorCL1');
 83 |         e.innerHTML = 'Ingrese un valor válido para el Lado A';
 84 |         return false;
 85 |     }
 86 |     return true;
 87 | }
 88 | 
 89 | function renderResultSquare(r, calc) {
 90 |     const overlay = document.getElementById('overlay');
 91 |     overlay.style.display = 'grid';
 92 | 
 93 |     const unit = calc == 'Area' ? 'cm<span>2</span>' : 'cm';
 94 | 
 95 |     const resultIMG = document.getElementById('resultIMG');
 96 |     const resultH2 = document.getElementById('resultH2');        
 97 |     const resultH4 = document.getElementById('resultH4');
 98 | 
 99 |     resultIMG.src = 'assets/img/square.png';
100 |     resultH2.innerHTML = 'Cuadrados';
101 | 
102 |     resultH4.innerHTML = `El <strong>${calc}</strong> del <strong>cuadrado</strong> es: <strong class="unit"> ${r} ${unit}</strong>`;
103 | }
104 | 
105 | function calcularPerimetroCuadrado() {
106 |     cleanError('cuadrados');
107 | 
108 |     const lado = parseInt(document.getElementById('inputCuadrado').value);
109 | 
110 |     if(checkInputsSquare(lado)) {
111 |         const result = perimetroCuadrado(lado);
112 |         renderResultSquare(result, 'Perimetro');
113 |     }
114 | }
115 | 
116 | function calcularAreaCuadrado() {
117 |     cleanError('cuadrados');
118 | 
119 |     const lado = parseInt(document.getElementById('inputCuadrado').value);
120 | 
121 |     if(checkInputsSquare(lado)) {
122 |         const result = areaCuadrado(lado);
123 |         renderResultSquare(result, 'Area');
124 |     }
125 | }
126 | 
127 | // Rectangulo
128 | 
129 | function checkInputsCube(l1, l2) {
130 |     if (Number.isNaN(l1) || l1 <= 0) {
131 |         e = document.getElementById('errorRL1');
132 |         e.innerHTML = 'Ingrese un valor válido para el Lado A';
133 |         return false;
134 |     }
135 |     if (Number.isNaN(l2) || l2 <= 0) {
136 |         e = document.getElementById('errorRL2');
137 |         e.innerHTML = 'Ingrese un valor válido para el Lado B';
138 |         return false;
139 |     }
140 | 
141 |     return true;
142 | }
143 | 
144 | function renderResultCube(r, calc) {
145 |     const overlay = document.getElementById('overlay');
146 |     overlay.style.display = 'grid';
147 | 
148 |     const unit = calc == 'Area' ? 'cm<span>2</span>' : 'cm';
149 | 
150 |     const resultIMG = document.getElementById('resultIMG');
151 |     const resultH2 = document.getElementById('resultH2');        
152 |     const resultH4 = document.getElementById('resultH4');
153 | 
154 |     resultIMG.src = 'assets/img/cube.png';
155 |     resultH2.innerHTML = 'Rectangulos';
156 | 
157 |     resultH4.innerHTML = `El <strong>${calc}</strong> del <strong>rectangulo</strong> es: <strong class="unit"> ${r} ${unit}</strong>`;
158 | }
159 | 
160 | function calcularPerimetroRectangulo() {
161 |     cleanError('rectangulos');
162 | 
163 |     const lado1 = parseInt(document.getElementById('inputRectangulo1').value);
164 |     const lado2 = parseInt(document.getElementById('inputRectangulo2').value);
165 | 
166 |     if(checkInputsCube(lado1, lado2)) {
167 |         const result = perimetroRectangulo(lado1, lado2);
168 |         renderResultCube(result, 'Perimetro');
169 |     }
170 | }
171 | 
172 | function calcularAreaRectangulo() {
173 |     cleanError('rectangulos');
174 | 
175 |     const lado1 = parseInt(document.getElementById('inputRectangulo1').value);
176 |     const lado2 = parseInt(document.getElementById('inputRectangulo2').value);
177 | 
178 |     if(checkInputsCube(lado1, lado2)) {
179 |         const result = areaRectangulo(lado1, lado2);
180 |         renderResultCube(result, 'Area');
181 |     }
182 | }
183 | 
184 | // Circulo
185 | function checkInputsCircle(l1) {
186 |     if (Number.isNaN(l1) || l1 <= 0) {
187 |         e = document.getElementById('errorCirculo');
188 |         e.innerHTML = 'Ingrese un valor válido para el Lado A';
189 |         return false;
190 |     }
191 |     return true;
192 | }
193 | 
194 | function renderResultCircle(r, calc) {
195 |     const overlay = document.getElementById('overlay');
196 |     overlay.style.display = 'grid';
197 | 
198 |     const unit = calc == 'Area' ? 'cm<span>2</span>' : 'cm';
199 | 
200 |     const resultIMG = document.getElementById('resultIMG');
201 |     const resultH2 = document.getElementById('resultH2');        
202 |     const resultH4 = document.getElementById('resultH4');
203 | 
204 |     resultIMG.src = 'assets/img/circle.png';
205 |     resultH2.innerHTML = 'Circulos';
206 | 
207 |     resultH4.innerHTML = `El <strong>${calc}</strong> del <strong>circulo</strong> es: <strong class="unit"> ${r} ${unit}</strong>`;
208 | }
209 | 
210 | function calcularPerimetroCirculo() {
211 |     cleanError('circulos');
212 |     
213 |     const radio = parseInt(document.getElementById('inputCirculo').value);
214 | 
215 |     if(checkInputsCircle(radio)){
216 |         const result = perimetroCirculo(radio);
217 |         renderResultCircle(result, 'Perimetro');
218 |     }
219 | }
220 | 
221 | function calcularAreaCirculo() {
222 |     cleanError('circulos');
223 |     
224 |     const radio = parseInt(document.getElementById('inputCirculo').value);
225 | 
226 |     if(checkInputsCircle(radio)){
227 |         const result = areaCirculo(radio);
228 |         renderResultCircle(result, 'Area');
229 |     }
230 | }
231 | 
232 | function calcularDiametroCirculo() {
233 |     cleanError('circulos');
234 |     
235 |     const radio = parseInt(document.getElementById('inputCirculo').value);
236 | 
237 |     if(checkInputsCircle(radio)){
238 |         const result = diametroCirculo(radio);
239 |         renderResultCircle(result, 'Diametro');
240 |     }
241 | }
242 | 
243 | 
244 | // Triangulo
245 | 
246 | function calcularAreaTriangulo() {
247 |     cleanError('triangulos');
248 | 
249 |     const lado1 = false;
250 |     const lado2 = false;
251 |     const base = parseInt(document.getElementById('inputBase').value);
252 |     const altura = parseInt(document.getElementById('inputAltura').value);
253 | 
254 |     console.log('aca1')
255 |     console.log(lado1)
256 |     console.log(lado2)
257 |     console.log(base)
258 |     console.log(altura)
259 | 
260 |     if (checkInputsTriangulo(lado1, lado2, base, altura)) {
261 |         const result = areaTriangulo(base, altura);
262 |         renderResultTriangles(result, 'Area');
263 |     }
264 | }
265 | 
266 | function calcularPerimetroTriangulo() {
267 |     cleanError('triangulos');
268 | 
269 |     const lado1 = parseInt(document.getElementById('inputTriangulo1').value);
270 |     const lado2 = parseInt(document.getElementById('inputTriangulo2').value);
271 |     const base = parseInt(document.getElementById('inputBase').value);
272 |     const altura =  false;
273 | 
274 |     if (checkInputsTriangulo(lado1, lado2, base, altura)) {
275 |         const result = perimetroTriangulo(lado1, lado2, base);
276 | 
277 |         renderResultTriangles(result, 'Perimetro');
278 |     }    
279 | }
280 | 
281 | function checkInputsTriangulo (l1, l2, b, h) {
282 |     if (h == false) {
283 |         if (Number.isNaN(l1) || l1 <= 0) {
284 |             e = document.getElementById('errorT1');
285 |             e.innerHTML = 'Ingrese un valor válido para el Lado A';
286 |             return false;
287 |         }
288 | 
289 |         if (Number.isNaN(l2) || l2 <= 0) {
290 |             e = document.getElementById('errorT2');
291 |             e.innerHTML = 'Ingrese un valor válido para el Lado B';
292 |             return false;
293 |         }
294 | 
295 |         if (Number.isNaN(b) || b <= 0) {
296 |             e = document.getElementById('errorTBase');
297 |             e.innerHTML = 'Ingrese un valor válido para la Base';
298 |             return false;
299 |         }
300 |         
301 |     } else {
302 |         // Area
303 |         if (Number.isNaN(b) || b <= 0) {
304 |             console.log(32)
305 |             e = document.getElementById('errorTBase');
306 |             e.innerHTML = 'Ingrese un valor válido para la Base';
307 |             return false;
308 |         }
309 | 
310 |         console.log(h);
311 | 
312 |         if (Number.isNaN(h) || h <= 0) {
313 |             e = document.getElementById('errorTAltura');
314 |             e.innerHTML = 'Ingrese un valor válido para la Altura';
315 |             return false;
316 |         }
317 | 
318 |     }
319 |     return true;
320 | }
321 | 
322 | function renderResultTriangles(r, calc) {
323 |     const overlay = document.getElementById('overlay');
324 |     overlay.style.display = 'grid';
325 | 
326 |     const unit = calc == 'Area' ? 'cm<span>2</span>' : 'cm';
327 | 
328 |     const resultIMG = document.getElementById('resultIMG');
329 |     const resultH2 = document.getElementById('resultH2');        
330 |     const resultH4 = document.getElementById('resultH4');
331 | 
332 |     resultIMG.src = 'assets/img/triangle.png';
333 |     resultH2.innerHTML = 'Triangulos';
334 | 
335 |     resultH4.innerHTML = `El <strong>${calc}</strong> del <strong>triangulo</strong> es: <strong class="unit"> ${r} ${unit}</strong>`;
336 | }


--------------------------------------------------------------------------------
/assets/js/taller-2.js:
--------------------------------------------------------------------------------
  1 | // UTILIDADES
  2 | // ===================
  3 | 
  4 | function cleanError (id) {
  5 |     errors = document.getElementById(id).querySelectorAll('.error');
  6 |     for (e of errors) {
  7 |         e.innerHTML = '';
  8 |     }
  9 | }
 10 | 
 11 | function closeOverlay() {
 12 |     const overlay = document.getElementById('overlay');
 13 |     overlay.style.display = 'none';
 14 | }
 15 | 
 16 | // UTILIDADES
 17 | // ===================
 18 | 
 19 | function checkInputs (price, discount) {
 20 |     if (Number.isNaN(price) || price <= 0) {
 21 |         e = document.getElementById('errorPrice');
 22 |         e.innerHTML = 'Ingrese un valor válido para el Precio';
 23 |         return false;
 24 |     }
 25 |     if (Number.isNaN(discount) || discount <= 0) {
 26 |         e = document.getElementById('errorDiscount');
 27 |         e.innerHTML = 'Ingrese un valor válido para el Descuento';
 28 |         return false;
 29 |     }
 30 |     return true;
 31 | }
 32 | 
 33 | function calcularPrecioConDescuento(precio, descuento) {
 34 |     const porcentajePrecioConDescuento = 100 - descuento;
 35 |     const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
 36 |     
 37 |     return precioConDescuento.toFixed(2);
 38 | }
 39 | 
 40 | function canApplyCoupon(c) {
 41 |     const coupons = [
 42 |         'Promo10',
 43 |         'Promo20',
 44 |         'Promo30'
 45 |     ]
 46 | 
 47 |     if (!coupons.includes(c)) {
 48 |         const e = document.getElementById('errorCoupon');
 49 |         e.innerHTML = 'EL CUPON NO ES VÁLIDO'
 50 |         return false;
 51 |     }
 52 | 
 53 |     return true;
 54 | }
 55 | 
 56 | function getCouponDiscount(c) {
 57 |     switch (c) {
 58 |         case 'Promo10':
 59 |             return 10;
 60 |         case 'Promo20':
 61 |             return 20;
 62 |         case 'Promo30':
 63 |             return 30;
 64 |         default:
 65 |             return 0;
 66 |     }
 67 | }
 68 | 
 69 | function renderPriceDiscount(r) {
 70 |     const overlay = document.getElementById('overlay');
 71 |     overlay.style.display = 'grid';
 72 | 
 73 |     const resultIMG = document.getElementById('resultIMG');
 74 |     const resultH2 = document.getElementById('resultH2');        
 75 |     const resultH4 = document.getElementById('resultH4');
 76 | 
 77 |     resultIMG.src = 'assets/img/price.png';
 78 |     resultH2.innerHTML = 'Precios y descuentos';
 79 | 
 80 |     resultH4.innerHTML = `El descuento es de: <strong class="unit"> $ ${r}</strong>`;
 81 | }
 82 | 
 83 | function onClickButtonPriceDiscount() {
 84 |     cleanError('precios-descuentos');
 85 | 
 86 |     const price = parseInt(document.getElementById('inputPrice').value);
 87 |     const discount = parseInt(document.getElementById('inputDiscount').value);
 88 |     const coupon = document.getElementById('inputCoupon').value;
 89 |     let precioConDescuento = 0;
 90 | 
 91 |     if (checkInputs(price, discount)) {
 92 |         precioConDescuento = calcularPrecioConDescuento(price, discount);
 93 | 
 94 |         if (coupon != '') {
 95 |             if (canApplyCoupon(coupon)) {
 96 |                 console.log('aca')
 97 |                 const discountCoupon = getCouponDiscount(coupon);
 98 |                 precioConDescuento =  calcularPrecioConDescuento(precioConDescuento, discountCoupon);
 99 |     
100 |                 renderPriceDiscount(precioConDescuento);
101 |             }
102 |         } else {
103 |             renderPriceDiscount(precioConDescuento);
104 |         }
105 | 
106 |     }    
107 | }


--------------------------------------------------------------------------------
/assets/js/taller-3.js:
--------------------------------------------------------------------------------
  1 | // UTILIDADES
  2 | // ===================
  3 | 
  4 | list = [];
  5 | 
  6 | function cleanError (id) {
  7 |     const errors = document.getElementById(id).querySelectorAll('.error');
  8 |     for (e of errors) {
  9 |         e.innerHTML = '';
 10 |     }
 11 | }
 12 | 
 13 | function closeOverlay() {
 14 |     const overlay = document.getElementById('overlay');
 15 |     overlay.style.display = 'none';
 16 | }
 17 | 
 18 | function renderList(list) {
 19 |     l = document.getElementById('list-values');
 20 |     l.innerHTML = '';
 21 | 
 22 |     list.forEach((element, index) => {
 23 |         const listElement = document.createElement('li');
 24 |         listElement.innerHTML = `<strong>${index + 1} -</strong> ${element}`;
 25 | 
 26 |         l.appendChild(listElement);
 27 |     });
 28 | }
 29 | 
 30 | function addListNumber() {
 31 |     cleanError('form');
 32 |     const element = document.getElementById('addValue');
 33 |     const value = parseInt(element.value);
 34 |     element.value = '';
 35 | 
 36 |     if (Number.isNaN(value) || value < 0) {
 37 |         e = document.getElementById('errorAddValue');
 38 |         e.innerHTML = 'Ingrese un valor válido para la lista de números';
 39 |         return false;
 40 |     }
 41 |     
 42 |     list.push(value);
 43 |     renderList(list);
 44 | }
 45 | 
 46 | function removeListNumber() {
 47 |     cleanError('form');
 48 |     const element = document.getElementById('removeValue');
 49 |     let value = parseInt(element.value);
 50 |     element.value = '';
 51 | 
 52 |     if (Number.isNaN(value) || value <= 0) {
 53 |         e = document.getElementById('errorRemoveValue');
 54 |         e.innerHTML = 'Ingrese una posición válida de la lista de números';
 55 |         return false;
 56 |     }
 57 | 
 58 |     value -= 1;
 59 | 
 60 |     list.splice(value, 1);
 61 |     renderList(list);
 62 | }
 63 | 
 64 | function switchFormula () {
 65 |     const f = document.getElementById('formulaSelect').value;
 66 |     const btn = document.getElementById('btn-render');
 67 |     cleanError('form');
 68 |     switch (f) {
 69 |         case '1':
 70 |             btn.setAttribute('onclick', 'renderMediaAritmetica();');
 71 |             btn.innerText = 'Calcular Media Aritmetica'
 72 |             break;
 73 |         case '2':
 74 |             btn.setAttribute('onclick', 'renderMediaArmonica();');
 75 |             btn.innerText = 'Calcular Media Armonica'
 76 |             break;
 77 |         case '3':
 78 |             btn.setAttribute('onclick', 'renderMediaGeometrica();');
 79 |             btn.innerText = 'Calcular Media Geometrica'
 80 |             break;
 81 |         case '4':
 82 |             btn.setAttribute('onclick', 'renderModa();');
 83 |             btn.innerText = 'Calcular Moda'
 84 |             break;
 85 |         case '5':
 86 |             btn.setAttribute('onclick', 'renderMediana();');
 87 |             btn.innerText = 'Calcular Mediana'
 88 |             break;
 89 |     }
 90 | }
 91 | 
 92 | function checkList() {
 93 |     if (list.length == 0) {
 94 |         e = document.getElementById('errorList');
 95 |         e.innerHTML = '<strong>Ingrese valores en la Lista.</strong>';
 96 |         return false;
 97 |     }
 98 |     return true;
 99 | }
100 | // Promedios
101 | 
102 | function calcularMediaAritmetica(list) {
103 |     const sumaList = list.reduce(
104 |         (valorAcumulado, nuevoElemento) => {
105 |             return valorAcumulado + nuevoElemento;
106 |         }, 0
107 |     );
108 | 
109 |     const mediaAritmetica = sumaList / list.length;
110 |     return parseFloat(mediaAritmetica.toFixed(2))
111 | }
112 | 
113 | function renderMediaAritmetica() {
114 |     if (checkList(list)){
115 |         const r = calcularMediaAritmetica(list);
116 |         const overlay = document.getElementById('overlay');
117 |         overlay.style.display = 'grid';
118 | 
119 | 
120 |         const resultIMG = document.getElementById('resultIMG');
121 |         const resultH2 = document.getElementById('resultH2');        
122 |         const resultH4 = document.getElementById('resultH4');
123 | 
124 |         resultIMG.src = 'assets/img/discount.png';
125 |         resultH2.innerHTML = 'Media Aritmetica';
126 | 
127 |         resultH4.innerHTML = `La Media Aritmetica es: <strong class="unit"> ${r}</strong>`;
128 |     }
129 | }
130 | 
131 | function calcularMediaGeometrica (list) {
132 |     const multiplicacionList = list.reduce(
133 |         (valorAcumulado, nuevoElemento) => {
134 |             return valorAcumulado * nuevoElemento;
135 |         }, 1
136 |     );
137 | 
138 |     const mediaGeometrica = multiplicacionList ** (1/list.length);
139 |     return parseFloat(mediaGeometrica.toFixed(3));
140 | }
141 | 
142 | function renderMediaGeometrica() {
143 |     if (checkList(list)){
144 |         const r = calcularMediaGeometrica(list);
145 |         const overlay = document.getElementById('overlay');
146 |         overlay.style.display = 'grid';
147 | 
148 | 
149 |         const resultIMG = document.getElementById('resultIMG');
150 |         const resultH2 = document.getElementById('resultH2');        
151 |         const resultH4 = document.getElementById('resultH4');
152 | 
153 |         resultIMG.src = 'assets/img/discount.png';
154 |         resultH2.innerHTML = 'Media Geometrica';
155 | 
156 |         resultH4.innerHTML = `La Media Geometrica es: <strong class="unit"> ${r}</strong>`;
157 |     }
158 | }
159 | 
160 | function calcularMediaArmonica (list) {
161 |     const sumaList = list.reduce(
162 |         (valorAcumulado, nuevoElemento) => valorAcumulado + (1 / nuevoElemento), 0
163 |     );
164 | 
165 |     console.log(sumaList);
166 | 
167 |     const mediaArmonica = list.length / sumaList;
168 |     return parseFloat(mediaArmonica.toFixed(3));
169 | }
170 | 
171 | function renderMediaArmonica() {
172 |     if (checkList(list)){
173 |         const r = calcularMediaArmonica(list);
174 |         const overlay = document.getElementById('overlay');
175 |         overlay.style.display = 'grid';
176 | 
177 | 
178 |         const resultIMG = document.getElementById('resultIMG');
179 |         const resultH2 = document.getElementById('resultH2');        
180 |         const resultH4 = document.getElementById('resultH4');
181 | 
182 |         resultIMG.src = 'assets/img/discount.png';
183 |         resultH2.innerHTML = 'Media Armonica';
184 | 
185 |         resultH4.innerHTML = `La Media Armonica es: <strong class="unit"> ${r}</strong>`;
186 |     }
187 | }
188 | 
189 | // Modas
190 | 
191 | function calcularModa () {
192 |     const listaCount = {};
193 | 
194 |     list.map(
195 |         function (e) {
196 |             if (listaCount[e]) {
197 |                 listaCount[e] += 1;
198 |             } else {
199 |                 listaCount[e] = 1;
200 |             }
201 |         }
202 |     );
203 |     
204 |     const listaArray = Object.entries(listaCount).sort(
205 |         function (valorAcumulado, nuevoValor) {
206 |             return valorAcumulado[1] - nuevoValor[1];
207 |         }
208 |     );
209 | 
210 |     const moda = listaArray[listaArray.length - 1][0];
211 |     return moda;
212 | }
213 | 
214 | function renderModa() {
215 |     if (checkList(list)){
216 |         const r = calcularModa();
217 |         const overlay = document.getElementById('overlay');
218 |         overlay.style.display = 'grid';
219 | 
220 | 
221 |         const resultIMG = document.getElementById('resultIMG');
222 |         const resultH2 = document.getElementById('resultH2');        
223 |         const resultH4 = document.getElementById('resultH4');
224 | 
225 |         resultIMG.src = 'assets/img/discount.png';
226 |         resultH2.innerHTML = 'Moda';
227 | 
228 |         resultH4.innerHTML = `La Moda es: <strong class="unit"> ${r}</strong>`;
229 |     }
230 | }
231 | 
232 | // Mediana
233 | 
234 | function esPar(value) {
235 |     return value % 2 === 0 ? true : false; 
236 | }
237 | 
238 | 
239 | function calcularMediana (lista) {
240 |     // Ordenamos la lista
241 |     const listaOrdenada = lista.sort( 
242 |         function(a, b) {
243 |             return a - b;
244 |         }
245 |     )
246 |     
247 |     // Ubicamos elementos y calculamos
248 |     const mitadLista = parseInt(listaOrdenada.length / 2);
249 | 
250 |     if (esPar(listaOrdenada.length)) {
251 |         // dos elementos
252 |         const elemento1 = listaOrdenada[mitadLista-1];
253 |         const elemento2 = listaOrdenada[mitadLista];
254 | 
255 |         const mediana = calcularMediaAritmetica([elemento1, elemento2]);
256 |         return mediana;
257 | 
258 |     } else {
259 |         // un elemento
260 |         const mediana = lista[mitadLista];
261 |         return mediana;
262 | 
263 |     }
264 | }
265 | 
266 | function renderMediana() {
267 |     if (checkList(list)){
268 |         r = calcularMediana(list);
269 |         const overlay = document.getElementById('overlay');
270 |         overlay.style.display = 'grid';
271 | 
272 | 
273 |         const resultIMG = document.getElementById('resultIMG');
274 |         const resultH2 = document.getElementById('resultH2');        
275 |         const resultH4 = document.getElementById('resultH4');
276 | 
277 |         resultIMG.src = 'assets/img/discount.png';
278 |         resultH2.innerHTML = 'Mediana';
279 | 
280 |         resultH4.innerHTML = `La Mediana es: <strong class="unit"> ${r}</strong>`;
281 |     }
282 | }


--------------------------------------------------------------------------------
/assets/js/taller-4.js:
--------------------------------------------------------------------------------
  1 | // UTILIDADES
  2 | // ===================
  3 | 
  4 | list = [];
  5 | 
  6 | function cleanError (id) {
  7 |     const errors = document.getElementById(id).querySelectorAll('.error');
  8 |     for (e of errors) {
  9 |         e.innerHTML = '';
 10 |     }
 11 | }
 12 | 
 13 | function closeOverlay() {
 14 |     const overlay = document.getElementById('overlay');
 15 |     overlay.style.display = 'none';
 16 | }
 17 | 
 18 | function renderList(list) {
 19 |     l = document.getElementById('list-values');
 20 |     l.innerHTML = '';
 21 | 
 22 |     list.forEach((element, index) => {
 23 |         const listElement = document.createElement('li');
 24 |         listElement.innerHTML = `<strong>${index + 1} -</strong> ${element}`;
 25 | 
 26 |         l.appendChild(listElement);
 27 |     });
 28 | }
 29 | 
 30 | function renderListDefault(list) {
 31 |     l = document.getElementById('list-values-default');
 32 |     l.innerHTML = '';
 33 | 
 34 |     list.forEach((element, index) => {
 35 |         const listElement = document.createElement('li');
 36 |         listElement.innerHTML = `<strong>${index + 1} -</strong> ${element.name}, <strong>USD$ ${element.salary}</strong>`;
 37 | 
 38 |         l.appendChild(listElement);
 39 |     });
 40 | }
 41 | 
 42 | function addListNumber() {
 43 |     cleanError('form');
 44 |     const element = document.getElementById('addValue');
 45 |     const value = parseInt(element.value);
 46 |     element.value = '';
 47 | 
 48 |     if (Number.isNaN(value) || value < 0) {
 49 |         e = document.getElementById('errorAddValue');
 50 |         e.innerHTML = 'Ingrese un valor válido para la lista de números';
 51 |         return false;
 52 |     }
 53 |     
 54 |     list.push(value);
 55 |     renderList(list);
 56 | }
 57 | 
 58 | function removeListNumber() {
 59 |     cleanError('form');
 60 |     const element = document.getElementById('removeValue');
 61 |     let value = parseInt(element.value);
 62 |     element.value = '';
 63 | 
 64 |     if (Number.isNaN(value) || value <= 0) {
 65 |         e = document.getElementById('errorRemoveValue');
 66 |         e.innerHTML = 'Ingrese una posición válida de la lista de números';
 67 |         return false;
 68 |     }
 69 | 
 70 |     value -= 1;
 71 | 
 72 |     list.splice(value, 1);
 73 |     renderList(list);
 74 | }
 75 | 
 76 | function switchFormula () {
 77 |     const f = document.getElementById('formulaSelect').value;
 78 |     const btn = document.getElementById('btn-render');
 79 |     cleanError('form');
 80 |     switch (f) {
 81 |         case '1':
 82 |             btn.setAttribute('onclick', 'renderMedianaSalarial();');
 83 |             btn.innerText = 'Calcular Media Salarial'
 84 |             break;
 85 |         case '2':
 86 |             btn.setAttribute('onclick', 'renderMedianaTop10();');
 87 |             btn.innerText = 'Calcular Media Top 10'
 88 |             break;
 89 |     }
 90 | }
 91 | 
 92 | function checkList() {
 93 |     if (list.length == 0) {
 94 |         e = document.getElementById('errorList');
 95 |         e.innerHTML = '<strong>Ingrese valores en la Lista.</strong>';
 96 |         return false;
 97 |     }
 98 |     return true;
 99 | }
100 | 
101 | // HELPERS
102 | 
103 | function esPar(n) {
104 |     return n % 2 === 0;
105 | };
106 | 
107 | // Calculadora de medianas
108 | function calcularMediaAritmetica(lista) {
109 |     const sumaLista = lista.reduce(
110 |         function (valorAcumulado = 0, nuevoElemento) {
111 |            return valorAcumulado + nuevoElemento;
112 |         }
113 |     );
114 | 
115 |     const promedioLista = sumaLista / lista.length;
116 |     return promedioLista;
117 |     
118 | }
119 | 
120 | // Mediana General
121 | function medianaSalarios (lista) {
122 |     const mitad = parseInt(lista.length / 2);
123 | 
124 |     if (esPar(lista.length)) {
125 |         const personMitad1 = lista[mitad-1];
126 |         const personMitad2 = lista[mitad];
127 | 
128 |         return mediana = calcularMediaAritmetica([personMitad1, personMitad2])
129 |     } else {
130 |         const personMitad = lista[mitad];
131 |         return personMitad;
132 |     }
133 | }
134 | 
135 | function renderMedianaSalarial () {
136 |     const checked = document.getElementById('checkInput').checked;
137 |     let r;
138 |     let render = false;
139 | 
140 |     if (checked) {
141 |         const salariosCol = colombia.map (
142 |             function (person) {
143 |                 return person.salary;
144 |             }
145 |         );
146 |         const salariosColSorted = salariosCol.sort(
147 |             (salaryA, salaryB) => salaryA - salaryB
148 |         );
149 |         r = medianaSalarios(salariosColSorted);
150 |         render = true;
151 |     } else {
152 |         if (checkList(list)) {
153 |             const listSorted = list.sort((salaryA, salaryB) => salaryA - salaryB);
154 |             r = medianaSalarios(listSorted);
155 |             render = true;
156 |         }
157 |     }
158 |     
159 |     if (render) {
160 |         const overlay = document.getElementById('overlay');
161 |         overlay.style.display = 'grid';
162 | 
163 | 
164 |         const resultIMG = document.getElementById('resultIMG');
165 |         const resultH2 = document.getElementById('resultH2');        
166 |         const resultH4 = document.getElementById('resultH4');
167 | 
168 |         resultIMG.src = 'assets/img/dollar.png';
169 |         resultH2.innerHTML = 'Mediana Salarial';
170 | 
171 |         resultH4.innerHTML = `La Mediana Salarial es: <strong class="unit"> ${r}</strong>`;
172 |     }
173 |     
174 | }
175 | // const medianaGeneralCol = medianaSalarios(salariosColSorted);
176 | 
177 | // Mediana Top 10%
178 | function spliceList(list) {
179 |     const spliceStart = parseInt((list.length * 90) / 100);
180 |     const spliceCount = parseInt(list.length - spliceStart);
181 |     const listTop10 = list.splice(spliceStart, spliceCount);
182 | 
183 |     return listTop10;
184 | }
185 | 
186 | function renderMedianaTop10() {
187 |     const checked = document.getElementById('checkInput').checked;
188 |     let r;
189 |     let render = false;
190 | 
191 |     if (checked) {
192 |         const salariosCol = colombia.map ( person => person.salary );
193 |         const salariosColSorted = salariosCol.sort((salaryA, salaryB) => salaryA - salaryB );
194 |         r = medianaSalarios(spliceList(salariosColSorted));
195 |         render = true;
196 |     } else {
197 |         if (checkList(list)) {
198 |             const listSorted = list.sort((salaryA, salaryB) => salaryA - salaryB);
199 |             r = medianaSalarios(spliceList(listSorted));
200 |             render = true;
201 |         }
202 |     }
203 |     
204 |     if (render) {
205 |         const overlay = document.getElementById('overlay');
206 |         overlay.style.display = 'grid';
207 | 
208 | 
209 |         const resultIMG = document.getElementById('resultIMG');
210 |         const resultH2 = document.getElementById('resultH2');        
211 |         const resultH4 = document.getElementById('resultH4');
212 | 
213 |         resultIMG.src = 'assets/img/dollar.png';
214 |         resultH2.innerHTML = 'Mediana Salarial TOP 10%';
215 | 
216 |         resultH4.innerHTML = `La Mediana Salarial Top 10% es: <strong class="unit"> ${r}</strong>`;
217 |     }
218 | }
219 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Inicio - Curso Práctico de JavaScript</title>
  8 | 
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
 12 | 
 13 |     <link rel="stylesheet" href="assets/css/main.css">
 14 | </head>
 15 | <body>
 16 |     <header class="nav-bar">
 17 |         <nav>
 18 |             <div>
 19 |                 <img class="js-challenge" src="assets/img/js-challenge-logo.png" alt="">
 20 |                 <img class="platzi" src="assets/img/platzi.webp" alt="">
 21 |             </div>
 22 |             <a class="user" href="https://www.linkedin.com/in/lucasfrezzini/" target="_blank">@lucasfrezzini</a>
 23 |         </nav>
 24 |     </header>
 25 |     <main>
 26 |         <!-- Main Section  -->
 27 |         <section class="main-section">
 28 |             <header>
 29 |                 <h3>TRABAJO PRÁCTICO - PLATZI</h3>
 30 |                 <h1>Curso Práctico de JavaScript</h1>
 31 |             </header>
 32 |             <p>
 33 |                 <strong> Temas vistos en el curso:</strong>
 34 |                 
 35 |             </p>
 36 |             <ul>
 37 |                 <li>Manipulación del DOM</li>
 38 |                 <li>Manipulación de Array</li>
 39 |                 <li>Functions</li>
 40 |                 <li>HTML y CSS</li>
 41 |                 <li>Animaciones y transiciones</li>
 42 |             </ul>
 43 | 
 44 |             <p>
 45 |                 <strong> Cursos relacionados:</strong>
 46 |             </p>
 47 |             <ul>
 48 |                 <li>Curso de Frontend - @teffcode</li>
 49 |                 <li>Curso Básico de JavaScript - @degranda10</li>
 50 |                 <li>Curso Práctico de JavaScript - @juandc</li>
 51 |             </ul>
 52 |             <p><strong> Utilizá los talleres para hacer tus calculos</strong></p>
 53 |         </section>
 54 | 
 55 |         <!-- Nav Works  -->
 56 |         <section class="nav-works">
 57 |             <div class="card">
 58 |                 <div class="card__item" onclick="location.href='./taller-1.html'">
 59 |                     <img src="assets/img/circle.png" alt="">
 60 |                     <div>
 61 |                         <header>
 62 |                             <h4>TALLER #1</h4>
 63 |                             <h2>Figuras Geometricas</h2>
 64 |                         </header>
 65 |                         <p>Calculo básicos para Cuadrados, Triangulos y Circulos.</p>
 66 |                     </div>
 67 |                 </div>
 68 |                 <div class="card__item" onclick="location.href='./taller-2.html'">
 69 |                     <img src="assets/img/price.png" alt="">
 70 |                     <div>
 71 |                         <header>
 72 |                             <h4>TALLER #2</h4>
 73 |                             <h2>Precios y descuentos</h2>
 74 |                         </header>
 75 |                         <p>Calculo básicos para precios, descuentos y cupones de pago.</p>
 76 |                     </div>
 77 |                 </div>
 78 |                 <div class="card__item" onclick="location.href='./taller-3.html'">
 79 |                     <img src="assets/img/discount.png" alt="">
 80 |                     <div>
 81 |                         <header>
 82 |                             <h4>TALLER #3</h4>
 83 |                             <h2>Promedios, Moda y Mediana</h2>
 84 |                         </header>
 85 |                         <p>Calculos básicos y avanzados.</p>
 86 |                     </div>
 87 |                 </div>
 88 |                 <div class="card__item" onclick="location.href='./taller-4.html'">
 89 |                     <img src="assets/img/dollar.png" alt="">
 90 |                     <div>
 91 |                         <header>
 92 |                             <h4>TALLER #4</h4>
 93 |                             <h2>Analisis Salarial</h2>
 94 |                         </header>
 95 |                         <p>Calculo básicos para trabajar con Salarios (medianas y top 10%).</p>
 96 |                     </div>
 97 |                 </div>
 98 |             </div>
 99 |         </section>
100 |     </main>
101 | </body>
102 | </html>


--------------------------------------------------------------------------------
/taller-1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Taller #1 - Figuras Geometricas - Curso Práctico de JavaScript</title>
  8 | 
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
 12 | 
 13 |     <link rel="stylesheet" href="assets/css/main.css">
 14 | </head>
 15 | <body>
 16 |     <header class="nav-bar">
 17 |         <nav>
 18 |             <div>
 19 |                 <a href="index.html"><img class="js-challenge" src="assets/img/js-challenge-logo.png" alt=""></a>
 20 |                 <img class="platzi" src="assets/img/platzi.webp" alt="">
 21 |             </div>
 22 |             <a class="user" href="https://www.linkedin.com/in/lucasfrezzini/" target="_blank">@lucasfrezzini</a>
 23 |         </nav>
 24 |     </header>
 25 |     <main>
 26 |         <a class="home-btn" href="./index.html">HOME</a>
 27 |         <!-- Main Section  -->
 28 |         <section class="main-section main-section--inside">
 29 |             <header>
 30 |                 <h3>TRABAJO PRÁCTICO - PLATZI</h3>
 31 |                 <h1>Figuras Geometricas</h1>
 32 |             </header>
 33 |             <div class="taller">
 34 |                 <!-- TRIANGULOS  -->
 35 |                 <section class="taller-card">
 36 |                     <img src="assets/img/triangle.png" alt="">
 37 |                     <h2>Triangulos</h2>
 38 |                     <form id="triangulos">
 39 |                         <div class="form-group">
 40 |                             <label for="inputTriangulo1">Ingrese <strong> Lado A</strong> en cm:</label>
 41 |                             <input type="number" name="lado" id="inputTriangulo1" min="1">
 42 |                             <p id="errorT1" class="error"></p>
 43 |                         </div>
 44 |                         <div class="form-group">
 45 |                             <label for="inputTriangulo2">Ingrese <strong> Lado B</strong> en cm:</label>
 46 |                             <input type="number" name="lado" id="inputTriangulo2" min="1">
 47 |                             <p id="errorT2" class="error"></p>
 48 |                         </div>
 49 |                         <div class="form-group">
 50 |                             <label for="inputBase">Ingrese <strong> Base</strong> en cm:</label>
 51 |                             <input type="number" name="lado" id="inputBase" min="1">
 52 |                             <p id="errorTBase" class="error"></p>
 53 |                         </div>
 54 |                         <div class="form-group">
 55 |                             <label for="inputAltura">Ingrese <strong> Altura</strong> en cm:</label>
 56 |                             <input type="number" name="lado" id="inputAltura" min="1">
 57 |                             <p id="errorTAltura" class="error"></p>
 58 |                         </div>
 59 |                         <button class="btn-form " type="button" onclick="calcularPerimetroTriangulo();">Calcular el perimetro</button>
 60 |                         <button class="btn-form" type="button" onclick="calcularAreaTriangulo();">calcular el area</button>
 61 |                     </form>
 62 |                 </section>
 63 |                 <!-- CUADRADOS Y RECTANGULOS  -->
 64 |                 <section  class="taller-card">
 65 |                     <img src="assets/img/square.png" alt="">
 66 |                     <h2>Cuadrados</h2>
 67 |                     <form id="cuadrados">
 68 |                         <div class="form-group">
 69 |                             <label for="inputCuadrado">Ingrese el <strong> Lado</strong> en cm:</label>
 70 |                             <input type="number" name="lado" id="inputCuadrado" min="1">
 71 |                             <p class="error" id="errorCL1"></p>
 72 |                         </div>
 73 |                         <button class="btn-form" type="button" onclick="calcularPerimetroCuadrado();">Calcular el perimetro</button>
 74 |                         <button class="btn-form" type="button" onclick="calcularAreaCuadrado();">Calcular el area</button>
 75 |                     </form>
 76 |                     <img src="assets/img/cube.png" alt="">
 77 |                     <h2>Rectangulos</h2>
 78 |                     <form id="rectangulos">
 79 |                         <div class="form-group">
 80 |                             <label for="inputRectangulo1">Ingrese el <strong> Lado A</strong> en cm:</label>
 81 |                             <input type="number" name="lado" id="inputRectangulo1" min="1">
 82 |                             <p class="error" id="errorRL1"></p>
 83 |                         </div>
 84 |                         <div class="form-group">
 85 |                             <label for="inputRectangulo2">Ingrese el <strong> Lado B</strong> en cm:</label>
 86 |                             <input type="number" name="lado" id="inputRectangulo2" min="1"> 
 87 |                             <p class="error" id="errorRL2"></p>
 88 |                         </div>
 89 |                         <button class="btn-form" type="button" onclick="calcularPerimetroRectangulo();">Calcular el perimetro</button>
 90 |                         <button class="btn-form" type="button" onclick="calcularAreaRectangulo();">Calcular el area</button>
 91 |                     </form>
 92 |                 </section>
 93 |                 <!-- CIRCULOS  -->
 94 |                 <section class="taller-card">
 95 |                     <img src="assets/img/circle.png" alt="">
 96 |                     <h2>Circulos</h2>
 97 |                     <form id="circulos">
 98 |                         <div class="form-group">
 99 |                             <label for="inputCirculo">Ingrese el <strong> Radio</strong> en cm:</label>
100 |                             <input type="number" name="lado" id="inputCirculo" min="1">
101 |                             <p class="error" id="errorCirculo"></p>
102 |                         </div>
103 |                         <button class="btn-form" type="button" onclick="calcularPerimetroCirculo();">Calcular el Perimetro</button>
104 |                         <button class="btn-form" type="button" onclick="calcularAreaCirculo();">calcular el Area</button>
105 |                         <button class="btn-form" type="button" onclick="calcularDiametroCirculo();">Calcular el Diametro</button>
106 |                     </form>
107 |                 </section>
108 |             </div>
109 |         </section>
110 | 
111 |         <!-- Nav Works  -->
112 |         <section class="nav-works nav-works--inside">
113 |             <div class="card">
114 |                 <div class="card__item" onclick="location.href='./taller-2.html'">
115 |                     <img src="assets/img/price.png" alt="">
116 |                     <div>
117 |                         <header>
118 |                             <h4>TALLER #2</h4>
119 |                             <h2>Porcentajes y descuentos</h2>
120 |                         </header>
121 |                         <p>Calculo básicos para precios, descuentos y cupones de pago.</p>
122 |                     </div>
123 |                 </div>
124 |                 <div class="card__item" onclick="location.href='./taller-3.html'">
125 |                     <img src="assets/img/discount.png" alt="">
126 |                     <div>
127 |                         <header>
128 |                             <h4>TALLER #3</h4>
129 |                             <h2>Media, Moda y Mediana</h2>
130 |                         </header>
131 |                         <p>Calculos básicos y avanzados.</p>
132 |                     </div>
133 |                 </div>
134 |                 <div class="card__item" onclick="location.href='./taller-4.html'">
135 |                     <img src="assets/img/dollar.png" alt="">
136 |                     <div>
137 |                         <header>
138 |                             <h4>TALLER #4</h4>
139 |                             <h2>Analisis Salarial</h2>
140 |                         </header>
141 |                         <p>Calculo básicos para trabajar con Salarios (medianas y top 10%).</p>
142 |                     </div>
143 |                 </div>
144 |             </div>
145 |         </section>
146 |     </main>
147 | 
148 |     <!-- Overlay Results  -->
149 |     <div class="overlay" id="overlay">
150 |         <div class="result" id="result">
151 |             <p><span onclick="closeOverlay();">x</span></p>
152 |             <img id="resultIMG" alt="">
153 |             <h2 id="resultH2"></h2>
154 |             <h4 id="resultH4"></h4>
155 |         </div>
156 |     </div>
157 | 
158 |     <script src="./assets/js/taller-1.js"></script>
159 | </body>
160 | </html>


--------------------------------------------------------------------------------
/taller-2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Taller #2 - Precios y descuentos - Curso Práctico de JavaScript</title>
  8 | 
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
 12 | 
 13 |     <link rel="stylesheet" href="assets/css/main.css">
 14 | </head>
 15 | <body>
 16 |     <header class="nav-bar">
 17 |         <nav>
 18 |             <div>
 19 |                 <a href="index.html"><img class="js-challenge" src="assets/img/js-challenge-logo.png" alt=""></a>
 20 |                 <img class="platzi" src="assets/img/platzi.webp" alt="">
 21 |             </div>
 22 |             <a class="user" href="https://www.linkedin.com/in/lucasfrezzini/" target="_blank">@lucasfrezzini</a>
 23 |         </nav>
 24 |     </header>
 25 |     <main>
 26 |         <a class="home-btn" href="./index.html">HOME</a>
 27 | 
 28 |         <!-- Main Section  -->
 29 |         <section class="main-section main-section--inside">
 30 |             <header>
 31 |                 <h3>TRABAJO PRÁCTICO - PLATZI</h3>
 32 |                 <h1>Porcentajes y descuentos en precios</h1>
 33 |             </header>
 34 |             <div class="taller">
 35 |                 <section id="precios-descuentos" class="taller-card">
 36 |                     <img src="assets/img/price.png" alt="">
 37 |                     <h2>Cálculos</h2>
 38 |                     <form>
 39 |                         <div class="form-group">
 40 |                             <label for="inputPrice">Escribe el <strong>Precio</strong> de tu producto</label>
 41 |                             <input type="number" id="inputPrice" min="1">
 42 |                             <p class="error" id="errorPrice"></p>
 43 |                         </div>
 44 |                         <div class="form-group">
 45 |                             <label for="inputDiscount">Escribe el <strong>Descuento</strong> de tu producto</label>
 46 |                             <input type="number" id="inputDiscount" min="0">
 47 |                             <p class="error" id="errorDiscount"></p>
 48 |                         </div>
 49 |                         <div class="form-group">
 50 |                             <label for="inputPrice">Escribe el <strong>Cupón</strong> si tienes</label>
 51 |                             <input type="text" id="inputCoupon">
 52 |                             <p class="error" id="errorCoupon"></p>
 53 |                         </div>
 54 |                         <button class="btn-form" type="button" onclick="onClickButtonPriceDiscount();"> Calcuar precio con descuento</button>
 55 |                     </form>
 56 |                 </section>
 57 |                 <section id="triangulos" class="taller-card">
 58 |                     <h2>Lista de Cupones disponibles</h2>
 59 |                     <ul>
 60 |                         <li>Promo10</li>
 61 |                         <li>Promo20</li>
 62 |                         <li>Promo30</li>
 63 |                     </ul>
 64 |                 </section>
 65 |             </div>
 66 |         </section>
 67 | 
 68 |         <!-- Nav Works  -->
 69 |         <section class="nav-works nav-works--inside">
 70 |             <div class="card">
 71 |                 <div class="card__item" onclick="location.href='./taller-1.html'">
 72 |                     <img src="assets/img/circle.png" alt="">
 73 |                     <div>
 74 |                         <header>
 75 |                             <h4>TALLER #1</h4>
 76 |                             <h2>Figuras Geometricas</h2>
 77 |                         </header>
 78 |                         <p>Calculo básicos para Cuadrados, Triangulos y Circulos.</p>
 79 |                     </div>
 80 |                 </div>
 81 |                 <div class="card__item" onclick="location.href='./taller-3.html'">
 82 |                     <img src="assets/img/discount.png" alt="">
 83 |                     <div>
 84 |                         <header>
 85 |                             <h4>TALLER #3</h4>
 86 |                             <h2>Media, Moda y Mediana</h2>
 87 |                         </header>
 88 |                         <p>Calculos básicos y avanzados.</p>
 89 |                     </div>
 90 |                 </div>
 91 |                 <div class="card__item" onclick="location.href='./taller-4.html'">
 92 |                     <img src="assets/img/dollar.png" alt="">
 93 |                     <div>
 94 |                         <header>
 95 |                             <h4>TALLER #4</h4>
 96 |                             <h2>Analisis Salarial</h2>
 97 |                         </header>
 98 |                         <p>Calculo básicos para trabajar con Salarios (medianas y top 10%).</p>
 99 |                     </div>
100 |                 </div>
101 |             </div>
102 |         </section>
103 |     </main>
104 | 
105 |     <!-- Overlay Results  -->
106 |     <div class="overlay" id="overlay">
107 |         <div class="result" id="result">
108 |             <p><span onclick="closeOverlay();">x</span></p>
109 |             <img id="resultIMG" alt="">
110 |             <h2 id="resultH2"></h2>
111 |             <h4 id="resultH4"></h4>
112 |         </div>
113 |     </div>
114 | 
115 |     <script src="./assets/js/taller-2.js"></script>
116 | </body>
117 | </html>


--------------------------------------------------------------------------------
/taller-3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Taller #3 - Promedios, Moda y Mediana - Curso Práctico de JavaScript</title>
  8 | 
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
 12 | 
 13 |     <link rel="stylesheet" href="assets/css/main.css">
 14 | </head>
 15 | <body>
 16 |     <header class="nav-bar">
 17 |         <nav>
 18 |             <div>
 19 |                 <a href="index.html"><img class="js-challenge" src="assets/img/js-challenge-logo.png" alt=""></a>
 20 |                 <img class="platzi" src="assets/img/platzi.webp" alt="">
 21 |             </div>
 22 |             <a class="user" href="https://www.linkedin.com/in/lucasfrezzini/" target="_blank">@lucasfrezzini</a>
 23 |         </nav>
 24 |     </header>
 25 |     <main>
 26 |         <a class="home-btn" href="./index.html">HOME</a>
 27 | 
 28 |         <!-- Main Section  -->
 29 |         <section class="main-section main-section--inside">
 30 |             <header>
 31 |                 <h3>TRABAJO PRÁCTICO - PLATZI</h3>
 32 |                 <h1>Media, Moda y Mediana en números enteros</h1>
 33 |             </header>
 34 |             <div class="taller">
 35 |                 <section class="taller-card">
 36 |                     <img src="assets/img/discount.png" alt="">
 37 |                     <header>
 38 |                         <h2>Cálculos:</h2>
 39 |                         <div class="select">
 40 |                             <select class="" id="formulaSelect" name="select" onchange="switchFormula();">
 41 |                                 <option value="1" selected>Media Aritmetica</option>
 42 |                                 <option value="2">Media Armonica</option>
 43 |                                 <option value="3">Media Geometrica</option>
 44 |                                 <option value="4">Moda</option>
 45 |                                 <option value="5">Mediana</option>
 46 |                             </select>
 47 |                         </div>
 48 |                     </header>
 49 |                     <form id="form">
 50 |                         <div class="form-group">
 51 |                             <label for="inputPrice">Escribe un <strong> Nuevo Valor</strong> a la lista</label>
 52 |                             <input type="number" id="addValue">
 53 |                             <p class="error" id="errorAddValue"></p>
 54 |                             <button class="btn-form" type="button" onclick="addListNumber();" min="0"> Agregar a la lista</button>
 55 |                         </div>
 56 |                         
 57 |                         <div class="form-group">
 58 |                             <label for="inputDiscount">Escribe la <strong>Posición </strong> del valor a Eliminar de la lista</label>
 59 |                             <input type="number" id="removeValue">
 60 |                             <p class="error" id="errorRemoveValue"></p>
 61 |                             <button class="btn-form btn-form--alert" type="button" onclick="removeListNumber();"> Quitar de la lista</button>
 62 |                         </div>
 63 |                         <button class="btn-form" id="btn-render" type="button" onclick="renderMediaAritmetica();"> Calcular Media Aritmetica</button>
 64 |                         <p class="error" id="errorList"></p>
 65 |                     </form>
 66 |                 </section>
 67 |                 <section class="taller-card">
 68 |                     <h2>Lista de Valores cargados</h2>
 69 |                     <ul id="list-values">
 70 |                     </ul>
 71 |                 </section>
 72 |             </div>
 73 |         </section>
 74 | 
 75 |         <!-- Nav Works  -->
 76 |         <section class="nav-works nav-works--inside">
 77 |             <div class="card">
 78 |                 <div class="card__item" onclick="location.href='./taller-1.html'">
 79 |                     <img src="assets/img/circle.png" alt="">
 80 |                     <div>
 81 |                         <header>
 82 |                             <h4>TALLER #1</h4>
 83 |                             <h2>Figuras Geometricas</h2>
 84 |                         </header>
 85 |                         <p>Calculo básicos para Cuadrados, Triangulos y Circulos.</p>
 86 |                     </div>
 87 |                 </div>
 88 |                 <div class="card__item" onclick="location.href='./taller-2.html'">
 89 |                     <img src="assets/img/price.png" alt="">
 90 |                     <div>
 91 |                         <header>
 92 |                             <h4>TALLER #2</h4>
 93 |                             <h2>Precios y descuentos</h2>
 94 |                         </header>
 95 |                         <p>Calculo básicos para precios, descuentos y cupones de pago.</p>
 96 |                     </div>
 97 |                 </div>
 98 |                 <div class="card__item" onclick="location.href='./taller-4.html'">
 99 |                     <img src="assets/img/dollar.png" alt="">
100 |                     <div>
101 |                         <header>
102 |                             <h4>TALLER #4</h4>
103 |                             <h2>Analisis Salarial</h2>
104 |                         </header>
105 |                         <p>Calculo básicos para trabajar con Salarios (medianas y top 10%).</p>
106 |                     </div>
107 |                 </div>
108 |             </div>
109 |         </section>
110 |     </main>
111 | 
112 |     <!-- Overlay Results  -->
113 |     <div class="overlay" id="overlay">
114 |         <div class="result" id="result">
115 |             <p><span onclick="closeOverlay();">x</span></p>
116 |             <img id="resultIMG" alt="">
117 |             <h2 id="resultH2"></h2>
118 |             <h4 id="resultH4"></h4>
119 |         </div>
120 |     </div>
121 | 
122 |     <script src="./assets/js/taller-3.js"></script>
123 | </body>
124 | </html>


--------------------------------------------------------------------------------
/taller-4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Taller #3 - Promedios, Moda y Mediana - Curso Práctico de JavaScript</title>
  8 | 
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
 12 | 
 13 |     <link rel="stylesheet" href="assets/css/main.css">
 14 | </head>
 15 | <body>
 16 |     <header class="nav-bar">
 17 |         <nav>
 18 |             <div>
 19 |                 <a href="index.html"><img class="js-challenge" src="assets/img/js-challenge-logo.png" alt=""></a>
 20 |                 <img class="platzi" src="assets/img/platzi.webp" alt="">
 21 |             </div>
 22 |             <a class="user" href="https://www.linkedin.com/in/lucasfrezzini/" target="_blank">@lucasfrezzini</a>
 23 |         </nav>
 24 |     </header>
 25 |     <main>
 26 |         <a class="home-btn" href="./index.html">HOME</a>
 27 | 
 28 |         <!-- Main Section  -->
 29 |         <section class="main-section main-section--inside">
 30 |             <header>
 31 |                 <h3>TRABAJO PRÁCTICO - PLATZI</h3>
 32 |                 <h1>Análisis Salarial</h1>
 33 |             </header>
 34 |             <div class="taller">
 35 |                 <section class="taller-card">
 36 |                     <img src="assets/img/dollar.png" alt="">
 37 |                     <header>
 38 |                         <h2>Cálculos:</h2>
 39 |                         <div class="select">
 40 |                             <select class="" id="formulaSelect" name="select" onchange="switchFormula();">
 41 |                                 <option value="1" selected>Mediana Salarial</option>
 42 |                                 <option value="2">Mediana Salarial TOP 10%</option>
 43 |                             </select>
 44 |                         </div>
 45 |                     </header>
 46 |                     <form id="form">
 47 |                         <label class="check"><input type="checkbox" id="checkInput" value="" checked> Utilizar lista precargada para testeo</label>
 48 |                         <div class="form-group">
 49 |                             <label for="inputPrice">Escribe un <strong> Nuevo Valor</strong> a la lista</label>
 50 |                             <input type="number" id="addValue">
 51 |                             <p class="error" id="errorAddValue"></p>
 52 |                             <button class="btn-form" type="button" onclick="addListNumber();" min="0"> Agregar a la lista</button>
 53 |                         </div>
 54 |                         
 55 |                         <div class="form-group">
 56 |                             <label for="inputDiscount">Escribe la <strong>Posición </strong> del valor a Eliminar de la lista</label>
 57 |                             <input type="number" id="removeValue">
 58 |                             <p class="error" id="errorRemoveValue"></p>
 59 |                             <button class="btn-form btn-form--alert" type="button" onclick="removeListNumber();"> Quitar de la lista</button>
 60 |                         </div>
 61 |                         <button class="btn-form" id="btn-render" type="button" onclick="renderMedianaSalarial();"> Calcular Mediana Salarial</button>
 62 |                         <p class="error" id="errorList"></p>
 63 |                     </form>
 64 |                 </section>
 65 |                 <section class="taller-card">
 66 |                     <h2>Lista de Valores Cargados</h2>
 67 |                     <ul id="list-values">
 68 |                     </ul>
 69 |                 </section>
 70 |                 <section class="taller-card">
 71 |                     <h2>Lista de Valores precargados para testeo</h2>
 72 |                     <ul id="list-values-default">
 73 |                     </ul>
 74 |                 </section>
 75 |             </div>
 76 |         </section>
 77 | 
 78 |         <!-- Nav Works  -->
 79 |         <section class="nav-works nav-works--inside">
 80 |             <div class="card">
 81 |                 <div class="card__item" onclick="location.href='./taller-1.html'">
 82 |                     <img src="assets/img/circle.png" alt="">
 83 |                     <div>
 84 |                         <header>
 85 |                             <h4>TALLER #1</h4>
 86 |                             <h2>Figuras Geometricas</h2>
 87 |                         </header>
 88 |                         <p>Calculo básicos para Cuadrados, Triangulos y Circulos.</p>
 89 |                     </div>
 90 |                 </div>
 91 |                 <div class="card__item" onclick="location.href='./taller-2.html'">
 92 |                     <img src="assets/img/price.png" alt="">
 93 |                     <div>
 94 |                         <header>
 95 |                             <h4>TALLER #2</h4>
 96 |                             <h2>Precios y descuentos</h2>
 97 |                         </header>
 98 |                         <p>Calculo básicos para precios, descuentos y cupones de pago.</p>
 99 |                     </div>
100 |                 </div>
101 |                 <div class="card__item" onclick="location.href='./taller-3.html'">
102 |                     <img src="assets/img/discount.png" alt="">
103 |                     <div>
104 |                         <header>
105 |                             <h4>TALLER #3</h4>
106 |                             <h2>Media, Moda y Mediana</h2>
107 |                         </header>
108 |                         <p>Calculos básicos y avanzados.</p>
109 |                     </div>
110 |                 </div>
111 |             </div>
112 |         </section>
113 |     </main>
114 | 
115 |     <!-- Overlay Results  -->
116 |     <div class="overlay" id="overlay">
117 |         <div class="result" id="result">
118 |             <p><span onclick="closeOverlay();">x</span></p>
119 |             <img id="resultIMG" alt="">
120 |             <h2 id="resultH2"></h2>
121 |             <h4 id="resultH4"></h4>
122 |         </div>
123 |     </div>
124 | 
125 |     <script src="./assets/js/salarios.js"></script>
126 |     <script src="./assets/js/taller-4.js"></script>
127 |     <script>
128 |         renderListDefault(colombia);
129 |     </script>
130 | </body>
131 | </html>


--------------------------------------------------------------------------------