├── js └── main.js ├── README.md ├── css └── style.css └── index.html /js/main.js: -------------------------------------------------------------------------------- 1 | const encriptar = document.getElementById("encriptar"); 2 | const desencriptar = document.getElementById("desencriptar"); 3 | const copiar = document.getElementById("copiar"); 4 | 5 | const textDefault = document.querySelector(".container-text-default"); 6 | const textResult = document.querySelector(".container-context-resultado"); 7 | const text = document.querySelector(".text-message-resultado"); 8 | 9 | encriptar.addEventListener("click", () => { 10 | let input = document.getElementById("inputEncriptar").value; 11 | 12 | const validacion = /([A-ZáéíóúÁÉÍÓÚñ\d$@$!%*?&])/gm.test(input); 13 | if (!validacion && input.length > 0) { 14 | const mapObj = { 15 | e: "enter", 16 | i: "imes", 17 | a: "ai", 18 | o: "ober", 19 | u: "ufat", 20 | }; 21 | input = input.replace(/e|i|a|o|u/gm, (matched) => { 22 | return mapObj[matched]; 23 | }); 24 | 25 | quitarAlerta(); 26 | mostrarResultado(); 27 | 28 | text.textContent = input; 29 | } else { 30 | mostrarAlerta(); 31 | } 32 | }); 33 | 34 | desencriptar.addEventListener("click", () => { 35 | let input = document.getElementById("inputEncriptar").value; 36 | 37 | const validacion = /([A-ZáéíóúÁÉÍÓÚñ\d$@$!%*?&])/gm.test(input); 38 | if (!validacion && input.length > 0) { 39 | const mapObj = { 40 | enter: "e", 41 | imes: "i", 42 | ai: "a", 43 | ober: "o", 44 | ufat: "u", 45 | }; 46 | input = input.replace(/enter|imes|ai|ober|ufat/gm, (matched) => { 47 | return mapObj[matched]; 48 | }); 49 | 50 | quitarAlerta(); 51 | mostrarResultado(); 52 | 53 | text.textContent = input; 54 | } else { 55 | mostrarAlerta(); 56 | } 57 | }); 58 | 59 | copiar.addEventListener("click", () => { 60 | let copiado = text.textContent; 61 | 62 | navigator.clipboard.writeText(copiado).then(() => { 63 | copiar.textContent = "Copiado ✅"; 64 | copiar.classList.add("btn-copiado"); 65 | 66 | window.setTimeout(() => { 67 | copiar.textContent = "Copiar"; 68 | copiar.classList.remove("btn-copiado"); 69 | }, 1000); 70 | }); 71 | }); 72 | 73 | const mostrarResultado = () => { 74 | textDefault.style.display = "none"; 75 | textResult.style.display = "flex"; 76 | }; 77 | const quitarAlerta = () => { 78 | const alert = document.querySelector(".alert-disabled"); 79 | const alertText = document.querySelector(".text-desencriptar"); 80 | alertText.classList.remove("text-desencriptar-alert"); 81 | alert.classList.remove("alert-actived"); 82 | }; 83 | const mostrarAlerta = () => { 84 | const alertText = document.querySelector(".text-desencriptar"); 85 | const alert = document.querySelector(".alert-disabled"); 86 | alert.classList.add("alert-actived"); 87 | alertText.classList.add("text-desencriptar-alert"); 88 | }; 89 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Encriptador de texto 4 | 5 |

6 | 7 |

8 | 9 | Insignia de finalización 10 |

11 |
12 | 13 |
14 | 15 |

16 | 17 | Descripción 18 |

19 | 20 |

21 | Primer challenge de Oracle Next Education y Alura con JavaScript, HTML y CSS

22 | El desafio consiste en construir una pagina web que encripte y desencripte texto que sera ingresado por el usuario y presentarlo en su forma encriptada o desencriptada, el objetivo de este desafio es poner a prueba los conocimientos adquiridos durante el curso "Principiante en programación" 23 |

24 | 25 |

26 | 27 | Llaves de encriptación 28 |

29 | 36 | 37 |

38 | 39 | Requisitos 40 |

41 | 53 | 54 |

55 | 56 | Extra: 57 |

58 | 59 | 62 | 63 |
64 | 65 |

66 | 67 | Diseño final 68 | 69 |

70 | 71 | 72 |

73 |

74 | Aqui tienes el 75 | 76 | link del proyecto finalizado 77 | 78 | para que lo puedas ver 79 |

80 | 81 |

82 | 83 | Diseño proporcionado en Figma 84 | 85 |

86 | 87 | 88 |

89 | 90 | Tablero en Trello 91 | 92 |

93 | 94 | 95 |

96 |

97 | Para organizarme y ver los requisitos que debería cumplir el proyecto 98 |

99 | 100 | 101 | link del Trello 102 | 103 | 104 |

105 | 106 | Mensaje secreto 107 | 108 |

