├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── assets └── logo-esandries.svg ├── css ├── master.css └── master.css.map ├── images ├── index-taller.png ├── index-taller1.png ├── index-taller3.png ├── platzi-logo.jpeg ├── thumbnail-talle1.png ├── thumbnail-taller2.png └── thumbnail-taller3.png ├── index.html ├── javascript ├── figuras.js ├── taller1 │ └── calcuFiguras.js ├── taller2 │ └── descuentos.js └── taller3 │ └── estadistica.js ├── old-index.html ├── src ├── components │ ├── button.scss │ ├── calcuCard.html │ ├── calcuCard.scss │ └── card.scss ├── layout │ ├── esandries--header.scss │ ├── esandries--project.scss │ ├── footer.scss │ ├── header.scss │ ├── index.scss │ └── taller1-container.scss ├── master.scss └── settings │ ├── mixins.scss │ └── variables.scss ├── taller1.html ├── taller2.html └── taller3.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Emanuel Sandries 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 creado por Emanuel Sandries. 3 | ... 4 | 5 | ## Taller #1: figuras geométricas 6 | 7 | - Primer paso: definir las fórmulas 8 | - Segundo paso: implementar la fórmulas en JavaScript 9 | - Tercer paso: crear funciones 10 | - Cuarto paso: integrar JS con HTML 11 | 12 | ## Taller #2: porcentaajes y descuentos 13 | 14 | - Primer paso: definir las fórmulas 15 | - Segundo paso: implementar la fórmulas en JavaScript 16 | - Tercer paso: crear funciones 17 | - Cuarto paso: integrar JS con HTML 18 | 19 | ## Taller #3: promedio, mediana y moda 20 | 21 | - Primer paso: definir las fórmulas 22 | - Segundo paso: implementar la fórmulas en JavaScript 23 | - Tercer paso: crear funciones 24 | - Cuarto paso: integrar JS con HTML 25 | 26 | -------------------------------------------------------------------------------- /assets/logo-esandries.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css/master.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Montserrat:wght@400;600;700&display=swap"); 2 | .button { 3 | border: 2px solid; 4 | border-radius: 7px; 5 | padding: 6px 12px; 6 | font: 600 1.125rem/1.6875rem Montserrat; 7 | } 8 | .button:hover { 9 | box-shadow: 4px 2px #888888; 10 | } 11 | 12 | .pinkprimary { 13 | background-color: #d2004c; 14 | color: white; 15 | border: 2px solid #d2004c; 16 | width: 100%; 17 | } 18 | 19 | .pinksecondary { 20 | background-color: white; 21 | color: #d2004c; 22 | width: 100%; 23 | } 24 | 25 | .button.buttonblue { 26 | background-color: #3504c0; 27 | color: white; 28 | border: 2px solid #3504c0; 29 | width: 100%; 30 | } 31 | 32 | .button.yellow { 33 | background-color: #ffd900; 34 | color: black; 35 | border: 2px solid #ffd900; 36 | width: 100%; 37 | } 38 | 39 | .card { 40 | background-color: white; 41 | display: flex; 42 | flex-direction: column; 43 | padding-block: 30px; 44 | gap: 8px; 45 | border-radius: 17px; 46 | } 47 | 48 | @media (max-width: 1024px) { 49 | .card { 50 | width: 100%; 51 | height: 400px; 52 | } 53 | } 54 | @media (min-width: 1024px) { 55 | .card { 56 | padding-inline: 24px; 57 | min-width: 273px; 58 | width: 28%; 59 | max-width: 384px; 60 | } 61 | } 62 | .card__title { 63 | font: 700 1.5rem/1.6499999762rem Lato; 64 | color: #d2004c; 65 | } 66 | 67 | .card__title.blue { 68 | color: #3504c0; 69 | } 70 | 71 | .card__title.yellow { 72 | color: #ffd900; 73 | } 74 | 75 | .card--form { 76 | display: flex; 77 | height: 100%; 78 | flex-direction: column; 79 | gap: 8px; 80 | } 81 | 82 | .card--form__subtitle { 83 | font: 400 1.125rem/1.6875rem Montserrat; 84 | } 85 | 86 | .div-Input-Cuadrado { 87 | display: flex; 88 | gap: 16px; 89 | } 90 | .div-Input-Cuadrado input { 91 | padding: 8px; 92 | width: 100%; 93 | } 94 | 95 | .card--buttons { 96 | gap: 16px; 97 | display: flex; 98 | } 99 | 100 | .card--form__result { 101 | box-sizing: border-box; 102 | width: 100%; 103 | height: 100%; 104 | padding: 10px; 105 | border: 2px solid rgb(49, 47, 47); 106 | border-radius: 7px; 107 | } 108 | .card--form__result p { 109 | font: 400 0.875rem/1.5rem Montserrat; 110 | } 111 | 112 | /*ESandries Styles*/ 113 | .ESandries--header { 114 | background-color: #210511; 115 | } 116 | .ESandries--header .esandries--wrapper { 117 | margin: 0 auto; 118 | display: flex; 119 | align-items: center; 120 | height: 60px; 121 | max-width: 1200px; 122 | justify-content: space-between; 123 | padding-inline: 24px; 124 | } 125 | .ESandries--header .esandries--wrapper .esandries--header--navbar { 126 | width: 40%; 127 | } 128 | .ESandries--header .esandries--wrapper .esandries--header--navbar ul { 129 | display: flex; 130 | justify-content: space-between; 131 | list-style: none; 132 | } 133 | .ESandries--header .esandries--wrapper a { 134 | font: 700 0.875rem/1.6875rem Montserrat; 135 | text-decoration: none; 136 | color: #FF0380; 137 | } 138 | .ESandries--header .esandries--wrapper .header--callToActionBtn { 139 | background-color: #FF0380; 140 | padding-inline: 12px; 141 | padding-block: 6px; 142 | border-radius: 8px; 143 | -webkit-border-radius: 8px; 144 | -moz-border-radius: 8px; 145 | -ms-border-radius: 8px; 146 | -o-border-radius: 8px; 147 | } 148 | .ESandries--header .esandries--wrapper .header--callToActionBtn a { 149 | color: #210511; 150 | margin: 0; 151 | } 152 | 153 | @media (max-width: 1024px) { 154 | .esandries--header--navbar { 155 | display: none; 156 | } 157 | } 158 | .project { 159 | max-width: 1200px; 160 | padding-inline: 24px; 161 | margin: 0 auto; 162 | } 163 | 164 | .project--title { 165 | font-size: 1.75em; 166 | font-weight: bold; 167 | font-family: Lato; 168 | color: #FF0380; 169 | text-align: center; 170 | padding-block-start: 2rem; 171 | padding-block-end: 1rem; 172 | } 173 | 174 | .project--description { 175 | max-width: 588px; 176 | font-size: 1em; 177 | font-weight: 400; 178 | font-family: Montserrat; 179 | color: white; 180 | margin: 0 auto; 181 | padding-block-end: 2.5rem; 182 | } 183 | 184 | .project--container { 185 | gap: 24px; 186 | display: flex; 187 | flex-direction: row; 188 | flex-wrap: wrap; 189 | justify-content: space-between; 190 | } 191 | 192 | .calcuCard { 193 | border: solid 2px white; 194 | display: flex; 195 | flex-direction: column; 196 | padding-block: 30px; 197 | padding-inline: 10px; 198 | gap: 8px; 199 | border-radius: 12px; 200 | -webkit-border-radius: 12px; 201 | -moz-border-radius: 12px; 202 | -ms-border-radius: 12px; 203 | -o-border-radius: 12px; 204 | } 205 | 206 | @media (max-width: 1024px) { 207 | .calcuCard { 208 | width: 100%; 209 | height: 400px; 210 | } 211 | } 212 | @media (min-width: 1024px) { 213 | .calcuCard { 214 | padding-inline: 24px; 215 | min-width: 280px; 216 | max-width: 384px; 217 | } 218 | } 219 | .calcuCard--title { 220 | font: 700 1.5rem/1.6499999762rem Lato; 221 | color: white; 222 | } 223 | 224 | .calcuCard--formSubtitle { 225 | font: 400 1.125rem/1.6875rem Montserrat; 226 | color: white; 227 | } 228 | 229 | .caluCard--form { 230 | display: flex; 231 | height: 100%; 232 | flex-direction: column; 233 | gap: 8px; 234 | } 235 | 236 | .calcuCard--inputContainer { 237 | display: flex; 238 | gap: 16px; 239 | } 240 | .calcuCard--inputContainer input { 241 | padding: 8px; 242 | width: 100%; 243 | } 244 | 245 | .calcuCard--input { 246 | background-color: transparent; 247 | border: 2px solid white; 248 | border-radius: 8px; 249 | -webkit-border-radius: 8px; 250 | -moz-border-radius: 8px; 251 | -ms-border-radius: 8px; 252 | -o-border-radius: 8px; 253 | color: white; 254 | } 255 | .calcuCard--input::placeholder { 256 | color: #FF68B3; 257 | font-family: Montserrat; 258 | } 259 | 260 | .calcuCard--btnprimary { 261 | background-color: white; 262 | color: #1A040D; 263 | border: 2px solid white; 264 | width: 100%; 265 | } 266 | 267 | .calcuCard--btnsecondary { 268 | background-color: transparent; 269 | color: white; 270 | border: 2px solid white; 271 | width: 100%; 272 | } 273 | 274 | .calcuCard--result { 275 | box-sizing: border-box; 276 | width: 100%; 277 | height: 100%; 278 | padding: 10px; 279 | border: 1px solid white; 280 | border-radius: 7px; 281 | } 282 | .calcuCard--result p { 283 | font: 400 0.875rem/1.5rem Montserrat; 284 | color: white; 285 | } 286 | 287 | .calcuCard--textresult { 288 | color: white; 289 | } 290 | 291 | .header-jspractico { 292 | padding: 0 20px; 293 | display: flex; 294 | align-items: center; 295 | justify-content: space-between; 296 | height: 10vh; 297 | } 298 | .header-jspractico .nav-options ul { 299 | display: flex; 300 | list-style: none; 301 | gap: 16px; 302 | } 303 | .header-jspractico .nav-options ul a { 304 | text-decoration: none; 305 | font: 700 1.25rem/1.6499999762rem Lato; 306 | } 307 | 308 | .header-jspractico.pink .nav-options ul a { 309 | color: #fc8fb6; 310 | } 311 | .header-jspractico.pink .nav-options ul a:hover { 312 | color: #d2004c; 313 | } 314 | .header-jspractico.pink .nav-options ul .weAreHere a { 315 | color: #d2004c; 316 | } 317 | 318 | .header-jspractico.blue .nav-options ul a { 319 | color: #7b61ff; 320 | } 321 | .header-jspractico.blue .nav-options ul a:hover { 322 | color: #3504c0; 323 | } 324 | .header-jspractico.blue .nav-options ul .weAreHereBlue { 325 | color: #3504c0; 326 | } 327 | 328 | .header-jspractico.yellow .nav-options ul a { 329 | color: #ffe75e; 330 | } 331 | .header-jspractico.yellow .nav-options ul a:hover { 332 | color: #bca000; 333 | } 334 | .header-jspractico.yellow .nav-options ul .weAreHere { 335 | color: #ffd900; 336 | } 337 | 338 | .header-jspractico.index .nav-options ul a { 339 | color: #363636; 340 | } 341 | .header-jspractico.index .nav-options ul a:hover { 342 | color: rgb(26, 26, 26); 343 | } 344 | .header-jspractico.index img { 345 | height: 45px; 346 | width: auto; 347 | } 348 | 349 | .footer-taller1 { 350 | background-color: #fc8fb6; 351 | display: flex; 352 | flex-wrap: wrap; 353 | justify-content: space-between; 354 | padding: 0 20px; 355 | align-items: center; 356 | } 357 | .footer-taller1 .footer-information ul { 358 | display: flex; 359 | flex-wrap: wrap; 360 | list-style: none; 361 | } 362 | 363 | .footer-information.pink a { 364 | font: 400 0.875rem/1.5rem Montserrat; 365 | text-decoration: none; 366 | color: #d2004c; 367 | } 368 | .footer-information.pink a:hover { 369 | color: #ab013e; 370 | } 371 | 372 | .footer-taller1.blue { 373 | background-color: #7b61ff; 374 | } 375 | .footer-taller1.blue a { 376 | font: 400 0.875rem/1.5rem Montserrat; 377 | text-decoration: none; 378 | color: #3504c0; 379 | } 380 | .footer-taller1.blue a:hover { 381 | color: #3504c0; 382 | } 383 | 384 | .footer-taller1.yellow { 385 | background-color: #ffe75e; 386 | } 387 | .footer-taller1.yellow a { 388 | font: 400 0.875rem/1.5rem Montserrat; 389 | text-decoration: none; 390 | color: black; 391 | } 392 | .footer-taller1.yellow a:hover { 393 | color: #ffd900; 394 | } 395 | 396 | .footer-taller1.index { 397 | background-color: white; 398 | } 399 | .footer-taller1.index a { 400 | font: 400 0.875rem/1.5rem Montserrat; 401 | text-decoration: none; 402 | color: black; 403 | } 404 | .footer-taller1.index a:hover { 405 | color: #ffd900; 406 | } 407 | 408 | .footer-copyright { 409 | font: 400 0.875rem/1.5rem Montserrat; 410 | } 411 | .footer-copyright a { 412 | color: #232323; 413 | } 414 | 415 | @media (min-width: 1024px) { 416 | .footer-taller1 { 417 | height: 10vh; 418 | } 419 | 420 | .footer-information ul { 421 | gap: 16px; 422 | } 423 | } 424 | @media (max-width: 1024px) { 425 | .footer-taller1 { 426 | padding: 20px; 427 | justify-content: center; 428 | } 429 | 430 | .footer-information ul { 431 | gap: 4px; 432 | } 433 | } 434 | .indextitle { 435 | font: 700 2rem/2rem Lato; 436 | text-align: center; 437 | padding: 0 20px 20px 20px; 438 | } 439 | 440 | .taller { 441 | display: flex; 442 | flex-direction: column; 443 | justify-content: center; 444 | align-items: center; 445 | height: 100%; 446 | min-height: 150px; 447 | background-size: cover; 448 | background-repeat: no-repeat; 449 | } 450 | .taller a { 451 | text-decoration: none; 452 | color: white; 453 | text-align: center; 454 | } 455 | .taller a h2 { 456 | font: 700 1.5rem/1.6499999762rem Lato; 457 | } 458 | .taller a p { 459 | font: 400 1.125rem/1.6875rem Montserrat; 460 | } 461 | 462 | .taller1 { 463 | background-image: url("../../images/index-taller1.png"); 464 | } 465 | 466 | .taller2 { 467 | background-image: url("../../images/index-taller.png"); 468 | } 469 | 470 | .taller3 { 471 | background-image: url("../../images/index-taller3.png"); 472 | } 473 | 474 | .taller4 { 475 | background-image: url("../../images/thumbnail-talle1.png"); 476 | } 477 | 478 | @media (max-width: 599px) { 479 | .indexgrid { 480 | height: 60%; 481 | display: grid; 482 | grid-template-columns: 1fr; 483 | grid-template-rows: 1fr, 1fr, 1fr, 1fr; 484 | } 485 | .indexgrid .taller1 { 486 | background-color: royalblue; 487 | } 488 | .indexgrid .taller2 { 489 | background-color: brown; 490 | } 491 | .indexgrid .taller3 { 492 | background-color: antiquewhite; 493 | } 494 | .indexgrid .taller4 { 495 | background-color: aqua; 496 | } 497 | } 498 | @media (min-width: 600px) { 499 | body { 500 | height: 100vh; 501 | } 502 | 503 | .indexgrid { 504 | height: 60%; 505 | min-height: 500px; 506 | display: grid; 507 | grid-template-columns: 1fr, 1fr; 508 | grid-template-rows: 1fr, 1fr; 509 | } 510 | .indexgrid .taller1 { 511 | background-color: royalblue; 512 | grid-column: 1/2; 513 | grid-row: 1/2; 514 | } 515 | .indexgrid .taller2 { 516 | background-color: brown; 517 | grid-column: 2/3; 518 | grid-row: 1/2; 519 | } 520 | .indexgrid .taller3 { 521 | background-color: antiquewhite; 522 | grid-column: 1/2; 523 | grid-row: 2/3; 524 | } 525 | .indexgrid .taller4 { 526 | background-color: aqua; 527 | grid-column: 2/3; 528 | grid-row: 2/3; 529 | } 530 | } 531 | .taller1-container { 532 | padding: 0 20px; 533 | } 534 | .taller1-container h2 { 535 | font: 700 2rem/2rem Lato; 536 | text-align: center; 537 | padding: 10px 0; 538 | } 539 | .taller1-container .figuras-container { 540 | height: 88%; 541 | display: flex; 542 | flex-direction: row; 543 | flex-wrap: wrap; 544 | justify-content: space-between; 545 | } 546 | 547 | @media (min-width: 1024px) { 548 | .taller1-container { 549 | height: 79vh; 550 | background-color: #fc8fb6; 551 | } 552 | 553 | .taller1-container.blue { 554 | background-color: #7b61ff; 555 | } 556 | .taller1-container.blue .figuras-container { 557 | justify-content: center; 558 | } 559 | 560 | .taller1-container.yellow { 561 | background-color: #ffe75e; 562 | } 563 | .taller1-container.yellow .figuras-container { 564 | justify-content: center; 565 | } 566 | } 567 | * { 568 | margin: 0; 569 | padding: 0; 570 | } 571 | 572 | body { 573 | background-color: #1A040D; 574 | } 575 | 576 | /*# sourceMappingURL=master.css.map */ 577 | -------------------------------------------------------------------------------- /css/master.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../src/master.scss","../src/components/button.scss","../src/settings/variables.scss","../src/components/card.scss","../src/settings/mixins.scss","../src/layout/esandries--header.scss","../src/layout/esandries--project.scss","../src/components/calcuCard.scss","../src/layout/header.scss","../src/layout/footer.scss","../src/layout/index.scss","../src/layout/taller1-container.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA,MC0BO;;ADzBP;EACE;;;AAGJ;EACE,kBCNW;EDOX;EACA;EACA;;;AAGF;EACE;EACA,OCdW;EDeX;;;AAGF;EACE,kBCtBW;EDuBX;EACA;EACA;;;AAEF;EACE,kBCtBa;EDuBb;EACA;EACA;;;AEhCF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACWA;EDPA;IACE;IACA;;;ACWF;EDNA;IACE;IACA;IACA;IACA;;;AAIJ;EACE,MDFU;ECGV,ODvBW;;;AC0Bb;EACE,OD9BW;;;ACiCb;EACE,OD5Ba;;;AC+Bf;EACE;EACA;EACA;EACA;;;AAGF;EACE,MDpBM;;;ACuBR;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,MD7CI;;;AFrBR;AKPA;EACI,kBHaiB;;AGXjB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;;AAIR;EACI,MHKH;EGJG;EACA,OHTa;;AGYjB;EAMI,kBHlBa;EGmBb;EACA;EACA;EACA;EACA;EACA;EACA;;AAZA;EACI,OHjBK;EGkBL;;;ADfd;EC+BE;IACG;;;AChDP;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA,OJMqB;EILrB;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AChCJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AHMF;EGFE;IACI;IACA;;;AHMN;EGDE;IACI;IACA;IACA;;;AAIR;EACI,MLNQ;EKOR;;;AAGJ;EACI,MLTI;EKUJ;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,OLjDqB;EKkDrB;;;AAIR;EACI;EACA,OL3Da;EK4Db;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,MLnEA;EKoEA;;;AAIR;EACI;;;ACrGJ;EACE;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA,MNWM;;;AMJR;EACE,ONhBY;;AMiBZ;EACE,ONpBK;;AMuBT;EACE,ONxBO;;;AM+BT;EACE,ONjCY;;AMkCZ;EACE,ONpCc;;AMuClB;EACE,ONzCO;;;AMgDT;EACE,ON1Cc;;AM2Cd;EACE,ON3CY;;AM8ChB;EACE,ONjDS;;;AMwDX;EACE,ONrDa;;AMsDb;EACE,ONxDM;;AM4DZ;EACE;EACA;;;ACxEJ;EACE,kBPKgB;EOJhB;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE,MPWI;EOVJ;EACA,OPfS;;AOgBT;EACE,OPhBgB;;;AOqBtB;EACE,kBPxBgB;;AOyBhB;EACE,MPDI;EOEJ;EACA,OP9BS;;AO+BT;EACE,OP/BgB;;;AOmCtB;EACE,kBP9BkB;;AO+BlB;EACE,MPZI;EOaJ;EACA;;AACA;EACE,OPrCS;;;AOyCf;EACE;;AACA;EACE,MPvBI;EOwBJ;EACA;;AACA;EACE,OPhDS;;;AOqDf;EACE,MPjCM;;AOkCN;EACE;;;ALxCF;EK6CA;IACE;;;EAEF;IACE;;;ALvDF;EK4DA;IACE;IACA;;;EAEF;IACE;;;AClFJ;EACE,MRsBU;EQrBV;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE,MRIM;;AQFR;EACE,MRGE;;;AQER;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;ANtCA;EM0CA;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;ANrDJ;EM2DA;IACE;;;EAEF;IACE;IACA;IACA;IACA;IACA;;EACA;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AC5FN;EACE;;AACA;EACE,MToBQ;ESnBR;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;APWF;EONA;IACE;IACA,kBTbc;;;ESehB;IACE,kBTnBc;;ESoBd;IACE;;;EAIJ;IACE,kBTrBgB;;ESsBhB;IACE;;;AXbN;EACE;EACA;;;AAGF;EACE,kBETe","file":"master.css"} -------------------------------------------------------------------------------- /images/index-taller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ESandries/platzi-curso-practico-javascript/4d53baa86a24a594c68650c9a7fc9beb6efaed66/images/index-taller.png -------------------------------------------------------------------------------- /images/index-taller1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ESandries/platzi-curso-practico-javascript/4d53baa86a24a594c68650c9a7fc9beb6efaed66/images/index-taller1.png -------------------------------------------------------------------------------- /images/index-taller3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ESandries/platzi-curso-practico-javascript/4d53baa86a24a594c68650c9a7fc9beb6efaed66/images/index-taller3.png -------------------------------------------------------------------------------- /images/platzi-logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ESandries/platzi-curso-practico-javascript/4d53baa86a24a594c68650c9a7fc9beb6efaed66/images/platzi-logo.jpeg -------------------------------------------------------------------------------- /images/thumbnail-talle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ESandries/platzi-curso-practico-javascript/4d53baa86a24a594c68650c9a7fc9beb6efaed66/images/thumbnail-talle1.png -------------------------------------------------------------------------------- /images/thumbnail-taller2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ESandries/platzi-curso-practico-javascript/4d53baa86a24a594c68650c9a7fc9beb6efaed66/images/thumbnail-taller2.png -------------------------------------------------------------------------------- /images/thumbnail-taller3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ESandries/platzi-curso-practico-javascript/4d53baa86a24a594c68650c9a7fc9beb6efaed66/images/thumbnail-taller3.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 17 | 18 | Curso Práctico JS 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | 47 | 56 |
57 | Contact me 58 |
59 |
60 | 61 |
62 |
63 |
64 |

