├── README.md ├── css └── style.css ├── images ├── Logo.png ├── Muñeco.png ├── bi_exclamation-circle-fill.png └── github.png ├── index.html ├── js ├── copiar.js ├── desencriptar.js ├── encriptar.js ├── main.js └── validar.js └── meta └── favicon └── favicon.png /README.md: -------------------------------------------------------------------------------- 1 | #challengeonelogicalatam 2 | Primer challenge logica de programacion oracle one + alura LATAM 3 | preview page : 4 | https://ezequielmassa.github.io/ChallengeOneLogicaLatam/ 5 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #f3f5fc; 9 | } 10 | 11 | main { 12 | position: relative; 13 | width: 1440px; 14 | height: 1024px; 15 | background: #f3f5fc; 16 | margin: 0 auto; 17 | } 18 | 19 | .logo { 20 | display: flex; 21 | flex-direction: column; 22 | align-items: flex-start; 23 | padding: 0px; 24 | position: absolute; 25 | width: 120px; 26 | height: 48px; 27 | left: 40px; 28 | top: 40px; 29 | } 30 | 31 | .logo-img-container { 32 | position: static; 33 | width: 120px; 34 | height: 48px; 35 | left: 0px; 36 | top: 0px; 37 | flex: none; 38 | order: 0; 39 | flex-grow: 0; 40 | margin: 40px 0px; 41 | } 42 | 43 | .logo .logo-img-container img { 44 | position: absolute; 45 | left: 36.67%; 46 | right: 37.43%; 47 | top: 0%; 48 | bottom: 0%; 49 | } 50 | 51 | /* Frame 5 */ 52 | 53 | .main-text-container { 54 | display: flex; 55 | flex-direction: column; 56 | align-items: flex-start; 57 | padding: 0px; 58 | 59 | position: absolute; 60 | width: 336px; 61 | height: 122px; 62 | left: 1032px; 63 | top: 619px; 64 | } 65 | .text-container { 66 | flex: none; 67 | order: 0; 68 | align-self: stretch; 69 | flex-grow: 0; 70 | margin: 16px 0px; 71 | } 72 | .none-text { 73 | position: static; 74 | width: 336px; 75 | height: 58px; 76 | left: 0px; 77 | top: 0px; 78 | font-family: Inter; 79 | font-style: normal; 80 | font-weight: bold; 81 | font-size: 24px; 82 | line-height: 120%; 83 | text-align: center; 84 | color: #343a40; 85 | } 86 | 87 | .second-text-container { 88 | flex: none; 89 | order: 1; 90 | align-self: stretch; 91 | flex-grow: 0; 92 | margin: 16px 0px; 93 | } 94 | 95 | .add-text { 96 | position: static; 97 | width: 336px; 98 | height: 48px; 99 | left: 0px; 100 | top: 74px; 101 | font-family: Inter; 102 | font-style: normal; 103 | font-weight: normal; 104 | font-size: 16px; 105 | line-height: 150%; 106 | text-align: center; 107 | color: #495057; 108 | } 109 | 110 | .rectangle-container { 111 | position: absolute; 112 | width: 400px; 113 | height: 944px; 114 | left: 1000px; 115 | top: 40px; 116 | background: #ffffff; 117 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 118 | border-radius: 32px; 119 | } 120 | 121 | .muneco-container { 122 | position: absolute; 123 | width: 336px; 124 | height: 304px; 125 | left: 1032px; 126 | top: 283px; 127 | } 128 | 129 | .text-input { 130 | position: absolute; 131 | width: 680px; 132 | height: 288px; 133 | left: 240px; 134 | top: 168px; 135 | font-family: Inter; 136 | font-style: normal; 137 | font-weight: normal; 138 | font-size: 32px; 139 | line-height: 150%; 140 | color: #0a3871; 141 | border: none; 142 | background-color: transparent; 143 | resize: none; 144 | } 145 | 146 | .text-input:focus { 147 | border: none; 148 | outline: none; 149 | background-color: transparent; 150 | resize: none; 151 | } 152 | 153 | .active { 154 | display: none; 155 | } 156 | 157 | .info-text { 158 | display: flex; 159 | flex-direction: row; 160 | align-items: center; 161 | padding: 0px; 162 | position: absolute; 163 | width: 229px; 164 | height: 18px; 165 | left: 240px; 166 | top: 851px; 167 | } 168 | 169 | .info-text-texto { 170 | position: static; 171 | width: 205px; 172 | height: 18px; 173 | left: 24px; 174 | top: 0px; 175 | font-family: Inter; 176 | font-style: normal; 177 | font-weight: normal; 178 | font-size: 12.4px; 179 | line-height: 150%; 180 | color: #495057; 181 | opacity: 0.8; 182 | } 183 | 184 | .info-text-texto img { 185 | margin-right: 6px; 186 | } 187 | 188 | .button-container { 189 | display: flex; 190 | flex-direction: row; 191 | align-items: flex-start; 192 | padding: 0px; 193 | position: absolute; 194 | width: 680px; 195 | height: 67px; 196 | left: 240px; 197 | top: 885px; 198 | margin-top: 20px; 199 | } 200 | 201 | .btn-1 { 202 | display: flex; 203 | flex-direction: row; 204 | align-items: flex-start; 205 | padding: 24px; 206 | position: static; 207 | width: 328px; 208 | height: 67px; 209 | left: 0px; 210 | top: 0px; 211 | background: #0a3871; 212 | border-radius: 24px; 213 | margin-right: 20px; 214 | box-shadow: 0px 3px 0px 0px rgb(0, 0, 0); 215 | } 216 | .btn-1:hover { 217 | cursor: pointer; 218 | } 219 | 220 | .btn-1:active { 221 | box-shadow: 0px 1px 0px 0px rgb(0, 0, 0); 222 | } 223 | 224 | .btn-1-text { 225 | position: static; 226 | width: 280px; 227 | height: 19px; 228 | left: 24px; 229 | top: 24px; 230 | font-family: Inter; 231 | font-style: normal; 232 | font-weight: normal; 233 | font-size: 16px; 234 | line-height: 19px; 235 | text-align: center; 236 | color: #ffffff; 237 | flex: none; 238 | order: 0; 239 | flex-grow: 1; 240 | margin: 0px 8px; 241 | } 242 | 243 | .btn-2 { 244 | display: flex; 245 | flex-direction: row; 246 | align-items: flex-start; 247 | padding: 24px; 248 | position: static; 249 | width: 328px; 250 | height: 67px; 251 | left: 352px; 252 | top: 0px; 253 | background: #d8dfe8; 254 | border: 1px solid #0a3871; 255 | box-sizing: border-box; 256 | border-radius: 24px; 257 | box-shadow: 0px 3px 0px 0px rgb(0, 0, 0); 258 | } 259 | 260 | .btn-2:hover { 261 | cursor: pointer; 262 | } 263 | 264 | .btn-2:active { 265 | box-shadow: 0px 1px 0px 0px rgb(0, 0, 0); 266 | } 267 | 268 | .btn-2-text { 269 | position: static; 270 | width: 280px; 271 | height: 19px; 272 | left: 24px; 273 | top: 24px; 274 | font-family: Inter; 275 | font-style: normal; 276 | font-weight: normal; 277 | font-size: 16px; 278 | line-height: 19px; 279 | text-align: center; 280 | color: #0a3871; 281 | flex: none; 282 | order: 0; 283 | flex-grow: 1; 284 | margin: 0px 8px; 285 | } 286 | 287 | .text-area-dec { 288 | position: absolute; 289 | width: 336px; 290 | height: 781px; 291 | left: 1032px; 292 | top: 72px; 293 | font-family: Inter; 294 | font-style: normal; 295 | font-weight: normal; 296 | font-size: 24px; 297 | line-height: 150%; 298 | color: #495057; 299 | border: none; 300 | outline: none; 301 | resize: none; 302 | } 303 | 304 | .btn-3 { 305 | display: flex; 306 | flex-direction: row; 307 | align-items: flex-start; 308 | padding: 24px; 309 | position: absolute; 310 | width: 336px; 311 | height: 67px; 312 | left: 1032px; 313 | top: 885px; 314 | border: 1px solid #0a3871; 315 | box-sizing: border-box; 316 | border-radius: 24px; 317 | background-color: transparent; 318 | box-shadow: 0px 3px 0px 0px rgb(0, 0, 0); 319 | } 320 | 321 | .btn-3:hover { 322 | cursor: pointer; 323 | } 324 | 325 | .btn-3:active { 326 | box-shadow: 0px 1px 0px 0px rgb(0, 0, 0); 327 | } 328 | 329 | .copy-text { 330 | position: static; 331 | width: 288px; 332 | height: 19px; 333 | left: 24px; 334 | top: 24px; 335 | font-family: Inter; 336 | font-style: normal; 337 | font-weight: normal; 338 | font-size: 16px; 339 | line-height: 19px; 340 | text-align: center; 341 | color: #0a3871; 342 | } 343 | 344 | .pie-pagina { 345 | font-family: Inter; 346 | font-style: normal; 347 | font-weight: bold; 348 | font-size: 15px; 349 | line-height: 150%; 350 | color: #0a3871; 351 | text-align: center; 352 | background-color: white; 353 | } 354 | 355 | .pie-pagina-logo { 356 | width: 20px; 357 | } 358 | 359 | /* media*/ 360 | /* tablet */ 361 | @media only screen and (max-width: 768px) { 362 | .main { 363 | width: 768px; 364 | height: 1384px; 365 | } 366 | 367 | .logo { 368 | position: absolute; 369 | width: 31px; 370 | height: 48px; 371 | left: -10px; 372 | top: 76px; 373 | } 374 | 375 | /* Frame 5 */ 376 | 377 | .main-text-container { 378 | display: flex; 379 | flex-direction: column; 380 | align-items: flex-start; 381 | padding: 32px; 382 | position: absolute; 383 | width: 688px; 384 | height: 133px; 385 | left: 40px; 386 | top: 1001px; 387 | background: #ffffff; 388 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 389 | border-radius: 32px; 390 | } 391 | 392 | .text-container { 393 | position: static; 394 | width: 624px; 395 | height: 29px; 396 | left: 0px; 397 | top: 0px; 398 | } 399 | 400 | .none-text { 401 | position: static; 402 | width: 624px; 403 | height: 29px; 404 | left: 0px; 405 | top: 0px; 406 | font-family: Inter; 407 | font-style: normal; 408 | font-weight: bold; 409 | font-size: 24px; 410 | line-height: 120%; 411 | text-align: center; 412 | color: #343a40; 413 | } 414 | 415 | .second-text-container { 416 | flex: none; 417 | order: 1; 418 | align-self: stretch; 419 | flex-grow: 0; 420 | margin: 16px 0px; 421 | } 422 | 423 | .add-text { 424 | position: static; 425 | width: 624px; 426 | height: 24px; 427 | left: 0px; 428 | top: 45px; 429 | font-family: Inter; 430 | font-style: normal; 431 | font-weight: normal; 432 | font-size: 16px; 433 | line-height: 150%; 434 | text-align: center; 435 | color: #495057; 436 | } 437 | 438 | .rectangle-container { 439 | display: flex; 440 | flex-direction: column; 441 | align-items: flex-start; 442 | padding: 32px; 443 | position: absolute; 444 | width: 688px; 445 | height: 133px; 446 | left: 40px; 447 | top: 1001px; 448 | background: #ffffff; 449 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 450 | border-radius: 32px; 451 | } 452 | 453 | .muneco-container { 454 | display: none; 455 | } 456 | 457 | .text-input { 458 | width: 688px; 459 | height: 588px; 460 | left: 40px; 461 | top: 240px; 462 | } 463 | 464 | .info-text { 465 | left: 40px; 466 | top: 836px; 467 | } 468 | 469 | .info-text-texto img { 470 | margin-right: 6px; 471 | } 472 | 473 | .button-container { 474 | width: 688px; 475 | left: 40px; 476 | top: 870px; 477 | margin-top: 20px; 478 | } 479 | 480 | .btn-1 { 481 | width: 332px; 482 | margin-right: 20px; 483 | } 484 | 485 | .btn-1-text { 486 | width: 284px; 487 | } 488 | 489 | .btn-2 { 490 | width: 332px; 491 | left: 356px; 492 | } 493 | 494 | .btn-2-text { 495 | width: 284px; 496 | } 497 | 498 | /* a partir de aca */ 499 | 500 | .text-area-dec { 501 | display: flex; 502 | flex-direction: column; 503 | align-items: flex-start; 504 | padding: 32px; 505 | 506 | position: absolute; 507 | width: 688px; 508 | height: 243px; 509 | left: 40px; 510 | top: 1001px; 511 | background: #ffffff; 512 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 513 | border-radius: 32px; 514 | } 515 | 516 | .active { 517 | display: none; 518 | } 519 | .btn-3 { 520 | position: absolute; 521 | width: 624px; 522 | height: 67px; 523 | left: 70px; 524 | top: 1250px; 525 | border: 1px solid #0a3871; 526 | box-sizing: border-box; 527 | border-radius: 24px; 528 | background-color: white; 529 | } 530 | 531 | .copy-text { 532 | width: 576px; 533 | } 534 | } 535 | 536 | /* phone */ 537 | @media only screen and (max-width: 480px) { 538 | .main { 539 | width: 375px; 540 | height: 1700px; 541 | } 542 | 543 | .logo { 544 | position: absolute; 545 | width: 32px; 546 | height: 48px; 547 | left: -30px; 548 | top: 20px; 549 | } 550 | .logo-img-container { 551 | margin: 0; 552 | padding: 0; 553 | } 554 | 555 | /* Frame 5 */ 556 | 557 | .main-text-container { 558 | display: flex; 559 | flex-direction: column; 560 | align-items: flex-start; 561 | padding: 32px; 562 | 563 | position: absolute; 564 | width: 327px; 565 | height: 286px; 566 | left: 25px; 567 | top: 1110px; 568 | background: #ffffff; 569 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 570 | border-radius: 32px; 571 | } 572 | 573 | .text-container { 574 | position: static; 575 | width: 263px; 576 | height: 58px; 577 | left: 0px; 578 | top: 0px; 579 | } 580 | 581 | .none-text { 582 | position: static; 583 | width: 263px; 584 | height: 58px; 585 | left: 0px; 586 | top: 0px; 587 | font-family: Inter; 588 | font-style: normal; 589 | font-weight: bold; 590 | font-size: 24px; 591 | line-height: 120%; 592 | text-align: center; 593 | color: #343a40; 594 | flex: none; 595 | order: 0; 596 | align-self: stretch; 597 | flex-grow: 0; 598 | margin: 16px 0px; 599 | } 600 | 601 | .second-text-container { 602 | flex: none; 603 | order: 1; 604 | align-self: stretch; 605 | flex-grow: 0; 606 | margin: 16px 0px; 607 | } 608 | 609 | .add-text { 610 | position: static; 611 | width: 263px; 612 | height: 48px; 613 | left: 0px; 614 | top: 74px; 615 | font-family: Inter; 616 | font-style: normal; 617 | font-weight: normal; 618 | font-size: 16px; 619 | line-height: 150%; 620 | text-align: center; 621 | color: #495057; 622 | flex: none; 623 | order: 1; 624 | align-self: stretch; 625 | flex-grow: 0; 626 | margin: 16px 0px; 627 | } 628 | 629 | .rectangle-container { 630 | display: none; 631 | } 632 | 633 | .muneco-container { 634 | display: none; 635 | } 636 | 637 | .text-input { 638 | width: 343px; 639 | height: 624px; 640 | left: 16px; 641 | top: 152px; 642 | } 643 | 644 | .info-text { 645 | left: 16px; 646 | top: 851px; 647 | } 648 | 649 | .info-text-texto img { 650 | margin-right: 6px; 651 | } 652 | 653 | .button-container { 654 | display: flex; 655 | flex-direction: column; 656 | align-items: flex-start; 657 | padding: 0px; 658 | position: absolute; 659 | width: 343px; 660 | height: 158px; 661 | left: 16px; 662 | top: 874px; 663 | } 664 | 665 | .btn-1 { 666 | display: flex; 667 | flex-direction: row; 668 | align-items: flex-start; 669 | padding: 24px; 670 | position: static; 671 | width: 343px; 672 | height: 67px; 673 | left: 0px; 674 | top: 0px; 675 | background: #0a3871; 676 | border-radius: 24px; 677 | flex: none; 678 | order: 0; 679 | align-self: stretch; 680 | flex-grow: 0; 681 | margin: 24px 0px; 682 | } 683 | 684 | .btn-1-text { 685 | width: 284px; 686 | } 687 | 688 | .btn-2 { 689 | display: flex; 690 | flex-direction: row; 691 | align-items: flex-start; 692 | padding: 24px; 693 | position: static; 694 | width: 343px; 695 | height: 67px; 696 | left: 0px; 697 | top: 91px; 698 | border: 1px solid #0a3871; 699 | box-sizing: border-box; 700 | border-radius: 24px; 701 | flex: none; 702 | order: 1; 703 | align-self: stretch; 704 | flex-grow: 0; 705 | margin: 12px 0px; 706 | } 707 | 708 | .btn-2-text { 709 | width: 284px; 710 | } 711 | 712 | .text-area-dec { 713 | display: flex; 714 | flex-direction: column; 715 | align-items: flex-start; 716 | padding: 32px; 717 | position: absolute; 718 | width: 343px; 719 | height: 480px; 720 | left: 16px; 721 | top: 1110px; 722 | background: #ffffff; 723 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 724 | border-radius: 32px; 725 | } 726 | 727 | .active { 728 | display: none; 729 | } 730 | 731 | .btn-3 { 732 | position: absolute; 733 | width: 279px; 734 | height: 67px; 735 | left: 50px; 736 | top: 1600px; 737 | border: 1px solid #0a3871; 738 | box-sizing: border-box; 739 | border-radius: 24px; 740 | background-color: white; 741 | } 742 | 743 | .copy-text { 744 | width: 576px; 745 | } 746 | } 747 | -------------------------------------------------------------------------------- /images/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzequielMassa/ChallengeOneLogicaLatam/be70cc374c84b5f50ff187adcbc3d915accabb25/images/Logo.png -------------------------------------------------------------------------------- /images/Muñeco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzequielMassa/ChallengeOneLogicaLatam/be70cc374c84b5f50ff187adcbc3d915accabb25/images/Muñeco.png -------------------------------------------------------------------------------- /images/bi_exclamation-circle-fill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzequielMassa/ChallengeOneLogicaLatam/be70cc374c84b5f50ff187adcbc3d915accabb25/images/bi_exclamation-circle-fill.png -------------------------------------------------------------------------------- /images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzequielMassa/ChallengeOneLogicaLatam/be70cc374c84b5f50ff187adcbc3d915accabb25/images/github.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Challenge Logica de Programacion Oracle + Alura LATAM 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 26 | 27 | 28 |
29 | imagen hombre buscando 30 | 31 | 32 | 33 |
34 |
35 |