109 |

110 | Para llegar a la solución esperada nos dieron un mensaje secreto que tendríamos que descifrar, te dejo el texto aquí abajo para que veas por tí mismo el mensaje 111 | 112 | 113 |

114 |

115 | 116 | fenterlimescimesdaidenters poberr enternfrenterntair enterstenter 117 | dentersaifimesober y haibenterrlober cobernclufatimesdober cobern 118 | enterximestober 119 | 120 |

121 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-background: #F3F5FC; 3 | --color-text-message-black: #343A40; 4 | --color-text-message-blue: #0A3871; 5 | --color-button-blue: #0A3871; 6 | --color-button-grey: #D8DFE8; 7 | } 8 | * { 9 | margin: 0; 10 | padding: 0; 11 | box-sizing: border-box; 12 | } 13 | body { 14 | background-color: var(--color-background); 15 | font-family: 'Inter', sans-serif; 16 | } 17 | .container { 18 | width: 90%; 19 | height: 100vh; 20 | margin: 0 auto; 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | position: relative; 25 | } 26 | 27 | /* Parte izquierda */ 28 | 29 | .container-content { 30 | width: 70%; 31 | height: 90%; 32 | display: flex; 33 | flex-direction: column; 34 | justify-content: space-between; 35 | padding: 20px; 36 | } 37 | .container-text { 38 | width: 90%; 39 | height: 70%; 40 | margin: 0 auto; 41 | } 42 | .alert-actived { 43 | color:red; 44 | } 45 | .text-desencriptar { 46 | width: 100%; 47 | height: 100%; 48 | padding: 12px 20px; 49 | resize: none; 50 | border: 0; 51 | border-radius: 10px; 52 | outline: none; 53 | box-shadow: 0px 24px 32px -8px rgba(154, 154, 154, 0.2); 54 | overflow-wrap: break-word; 55 | background-color: var(--color-background); 56 | } 57 | .text-desencriptar-alert{ 58 | border: 2px solid red; 59 | } 60 | .text-desencriptar, .text-desencriptar:focus { 61 | color: var(--color-text-message-blue); 62 | font-size: 32px; 63 | } 64 | .text-desencriptar::placeholder { 65 | color: var(--color-text-message-blue); 66 | font-size: 32px; 67 | } 68 | 69 | .container-buttons { 70 | display: flex; 71 | justify-content: center; 72 | gap: 24px; 73 | } 74 | .btn-encriptar { 75 | padding: 24px 75px; 76 | background-color: var(--color-button-blue); 77 | border: 2px solid var(--color-button-blue); 78 | border-radius: 24px; 79 | position: relative; 80 | overflow: hidden; 81 | text-align: center; 82 | font-size: 16px; 83 | transition: .3s; 84 | z-index: 1; 85 | font-family: inherit; 86 | color: white; 87 | cursor: pointer; 88 | } 89 | .btn-encriptar::before { 90 | content: ''; 91 | width: 0; 92 | height: 600%; 93 | position: absolute; 94 | top: 50%; 95 | left: 50%; 96 | transform: translate(-50%, -50%) rotate(45deg); 97 | background: white; 98 | transition: .5s ease; 99 | display: block; 100 | z-index: -1; 101 | } 102 | .btn-encriptar:hover::before { 103 | width: 105%; 104 | } 105 | .btn-encriptar:hover { 106 | color: var(--color-text-message-blue); 107 | } 108 | .btn-encriptar:active { 109 | transform: scale(0.8); 110 | } 111 | 112 | 113 | /* Parte derecha */ 114 | 115 | .container-resultado { 116 | width: 30%; 117 | min-width: 300px; 118 | height: 90vh; 119 | padding: 20px; 120 | background-color: #FFFFFF; 121 | border-radius: 32px; 122 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 123 | overflow: hidden; 124 | } 125 | .container-text-default { /*Message default*/ 126 | width: 100%; 127 | height: 100%; 128 | display: flex; 129 | flex-direction: column; 130 | align-items: center; 131 | justify-content: center; 132 | } 133 | .container-text-encriptado { 134 | text-align: center; 135 | color: var(--color-text-message-black); 136 | font-weight: 700; 137 | font-size: 24px; 138 | } 139 | .text-message-normal { 140 | margin-top: 16px; 141 | font-weight: normal; 142 | font-size: 16px; 143 | } 144 | 145 | /* Parte derecha cuando se encripta algo */ 146 | .container-context-resultado { /*Message resolución*/ 147 | width: 100%; 148 | height: 100%; 149 | display: none; 150 | flex-direction: column; 151 | justify-content: space-between; 152 | align-items: center; 153 | word-wrap: break-word; 154 | } 155 | .text-message-resultado { 156 | width: 100%; 157 | line-height: 150%; 158 | color: #495057; 159 | } 160 | .btn-copiar, .btn-desencriptar { 161 | padding: 24px 75px; 162 | border: 2px solid var(--color-button-blue); 163 | border-radius: 24px; 164 | position: relative; 165 | overflow: hidden; 166 | background-color: transparent; 167 | text-align: center; 168 | font-size: 16px; 169 | transition: .3s; 170 | z-index: 1; 171 | font-family: inherit; 172 | color: var(--color-button-blue); 173 | cursor: pointer; 174 | } 175 | .btn-copiar::before, .btn-desencriptar::before { 176 | content: ''; 177 | width: 0; 178 | height: 600%; 179 | position: absolute; 180 | top: 50%; 181 | left: 50%; 182 | transform: translate(-50%, -50%) rotate(45deg); 183 | background: var(--color-button-blue); 184 | transition: .5s ease; 185 | display: block; 186 | z-index: -1; 187 | } 188 | .btn-copiar:hover::before, .btn-desencriptar:hover::before { 189 | width: 105%; 190 | } 191 | .btn-copiar:hover, .btn-desencriptar:hover { 192 | color: white; 193 | } 194 | .btn-copiar:active, .btn-desencriptar:active { 195 | transform: scale(0.8); 196 | } 197 | .btn-copiado { 198 | color: green !important; 199 | } 200 | /* Media queries */ 201 | 202 | @media (max-width: 768px) { 203 | /* parte superior */ 204 | .container { 205 | width: 95%; 206 | flex-direction: column; 207 | } 208 | .container-content { 209 | width: 100%; 210 | } 211 | .container-text { 212 | width: 100%; 213 | margin: 0; 214 | display: flex; 215 | flex-direction: column; 216 | } 217 | .container-text p{ 218 | padding: 10px 0; 219 | } 220 | .container-buttons a{ 221 | padding: 24px 15%; 222 | gap: 15px; 223 | } 224 | /* Parte inferior */ 225 | .container-resultado { 226 | width: 100%; 227 | height: 30vh; 228 | } 229 | .container-img { 230 | display: none; 231 | } 232 | } 233 | 234 | @media (max-width: 415px) { 235 | .container { 236 | width: 99%; 237 | } 238 | .logo{ 239 | width: 20px; 240 | } 241 | .container-content { 242 | padding: 5px; 243 | } 244 | .container-buttons { 245 | flex-direction: column; 246 | 247 | } 248 | .container-buttons a{ 249 | padding: 20px 10%; 250 | text-align: center ; 251 | } 252 | .container-text { 253 | width: 100%; 254 | } 255 | .text-desencriptar { 256 | padding: 10px; 257 | font-size: 18px; 258 | } 259 | .text-desencriptar, .text-desencriptar:focus { 260 | font-size: 18px; 261 | } 262 | .text-desencriptar::placeholder { 263 | font-size: 18px; 264 | } 265 | .container-resultado { 266 | width: 100%; 267 | min-width: none; 268 | } 269 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 18 | 19 | Encriptador de Texto 20 | 21 | 22 | 23 |
24 |
25 | 41 |
42 | 48 |