PLTZ - Curso de JavaScript Práctico

65 |

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.

Las 3 primeras tarjetas son calculadoras que son utiles si quieres conseguir areas o perimetros de una manera muy rápida.

66 |
67 |
68 | 69 |

Cuadrado

70 |
71 | 74 |
75 | 81 |
82 |
83 | 90 | 97 |
98 |

Resultado:

99 |
100 |

101 |
102 |
103 |
104 | 105 |
106 | 107 |

Triangulo

108 |
109 | 112 |
113 | 119 |
120 | 123 | 124 |
125 | 131 |
132 | 135 |
136 | 142 |
143 | 144 |
145 | 152 | 159 |
160 |

Resultado:

161 |
162 |

163 |
164 |
165 |
166 | 167 |
168 | 169 |

Circulo

170 |
171 | 174 |
175 | 181 |
182 |
183 | 190 | 197 |
198 | 205 |

Resultado:

206 |
207 |

208 |
209 |
210 |
211 | 212 |
213 | 214 |

Precio con descuento

215 |
216 | 219 |
220 | 226 |
227 | 230 |
231 | 237 |
238 |
239 | 246 |
247 |

Resultado:

248 |
249 |

250 |
251 |
252 |
253 | 254 |
255 | 256 |

Promedio, media y moda