Ningún mensaje fue encontrado

36 |
37 |
38 |

39 | Ingresa el texto que desees encriptar o desencriptar. 40 |

41 |
42 |
43 | 44 | 46 | 47 | 48 | 51 | 52 | 54 | 55 |
56 |

57 | Solo letras minúsculas,sin acentos,numeros o caracteres especiales. 58 |

59 |
60 | 61 |
62 | 64 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /js/copiar.js: -------------------------------------------------------------------------------- 1 | function copy(){ 2 | var texto = output.value; 3 | navigator.clipboard.writeText(texto); 4 | }; 5 | -------------------------------------------------------------------------------- /js/desencriptar.js: -------------------------------------------------------------------------------- 1 | function desencryptar(){ 2 | var fraseOriginal = input.value; 3 | var fraseDesencriptada = fraseOriginal.replace(/ai/g, "a").replace(/enter/g, "e").replace(/imes/g, "i").replace(/ober/g, "o").replace(/ufat/g, "u"); 4 | return output.value = fraseDesencriptada; 5 | } -------------------------------------------------------------------------------- /js/encriptar.js: -------------------------------------------------------------------------------- 1 | function encryptar() { 2 | var fraseOriginal = input.value; 3 | var fraseEncriptada = " " 4 | 5 | for (var i = 0; i < fraseOriginal.length; i++) { 6 | var letra = fraseOriginal[i] 7 | if (letra == "a") { 8 | letra = "ai" 9 | fraseEncriptada += letra 10 | } else if (letra == "e") { 11 | letra = "enter" 12 | fraseEncriptada += letra 13 | } else if (letra == "i") { 14 | letra = "imes" 15 | fraseEncriptada += letra 16 | } else if (letra == "o") { 17 | letra = "ober" 18 | fraseEncriptada += letra 19 | } else if (letra == "u") { 20 | letra = "ufat" 21 | fraseEncriptada += letra 22 | } else { 23 | fraseEncriptada += letra 24 | } 25 | } 26 | return output.value = fraseEncriptada; 27 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | var input = document.querySelector(".text-input"); 2 | var output = document.querySelector("#desencriptar-texto"); 3 | 4 | input.addEventListener("click", function () { 5 | input.select() 6 | }); 7 | 8 | var botonEncryptar = document.querySelector("#btn-encriptar"); 9 | botonEncryptar.addEventListener("click", function (event) { 10 | event.preventDefault(); 11 | validar(); 12 | }); 13 | 14 | var botonDesencryptar = document.querySelector("#btn-desencriptar"); 15 | botonDesencryptar.addEventListener("click", function (event) { 16 | event.preventDefault(); 17 | 18 | desencryptar(); 19 | }); 20 | 21 | var botonCopiar = document.querySelector("#btn-copy"); 22 | botonCopiar.addEventListener("click", function (event) { 23 | event.preventDefault(); 24 | 25 | copy(); 26 | }); 27 | 28 | 29 | -------------------------------------------------------------------------------- /js/validar.js: -------------------------------------------------------------------------------- 1 | function validar() { 2 | var texto = input.value 3 | var padronABuscar = /[^\s*a-z]/g 4 | var resultadoPadron = padronABuscar.test(texto) 5 | var muneco = document.querySelector(".muneco-container") 6 | var textoInfo = document.querySelector(".main-text-container") 7 | 8 | if (resultadoPadron == false) { 9 | output.classList.remove("active") 10 | muneco.classList.add("active") 11 | textoInfo.classList.add("active") 12 | encryptar() 13 | } else { 14 | monstrarAlertaError() 15 | } 16 | } 17 | 18 | function monstrarAlertaError() { 19 | var muneco = document.querySelector(".muneco-container") 20 | var textoInfo = document.querySelector(".main-text-container") 21 | output.classList.add("active") 22 | muneco.classList.remove("active") 23 | textoInfo.classList.remove("active") 24 | }; -------------------------------------------------------------------------------- /meta/favicon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EzequielMassa/ChallengeOneLogicaLatam/be70cc374c84b5f50ff187adcbc3d915accabb25/meta/favicon/favicon.png --------------------------------------------------------------------------------