49 | 56 | 60 | 61 | Solo letras minúsculas, sin carácteres especiales y sin acentos 62 |

63 |
64 |
65 | Encriptar 66 | Desencriptar 67 |
68 |
69 | 70 |
71 |
72 |
73 | 80 | 81 | 85 | 89 | 93 | 97 | 101 | 105 | 109 | 113 | 117 | 121 | 125 | 129 | 133 | 137 | 141 | 145 | 149 | 153 | 157 | 161 | 165 | 169 | 173 | 177 | 181 | 185 | 189 | 193 | 197 | 201 | 205 | 209 | 213 | 217 | 221 | 225 | 229 | 233 | 237 | 241 | 245 | 249 | 253 | 257 | 261 | 265 | 269 | 273 | 277 | 281 | 285 | 289 | 293 | 297 | 301 | 305 | 309 | 314 | 318 | 322 | 326 | 330 | 334 | 338 | 342 | 346 | 350 | 354 | 359 | 363 | 367 | 371 | 375 | 379 | 383 | 387 | 391 | 395 | 399 | 404 | 408 | 412 | 416 | 420 | 424 | 428 | 432 | 436 | 440 | 444 | 449 | 453 | 457 | 461 | 465 | 469 | 473 | 477 | 481 | 485 | 489 | 493 | 497 | 501 | 505 | 509 | 513 | 518 | 522 | 526 | 530 | 534 | 538 | 542 | 546 | 550 | 554 | 558 | 562 | 566 | 570 | 574 | 578 | 582 | 586 | 590 | 594 | 600 | 604 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 |
616 |
617 |

Ningún mensaje fué encontrado

618 |

619 | Ingrese el texto que desees encriptar o desencriptar. 620 |

621 |
622 |
623 | 624 | 628 |
629 |
630 | 631 | 632 | 633 | 634 | --------------------------------------------------------------------------------