257 |
258 | 261 |
262 | 268 |
269 |
270 | 277 | 284 | 291 |
292 |

Resultado:

293 |
294 |

295 |
296 |
297 |
298 | 299 |
300 |
301 |
302 | 303 | 304 | 305 | 306 | 307 | -------------------------------------------------------------------------------- /javascript/figuras.js: -------------------------------------------------------------------------------- 1 | // Código del cuadrado 2 | console.group("Cuadrados"); 3 | 4 | //const ladoCuadrado = 5; 5 | //console.log(`los lados de cuadrado miden: ${ladoCuadrado} cm`); 6 | 7 | function perimetroCuadrado(lado){ 8 | return lado * 4; 9 | } 10 | //console.log(`el perimetro del cuadrado es: ${perimetroCuadrado} cm`) 11 | 12 | function areaCuadrado(lado){ 13 | return lado * lado; 14 | } 15 | //console.log(`el área del cuadrado es: ${areaCuadrado} cm'2 `) 16 | 17 | console.groupEnd(); 18 | 19 | //Código del triangulo 20 | 21 | console.group("Triangulo"); 22 | 23 | //const ladoTriangulo1 = 6; 24 | //const ladoTriangulo2 = 6; 25 | //const baseTriangulo = 4; 26 | //const alturaTriangulo = 5.5; 27 | //console.log(`los lados de cuadrado miden: ${ladoTriangulo1} cm, ${ladoTriangulo2} cm y ${baseTriangulo} cm`); 28 | 29 | function perimetroTriangulo(lado1, lado2, base){ 30 | return lado1 + lado2 + base; 31 | } 32 | 33 | //const areaTriangulo = (baseTriangulo * alturaTriangulo) / 2; 34 | //console.log(`el área del tringulo es: ${areaTriangulo} cm'2 `) 35 | 36 | function areaCirculo(altura, base){ 37 | return (altura * base) / 2; 38 | } 39 | 40 | console.groupEnd(); 41 | //Código del circulo. 42 | 43 | //Radio 44 | console.group("Ciculo"); 45 | //const radioCirculo = 4; 46 | //console.log(`el radio del circulo es: ${radioCirculo} cm`); 47 | //Diametro 48 | 49 | //const diametroCirculo = radioCirculo * 2; 50 | //console.log(`el diamtro del circulo es: ${diametroCirculo} cm`); 51 | 52 | function diametroCirculo(radio){ 53 | return radio * 2; 54 | } 55 | 56 | //Pi 57 | 58 | const PI = Math.PI 59 | console.log(`Pi es: ${PI}`); 60 | //Circunferencia 61 | 62 | //const circunferenciaCirculo = diametroCirculo * PI; 63 | //console.log(`la circunferencia del circulo es: ${circunferenciaCirculo} cm`); 64 | function circunferenciaCirculo(radio){ 65 | let diametro = diametroCirculo(radio); 66 | return diametro * PI; 67 | } 68 | 69 | 70 | //Area 71 | //const areaCirculo = (radioCirculo * radioCirculo) * PI; 72 | //console.log(`el área del ciculo es: ${areaCirculo} cm`); 73 | function areaCirculo(radio){ 74 | return (radio*radio) * PI; 75 | } 76 | 77 | console.groupEnd(); 78 | 79 | //Aquí interactuamos con el HTML 80 | function calcularPerimetroCuadrado(){ 81 | let input = document.getElementById("inputCuadrado"); 82 | let value = input.value; 83 | let perimetro = perimetroCuadrado(value); 84 | alert(perimetro); 85 | } 86 | 87 | function calcularAreaCuadrado(){ 88 | let input = document.getElementById("inputCuadrado"); 89 | let value = input.value; 90 | let area = areaCuadrado(value); 91 | alert(area); 92 | } -------------------------------------------------------------------------------- /javascript/taller1/calcuFiguras.js: -------------------------------------------------------------------------------- 1 | //Acá inicia el código del cuadrado: 2 | 3 | // Fórmula para calcular el area: 4 | function formularAreaCuadrado(lado){ 5 | return lado * lado; 6 | } 7 | 8 | // Fórmula para calcular el perimetro: 9 | 10 | function formulaPerimetroCuadrado(lado){ 11 | return lado * 4; 12 | } 13 | 14 | //Interacción con el html: 15 | 16 | 17 | function calcularAreaCuadrado(){ 18 | const input = document.getElementById("ladoCuadrado"); 19 | const result = document.getElementById("resultCuadrado"); 20 | const value = input.value; 21 | 22 | const area = formularAreaCuadrado(value); 23 | result.innerText = `El área es ${area}`; 24 | } 25 | 26 | function calcularPerimetroCuadrado(){ 27 | const input = document.getElementById("ladoCuadrado"); 28 | const result = document.getElementById("resultCuadrado"); 29 | const value = input.value; 30 | 31 | const perimetro = formulaPerimetroCuadrado(value); 32 | 33 | result.innerText = `El perímetro es ${perimetro}`; 34 | 35 | } 36 | 37 | //Código del triangulo 38 | 39 | function formulaAreaTriangulo(altura, base){ 40 | return (base * altura) / 2 41 | } 42 | 43 | function formulaPerimetroTriangulo(ladoA, ladoB, base){ 44 | return Number.parseInt(ladoA) + Number.parseInt(ladoB) + Number.parseInt(base); 45 | } 46 | 47 | function calcularAlturaTriangulo(ladoA, ladoB, base){ 48 | if(ladoA === ladoB){ 49 | return Math.sqrt((ladoA * ladoA) - ((base / 2) * (base / 2))) 50 | } else{ 51 | return (ladoA * ladoB) / base 52 | } 53 | } 54 | 55 | function calcularAreaTriangulo(){ 56 | const result = document.getElementById("resultTriangulo"); 57 | let ladoA = document.getElementById("ladoAtriangulo"); 58 | let ladoAValue = ladoA.value; 59 | let ladoB = document.getElementById("ladoBTriangulo"); 60 | let ladoBValue = ladoB.value; 61 | let base = document.getElementById("baseTriangulo"); 62 | let baseValue = base.value; 63 | 64 | let altura = calcularAlturaTriangulo(ladoAValue, ladoBValue, baseValue); 65 | let area = formulaAreaTriangulo(altura, baseValue); 66 | 67 | result.innerText = `El área del triangulo es ${area}` 68 | 69 | } 70 | 71 | function calcularPerimetroTriangulo(){ 72 | const result = document.getElementById("resultTriangulo"); 73 | let ladoA = document.getElementById("ladoAtriangulo"); 74 | let ladoAValue = ladoA.value; 75 | let ladoB = document.getElementById("ladoBTriangulo"); 76 | let ladoBValue = ladoB.value; 77 | let base = document.getElementById("baseTriangulo"); 78 | let baseValue = base.value; 79 | 80 | let perimetro = formulaPerimetroTriangulo(ladoAValue, ladoBValue, baseValue); 81 | 82 | result.innerText = `El perímetro del triangulo es ${perimetro}` 83 | 84 | } 85 | 86 | 87 | 88 | //Código del circulo 89 | 90 | const PI = Math.PI; 91 | 92 | // Calcular el diametro: 93 | function formulaDiametro(radio){ 94 | return radio * 2; 95 | } 96 | 97 | //Calcular la circunferencia: 98 | 99 | function formulaCircunferencia(radio){ 100 | const diametro = formulaDiametro(radio); 101 | 102 | return diametro * PI; 103 | } 104 | 105 | // Calcular el area: 106 | 107 | function formulaAreaCirculo(radio){ 108 | return (radio * radio) * PI; 109 | } 110 | 111 | //Interactuar con el html del circulo 112 | 113 | function calcularAreaCirculo(){ 114 | const input = document.getElementById("radioCirculo"); 115 | const result = document.getElementById("resultCirulo"); 116 | const value = input.value; 117 | 118 | const area = formulaAreaCirculo(value); 119 | result.innerText = `El área del circulo es: ${area}` 120 | } 121 | 122 | function calcularCircunferencia(){ 123 | const input = document.getElementById("radioCirculo"); 124 | const result = document.getElementById("resultCirulo"); 125 | const value = input.value; 126 | 127 | const circunferencia = formulaCircunferencia(value); 128 | result.innerText = `La circunferencia del circulo es: ${circunferencia}` 129 | } 130 | 131 | function calcularDiametro(){ 132 | const input = document.getElementById("radioCirculo"); 133 | const result = document.getElementById("resultCirulo"); 134 | const value = input.value; 135 | 136 | const diametro = formulaDiametro(value); 137 | result.innerText = `El diametro del circulo es: ${diametro}` 138 | } 139 | -------------------------------------------------------------------------------- /javascript/taller2/descuentos.js: -------------------------------------------------------------------------------- 1 | function formulaDescuento(precio, descuento){ 2 | return (precio * (100 - descuento)) / 100; 3 | } 4 | 5 | function calcularPrecioConDescuento(){ 6 | let precioInput = document.getElementById("priceInput"); 7 | let precioValue = precioInput.value; 8 | let descuentoInput = document.getElementById("descuento"); 9 | let descuentoValue = descuentoInput.value; 10 | let result = document.getElementById("resultDescuento"); 11 | 12 | let precioDescuento = formulaDescuento(precioValue, descuentoValue); 13 | 14 | result.innerText = `El precio con un descuento de ${descuentoValue}% es de $${precioDescuento}`; 15 | } -------------------------------------------------------------------------------- /javascript/taller3/estadistica.js: -------------------------------------------------------------------------------- 1 | 2 | function formulaMediaAritmetica(lista){ 3 | const sumaLista = lista.reduce( 4 | function (valorAcumulado = 0, nuevoElemento){ 5 | return valorAcumulado + nuevoElemento; 6 | } 7 | ) 8 | const promediolista = sumaLista / lista.length; 9 | 10 | return promediolista 11 | } 12 | 13 | function formulaMediana(list){ 14 | 15 | let listOrder = list; 16 | listOrder.sort((a, b) => a - b); 17 | console.log("God is alive"+listOrder); 18 | 19 | let lista = listOrder; 20 | 21 | 22 | const mitadlista = parseInt(lista.length / 2); 23 | let mediana; 24 | 25 | function esPar(numerito){ 26 | if(numerito % 2 == 0){ 27 | return true; 28 | } else { 29 | return false; 30 | } 31 | } 32 | 33 | if(esPar(lista.length)){ 34 | const elemnto1 = lista[mitadlista]; 35 | const elemnto2 = lista[mitadlista + 1]; 36 | const elemnto1y2 = formulaMediaAritmetica([ 37 | elemnto1, 38 | elemnto2, 39 | ]) 40 | 41 | mediana = elemnto1y2; 42 | 43 | } else{ 44 | mediana = lista[mitadlista]; 45 | } 46 | 47 | console.log(mediana); 48 | 49 | return mediana; 50 | } 51 | 52 | function formulaMode(list){ 53 | let lista = list; 54 | 55 | const listaCount = {}; 56 | 57 | lista.map( 58 | function (elemento){ 59 | if(listaCount[elemento]){ 60 | listaCount[elemento] += 1; 61 | } else{ 62 | listaCount[elemento] = 1; 63 | } 64 | } 65 | ) 66 | 67 | } 68 | 69 | 70 | function calcularMediaAritmetica(){ 71 | let resultSelect = document.getElementById("resultEstadistica"); 72 | 73 | let inputSelect = document.getElementById("datos"); 74 | let value = inputSelect.value; 75 | console.log(value) 76 | let valueArray = Array.from(value.split(','),Number) 77 | console.log(valueArray) 78 | let promedio = formulaMediaAritmetica(valueArray); 79 | 80 | resultSelect.innerText = "El promedio de los datos ingresados es: " + promedio; 81 | } 82 | 83 | function calcularMediana(){ 84 | let resultSelect = document.getElementById("resultEstadistica"); 85 | 86 | let inputSelect = document.getElementById("datos"); 87 | let value = inputSelect.value; 88 | console.log(value) 89 | let valueArray = Array.from(value.split(','),Number) 90 | console.log(valueArray) 91 | let mediana = formulaMediana(valueArray); 92 | 93 | resultSelect.innerText = "La mediana de los datos ingresados es: " + mediana; 94 | } 95 | 96 | -------------------------------------------------------------------------------- /old-index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Figuras 8 | 9 | 10 | 11 |
12 | 13 | 20 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 |

33 | En este sitio web podras probar todos los talleres del curso practico de 34 | javascritp de platzi 35 |

36 |
37 |
38 | 39 |

Taller 1

40 |

Calculadora de areas y perimetros

41 | 42 |
43 |
44 |

Taller 2

46 |

Calculadora de descuentos

 48 |
49 |
50 |

Taller 3

52 |

Calculadora de descuentos

 54 |
55 |
56 |

Taller 4

58 |

Calculadora de descuentos

 60 |
61 |
62 |
63 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /src/components/button.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | border: 2px solid; 3 | border-radius: 7px; 4 | padding: 6px 12px; 5 | font: $button; 6 | &:hover { 7 | box-shadow: 4px 2px #888888; 8 | } 9 | } 10 | .pinkprimary { 11 | background-color: $color-pink; 12 | color: white; 13 | border: 2px solid $color-pink; 14 | width: 100%; 15 | } 16 | 17 | .pinksecondary { 18 | background-color: white; 19 | color: $color-pink; 20 | width: 100%; 21 | } 22 | 23 | .button.buttonblue { 24 | background-color: $color-blue; 25 | color: white; 26 | border: 2px solid $color-blue; 27 | width: 100%; 28 | } 29 | .button.yellow { 30 | background-color: $color-yellow; 31 | color: black; 32 | border: 2px solid $color-yellow; 33 | width: 100%; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/calcuCard.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Circulo

4 |
5 | 8 |
9 | 15 |
16 |
17 | 24 | 31 |
32 | 39 |

Resultado:

40 |
41 |

42 |
43 |
44 |
-------------------------------------------------------------------------------- /src/components/calcuCard.scss: -------------------------------------------------------------------------------- 1 | .calcuCard { 2 | border: solid 2px white; 3 | display: flex; 4 | flex-direction: column; 5 | padding-block: 30px; 6 | padding-inline: 10px; 7 | gap: 8px; 8 | border-radius: 12px; 9 | -webkit-border-radius: 12px; 10 | -moz-border-radius: 12px; 11 | -ms-border-radius: 12px; 12 | -o-border-radius: 12px; 13 | } 14 | 15 | @include for-phone-tablet { 16 | .calcuCard { 17 | width: 100%; 18 | height: 400px; 19 | } 20 | } 21 | 22 | @include for-desktop-up { 23 | .calcuCard { 24 | padding-inline: 24px; 25 | min-width: 280px; 26 | max-width: 384px; 27 | } 28 | } 29 | 30 | .calcuCard--title { 31 | font: $headline4; 32 | color: white; 33 | } 34 | 35 | .calcuCard--formSubtitle { 36 | font: $body1; 37 | color: white; 38 | } 39 | 40 | .caluCard--form { 41 | display: flex; 42 | height: 100%; 43 | flex-direction: column; 44 | gap: 8px; 45 | } 46 | 47 | .calcuCard--inputContainer { 48 | display: flex; 49 | gap: 16px; 50 | 51 | input { 52 | padding: 8px; 53 | width: 100%; 54 | } 55 | } 56 | 57 | .calcuCard--input { 58 | background-color: transparent; 59 | border: 2px solid white; 60 | border-radius: 8px; 61 | -webkit-border-radius: 8px; 62 | -moz-border-radius: 8px; 63 | -ms-border-radius: 8px; 64 | -o-border-radius: 8px; 65 | color: white; 66 | 67 | &::placeholder { 68 | color: $esandries-pink-placeholder; 69 | font-family: Montserrat; 70 | } 71 | } 72 | 73 | .calcuCard--btnprimary { 74 | background-color: white; 75 | color: $esandries-dark; 76 | border: 2px solid white; 77 | width: 100%; 78 | } 79 | 80 | .calcuCard--btnsecondary { 81 | background-color: transparent; 82 | color: white; 83 | border: 2px solid white; 84 | width: 100%; 85 | } 86 | 87 | .calcuCard--result { 88 | box-sizing: border-box; 89 | width: 100%; 90 | height: 100%; 91 | padding: 10px; 92 | border: 1px solid white; 93 | border-radius: 7px; 94 | 95 | p { 96 | font: $body2; 97 | color: white; 98 | } 99 | } 100 | 101 | .calcuCard--textresult{ 102 | color: white; 103 | } -------------------------------------------------------------------------------- /src/components/card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | background-color: white; 3 | display: flex; 4 | flex-direction: column; 5 | padding-block: 30px; 6 | gap: 8px; 7 | border-radius: 17px; 8 | } 9 | 10 | @include for-phone-tablet { 11 | .card { 12 | width: 100%; 13 | height: 400px; 14 | } 15 | } 16 | 17 | @include for-desktop-up { 18 | .card { 19 | padding-inline: 24px; 20 | min-width: 273px; 21 | width: 28%; 22 | max-width: 384px; 23 | } 24 | } 25 | 26 | .card__title { 27 | font: $headline4; 28 | color: $color-pink; 29 | } 30 | 31 | .card__title.blue { 32 | color: $color-blue; 33 | } 34 | 35 | .card__title.yellow { 36 | color: $color-yellow; 37 | } 38 | 39 | .card--form { 40 | display: flex; 41 | height: 100%; 42 | flex-direction: column; 43 | gap: 8px; 44 | } 45 | 46 | .card--form__subtitle { 47 | font: $body1; 48 | } 49 | 50 | .div-Input-Cuadrado { 51 | display: flex; 52 | gap: 16px; 53 | 54 | input { 55 | padding: 8px; 56 | width: 100%; 57 | } 58 | } 59 | 60 | .card--buttons { 61 | gap: 16px; 62 | display: flex; 63 | } 64 | 65 | .card--form__result { 66 | box-sizing: border-box; 67 | width: 100%; 68 | height: 100%; 69 | padding: 10px; 70 | border: 2px solid rgb(49, 47, 47); 71 | border-radius: 7px; 72 | 73 | p { 74 | font: $body2; 75 | } 76 | } -------------------------------------------------------------------------------- /src/layout/esandries--header.scss: -------------------------------------------------------------------------------- 1 | .ESandries--header { 2 | background-color: $esandries-semidark; 3 | 4 | .esandries--wrapper { 5 | margin: 0 auto; 6 | display: flex; 7 | align-items: center; 8 | height: 60px; 9 | max-width: 1200px; 10 | justify-content: space-between; 11 | padding-inline: 24px; 12 | 13 | .esandries--header--navbar { 14 | width: 40%; 15 | 16 | ul { 17 | display: flex; 18 | 19 | justify-content: space-between; 20 | list-style: none; 21 | } 22 | } 23 | 24 | a { 25 | font: $body2b; 26 | text-decoration: none; 27 | color: $esandries-pink-primary; 28 | } 29 | 30 | .header--callToActionBtn { 31 | a { 32 | color: $esandries-semidark; 33 | margin: 0; 34 | } 35 | 36 | background-color: $esandries-pink-primary; 37 | padding-inline: 12px; 38 | padding-block: 6px; 39 | border-radius: 8px; 40 | -webkit-border-radius: 8px; 41 | -moz-border-radius: 8px; 42 | -ms-border-radius: 8px; 43 | -o-border-radius: 8px; 44 | } 45 | } 46 | } 47 | 48 | @include for-phone-tablet { 49 | .esandries--header--navbar{ 50 | display: none; 51 | } 52 | } -------------------------------------------------------------------------------- /src/layout/esandries--project.scss: -------------------------------------------------------------------------------- 1 | // Styles for the container 2 | .project { 3 | max-width: 1200px; 4 | padding-inline: 24px; 5 | margin: 0 auto; 6 | } 7 | 8 | .project--title { 9 | font-size: 1.75em; 10 | font-weight: bold; 11 | font-family: Lato; 12 | color: $esandries-pink-primary; 13 | text-align: center; 14 | padding-block-start: 2rem; 15 | padding-block-end: 1rem; 16 | } 17 | 18 | .project--description { 19 | max-width: 588px; 20 | font-size: 1em; 21 | font-weight: 400; 22 | font-family: Montserrat; 23 | color: white; 24 | margin: 0 auto; 25 | padding-block-end: 2.5rem; 26 | } 27 | 28 | .project--container { 29 | gap: 24px; 30 | display: flex; 31 | flex-direction: row; 32 | flex-wrap: wrap; 33 | justify-content: space-between; 34 | } -------------------------------------------------------------------------------- /src/layout/footer.scss: -------------------------------------------------------------------------------- 1 | .footer-taller1 { 2 | background-color: $color-pinklight; 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-between; 6 | padding: 0 20px; 7 | align-items: center; 8 | 9 | .footer-information ul { 10 | display: flex; 11 | flex-wrap: wrap; 12 | list-style: none; 13 | } 14 | } 15 | 16 | .footer-information.pink { 17 | a { 18 | font: $body2; 19 | text-decoration: none; 20 | color: $color-pink; 21 | &:hover { 22 | color: $color-pinksecondary; 23 | } 24 | } 25 | } 26 | 27 | .footer-taller1.blue { 28 | background-color: $color-bluelight; 29 | a { 30 | font: $body2; 31 | text-decoration: none; 32 | color: $color-blue; 33 | &:hover { 34 | color: $color-bluesecondary; 35 | } 36 | } 37 | } 38 | .footer-taller1.yellow { 39 | background-color: $color-yellowlight; 40 | a { 41 | font: $body2; 42 | text-decoration: none; 43 | color: black; 44 | &:hover { 45 | color: $color-yellow; 46 | } 47 | } 48 | } 49 | .footer-taller1.index { 50 | background-color: white; 51 | a { 52 | font: $body2; 53 | text-decoration: none; 54 | color: black; 55 | &:hover { 56 | color: $color-yellow; 57 | } 58 | } 59 | } 60 | 61 | .footer-copyright { 62 | font: $body2; 63 | a { 64 | color: #232323; 65 | } 66 | } 67 | 68 | @include for-desktop-up { 69 | .footer-taller1 { 70 | height: 10vh; 71 | } 72 | .footer-information ul { 73 | gap: 16px; 74 | } 75 | } 76 | 77 | @include for-phone-tablet { 78 | .footer-taller1 { 79 | padding: 20px; 80 | justify-content: center; 81 | } 82 | .footer-information ul { 83 | gap: 4px; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/layout/header.scss: -------------------------------------------------------------------------------- 1 | .header-jspractico { 2 | padding: 0 20px; 3 | display: flex; 4 | align-items: center; 5 | justify-content: space-between; 6 | 7 | height: 10vh; 8 | 9 | .nav-options ul { 10 | display: flex; 11 | list-style: none; 12 | gap: 16px; 13 | a { 14 | text-decoration: none; 15 | font: $headline5; 16 | } 17 | } 18 | } 19 | 20 | .header-jspractico.pink { 21 | .nav-options ul { 22 | a { 23 | color: $color-pinklight; 24 | &:hover { 25 | color: $color-pink; 26 | } 27 | } 28 | .weAreHere a { 29 | color: $color-pink; 30 | } 31 | } 32 | } 33 | 34 | .header-jspractico.blue { 35 | .nav-options ul { 36 | a { 37 | color: $color-bluelight; 38 | &:hover { 39 | color: $color-bluesecondary; 40 | } 41 | } 42 | .weAreHereBlue { 43 | color: $color-blue; 44 | } 45 | } 46 | } 47 | 48 | .header-jspractico.yellow { 49 | .nav-options ul { 50 | a { 51 | color: $color-yellowlight; 52 | &:hover { 53 | color: $color-yellowblack; 54 | } 55 | } 56 | .weAreHere { 57 | color: $color-yellow; 58 | } 59 | } 60 | } 61 | 62 | .header-jspractico.index { 63 | .nav-options ul { 64 | a { 65 | color: $color-blacklight; 66 | &:hover { 67 | color: $color-black; 68 | } 69 | } 70 | } 71 | img { 72 | height: 45px; 73 | width: auto; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/layout/index.scss: -------------------------------------------------------------------------------- 1 | .indextitle { 2 | font: $headline3; 3 | text-align: center; 4 | padding: 0 20px 20px 20px; 5 | } 6 | 7 | .taller { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100%; 13 | min-height: 150px; 14 | background-size: cover; 15 | background-repeat: no-repeat; 16 | a { 17 | text-decoration: none; 18 | color: white; 19 | text-align: center; 20 | h2 { 21 | font: $headline4; 22 | } 23 | p { 24 | font: $body1; 25 | } 26 | } 27 | } 28 | 29 | .taller1 { 30 | background-image: url("../../images/index-taller1.png"); 31 | } 32 | .taller2 { 33 | background-image: url("../../images/index-taller.png"); 34 | } 35 | 36 | .taller3 { 37 | background-image: url("../../images/index-taller3.png"); 38 | } 39 | .taller4 { 40 | background-image: url("../../images/thumbnail-talle1.png"); 41 | } 42 | 43 | @include for-phone-only { 44 | .indexgrid { 45 | height: 60%; 46 | display: grid; 47 | grid-template-columns: 1fr; 48 | grid-template-rows: 1fr, 1fr, 1fr, 1fr; 49 | 50 | .taller1 { 51 | background-color: royalblue; 52 | } 53 | .taller2 { 54 | background-color: brown; 55 | } 56 | .taller3 { 57 | background-color: antiquewhite; 58 | } 59 | .taller4 { 60 | background-color: aqua; 61 | } 62 | } 63 | } 64 | 65 | @include for-tablet-portrait-up { 66 | body { 67 | height: 100vh; 68 | } 69 | .indexgrid { 70 | height: 60%; 71 | min-height: 500px; 72 | display: grid; 73 | grid-template-columns: 1fr, 1fr; 74 | grid-template-rows: 1fr, 1fr; 75 | .taller1 { 76 | background-color: royalblue; 77 | grid-column: 1 / 2; 78 | grid-row: 1/ 2; 79 | } 80 | .taller2 { 81 | background-color: brown; 82 | grid-column: 2/ 3; 83 | grid-row: 1/ 2; 84 | } 85 | .taller3 { 86 | background-color: antiquewhite; 87 | grid-column: 1/ 2; 88 | grid-row: 2/ 3; 89 | } 90 | .taller4 { 91 | background-color: aqua; 92 | grid-column: 2/ 3; 93 | grid-row: 2/ 3; 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/layout/taller1-container.scss: -------------------------------------------------------------------------------- 1 | .taller1-container { 2 | padding: 0 20px; 3 | h2 { 4 | font: $headline3; 5 | text-align: center; 6 | padding: 10px 0; 7 | } 8 | .figuras-container { 9 | height: 88%; 10 | display: flex; 11 | flex-direction: row; 12 | flex-wrap: wrap; 13 | justify-content: space-between; 14 | } 15 | } 16 | 17 | @include for-desktop-up { 18 | .taller1-container { 19 | height: 79vh; 20 | background-color: $color-pinklight; 21 | } 22 | .taller1-container.blue { 23 | background-color: $color-bluelight; 24 | .figuras-container { 25 | justify-content: center; 26 | } 27 | } 28 | 29 | .taller1-container.yellow { 30 | background-color: $color-yellowlight; 31 | .figuras-container { 32 | justify-content: center; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/master.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Montserrat:wght@400;600;700&display=swap"); 2 | @import "./settings/variables.scss"; 3 | @import "./settings/mixins.scss"; 4 | 5 | @import "./components/button.scss"; 6 | @import "./components/card.scss"; 7 | 8 | /*ESandries Styles*/ 9 | @import "./layout/esandries--header.scss"; 10 | @import "./layout/esandries--project.scss"; 11 | @import "./components/calcuCard.scss"; 12 | 13 | 14 | @import "./layout/header.scss"; 15 | @import "./layout/footer.scss"; 16 | @import "./layout/index.scss"; 17 | @import "./layout/taller1-container.scss"; 18 | 19 | * { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | body { 25 | background-color: $esandries-dark; 26 | } -------------------------------------------------------------------------------- /src/settings/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin for-phone-only { 2 | @media (max-width: 599px) { 3 | @content; 4 | } 5 | } 6 | @mixin for-tablet-portrait-up { 7 | @media (min-width: 600px) { 8 | @content; 9 | } 10 | } 11 | @mixin for-tablet-landscape-up { 12 | @media (min-width: 900px) { 13 | @content; 14 | } 15 | } 16 | 17 | @mixin for-phone-tablet { 18 | @media (max-width: 1024px) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin for-desktop-up { 24 | @media (min-width: 1024px) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/settings/variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $color-blue: #3504c0; 3 | $color-bluesecondary: #3504c0; 4 | $color-bluelight: #7b61ff; 5 | $color-pink: #d2004c; 6 | $color-pinksecondary: #ab013e; 7 | $color-pinklight: #fc8fb6; 8 | $color-yellow: #ffd900; 9 | $color-yellowlight: #ffe75e; 10 | $color-yellowblack: #bca000; 11 | $color-black: rgb(26, 26, 26); 12 | $color-blacklight: #363636; 13 | 14 | // Esandries Color 15 | $esandries-semidark: #210511; 16 | $esandries-dark: #1A040D; 17 | 18 | $esandries-pink-primary: #FF0380; 19 | $esandries-pink-placeholder: #FF68B3; 20 | 21 | // Fonts 22 | $headline1: 700 4.5rem/5rem Lato; 23 | $headline2: 700 4rem/4.75rem Lato; 24 | $headline3: 700 2rem/2rem Lato; 25 | $headline4: 700 1.5rem/1.649999976158142rem Lato; 26 | $headline5: 700 1.25rem/1.649999976158142rem Lato; 27 | $body1: 400 1.125rem/1.6875rem Montserrat; 28 | $body1b: 700 1.125rem/1.6875rem Montserrat; 29 | $body2: 400 0.875rem/1.5rem Montserrat; 30 | $body2b: 700 0.875rem/1.6875rem Montserrat; 31 | $button: 600 1.125rem/1.6875rem Montserrat; 32 | $caption: 400 0.75rem/1.6875rem Montserrat; -------------------------------------------------------------------------------- /taller1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 17 | 18 | Curso Práctico JS 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | 47 | 56 |
57 | Contact me 58 |
59 |
60 | 61 |
62 |
63 |
64 |

PLTZ - Curso de JavaScript Práctico

65 |

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.

Las 3 primeras tarjetas son calculadoras que son utiles si quieres conseguir areas o perimetros de una manera muy rápida.

66 |
67 |
68 | 69 |

Cuadrado

70 |
71 | 74 |
75 | 81 |
82 |
83 | 90 | 97 |
98 |

Resultado:

99 |
100 |

101 |
102 |
103 |
104 | 105 |
106 | 107 |

Triangulo

108 |
109 | 112 |
113 | 119 |
120 | 123 | 124 |
125 | 131 |
132 | 135 |
136 | 142 |
143 | 144 |
145 | 152 | 159 |
160 |

Resultado:

161 |
162 |

163 |
164 |
165 |
166 | 167 |
168 | 169 |

Circulo

170 |
171 | 174 |
175 | 181 |
182 |
183 | 190 | 197 |
198 | 205 |

Resultado:

206 |
207 |

208 |
209 |
210 |
211 | 212 |
213 | 214 |

Precio con descuento

215 |
216 | 219 |
220 | 226 |
227 | 230 |
231 | 237 |
238 |
239 | 246 |
247 |

Resultado:

248 |
249 |

250 |
251 |
252 |
253 | 254 |
255 | 256 |

Promedio, media y moda

257 |
258 | 261 |
262 | 268 |
269 |
270 | 277 | 284 | 291 |
292 |

Resultado:

293 |
294 |

295 |
296 |
297 |
298 | 299 |
300 |
301 |
302 | 303 | 304 | 305 | 306 | 307 | -------------------------------------------------------------------------------- /taller2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 17 | 18 | Curso Práctico JS 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | 47 | 56 |
57 | Contact me 58 |
59 |
60 | 61 |
62 |
63 |
64 |

PLTZ - Curso de JavaScript Práctico

65 |

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.

Las 3 primeras tarjetas son calculadoras que son utiles si quieres conseguir areas o perimetros de una manera muy rápida.

66 |
67 |
68 | 69 |

Cuadrado

70 |
71 | 74 |
75 | 81 |
82 |
83 | 90 | 97 |
98 |

Resultado:

99 |
100 |

101 |
102 |
103 |
104 | 105 |
106 | 107 |

Triangulo

108 |
109 | 112 |
113 | 119 |
120 | 123 | 124 |
125 | 131 |
132 | 135 |
136 | 142 |
143 | 144 |
145 | 152 | 159 |
160 |

Resultado:

161 |
162 |

163 |
164 |
165 |
166 | 167 |
168 | 169 |

Circulo

170 |
171 | 174 |
175 | 181 |
182 |
183 | 190 | 197 |
198 | 205 |

Resultado:

206 |
207 |

208 |
209 |
210 |
211 | 212 |
213 | 214 |

Precio con descuento

215 |
216 | 219 |
220 | 226 |
227 | 230 |
231 | 237 |
238 |
239 | 246 |
247 |

Resultado:

248 |
249 |

250 |
251 |
252 |
253 | 254 |
255 | 256 |

Promedio, media y moda

257 |
258 | 261 |
262 | 268 |
269 |
270 | 277 | 284 | 291 |
292 |

Resultado:

293 |
294 |

295 |
296 |
297 |
298 | 299 |
300 |
301 |
302 | 303 | 304 | 305 | 306 | 307 | -------------------------------------------------------------------------------- /taller3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 17 | 18 | Curso Práctico JS 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | 47 | 56 |
57 | Contact me 58 |
59 |
60 | 61 |
62 |
63 |
64 |

PLTZ - Curso de JavaScript Práctico

65 |

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.

Las 3 primeras tarjetas son calculadoras que son utiles si quieres conseguir areas o perimetros de una manera muy rápida.

66 |
67 |
68 | 69 |

Cuadrado

70 |
71 | 74 |
75 | 81 |
82 |
83 | 90 | 97 |
98 |

Resultado:

99 |
100 |

101 |
102 |
103 |
104 | 105 |
106 | 107 |

Triangulo

108 |
109 | 112 |
113 | 119 |
120 | 123 | 124 |
125 | 131 |
132 | 135 |
136 | 142 |
143 | 144 |
145 | 152 | 159 |
160 |

Resultado:

161 |
162 |

163 |
164 |
165 |
166 | 167 |
168 | 169 |

Circulo

170 |
171 | 174 |
175 | 181 |
182 |
183 | 190 | 197 |
198 | 205 |

Resultado:

206 |
207 |

208 |
209 |
210 |
211 | 212 |
213 | 214 |

Precio con descuento

215 |
216 | 219 |
220 | 226 |
227 | 230 |
231 | 237 |
238 |
239 | 246 |
247 |

Resultado:

248 |
249 |

250 |
251 |
252 |
253 | 254 |
255 | 256 |

Promedio, media y moda

257 |
258 | 261 |
262 | 268 |
269 |
270 | 277 | 284 | 291 |
292 |

Resultado:

293 |
294 |

295 |
296 |
297 |
298 | 299 |
300 |
301 |
302 | 303 | 304 | 305 | 306 | 307 | --------------------------------------------------------------------------------