├── img ├── Muñeco.png ├── Vector.png ├── alerta.png ├── Captura.PNG └── icono-advertencia.png ├── README.md ├── index.html ├── app.js └── styles.css /img/Muñeco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Manuel-Tovar/encriptador/HEAD/img/Muñeco.png -------------------------------------------------------------------------------- /img/Vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Manuel-Tovar/encriptador/HEAD/img/Vector.png -------------------------------------------------------------------------------- /img/alerta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Manuel-Tovar/encriptador/HEAD/img/alerta.png -------------------------------------------------------------------------------- /img/Captura.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Manuel-Tovar/encriptador/HEAD/img/Captura.PNG -------------------------------------------------------------------------------- /img/icono-advertencia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Manuel-Tovar/encriptador/HEAD/img/icono-advertencia.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🔏 Encriptador de texto 2 |

3 | 4 |

5 | 6 |
7 | 8 | 9 | 10 |
11 | 12 | --- 13 | 14 | ## 💡 Descripción 15 | 16 | Encriptador de texto desarrollado con JavaScript, HTML y CSS para el challenge del **_Proyecto ONE_** de **Oracle+Alura LATAM**. 17 | 18 | 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" 19 | 20 | --- 21 | 22 | ## 🔑 Llaves de encriptacion 23 | 24 | Las llaves de encriptacion solicitadas son las siguientes: 25 | 26 | - La letra "**a**" es convertida a "**ai**". 27 | - La letra "**e**" es convertida a "**enter**". 28 | - La letra "**i**" es convertida a "**imes**". 29 | - La letra "**o**" es convertida a "**ober**" 30 | - La letra "**u**" es convertida a "**ufat**" 31 | 32 | --- 33 | 34 | ## ✔️ Requisitos 35 | 36 | - Debe funcionar solo con letras minúsculas. 37 | - No deben ser utilizados letras con acentos ni caracteres especiales. 38 | - Debe ser posible convertir una palabra para la versión encriptada también devolver una palabra encriptada para su versión original. 39 | 40 | ``` 41 | Por ejemplo: 42 | "gato" => "gaitober" 43 | gaitober" => "gato" 44 | ``` 45 | 46 | - La página debe tener campos para inserción del texto que será encriptado o desencriptado, y el usuario debe poder escoger entre las dos opciones. 47 | - El resultado debe ser mostrado en la pantalla. 48 | 49 | ### Extras: 50 | 51 | - Un botón que copie el texto encriptado/desencriptado para la sección de transferencia, o sea que tenga la misma funcionalidad del ctrl+C o de la opción "copiar" del menú de las aplicaciones. 52 | 53 | --- 54 | 55 | ### Autor: 56 | - Manuel de Jesus Tovar
57 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Encriptador de Texto 9 | 10 | 11 | 12 | 16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 |
25 |

manuelTovar@admin: ~

26 |
27 | 28 |

icon Solo letras minúsculas y sin acentos

29 |
30 | 31 | 32 |
33 |
34 |
35 |
36 |
37 | 38 |
39 | busqueda 40 |

Ningún mensaje fue encontrado

41 |

Ingresa el texto que desees encriptar o desencriptar.

42 |
43 | 44 |
45 |
46 | 0% 47 |

Cargando...

48 |
49 |
50 |
51 |
52 |
53 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const btnEncriptar = document.getElementById("encriptar"), 2 | btnDesencriptar = document.getElementById("desencriptar"), 3 | textImprimir = document.getElementById("resultado-texto"), 4 | sinRest = document.getElementById("texto-imprime"), 5 | btnCopiar = document.getElementById("copiar"), 6 | textIngresado = document.getElementById("ingreso-texto"), 7 | animacion = document.getElementById("animacion"); 8 | 9 | const claveEncriptacion = text => { 10 | return text 11 | .replace(/e/g, "enter") 12 | .replace(/i/g, "imes") 13 | .replace(/a/g, "ai") 14 | .replace(/o/g, "ober") 15 | .replace(/u/g, "ufat") 16 | } 17 | 18 | const claveDesencriptacion = text => { 19 | return text 20 | .replace(/enter/g, "e") 21 | .replace(/imes/g, "i") 22 | .replace(/ai/g, "a") 23 | .replace(/ober/g, "o") 24 | .replace(/ufat/g, "u") 25 | } 26 | 27 | btnEncriptar.addEventListener("click", ()=> { 28 | /* FUNCION PARA EL BOTON ENCRIPTAR */ 29 | textImprimir.value = claveEncriptacion(textIngresado.value); 30 | validar(); 31 | 32 | }) 33 | 34 | btnDesencriptar.addEventListener("click", ()=> { 35 | /* FUNCION PARA EL BOTON DESENCRIPTAR */ 36 | textImprimir.value = claveDesencriptacion(textIngresado.value); 37 | validar(); 38 | }) 39 | 40 | function validar(){ 41 | sinRest.style.display = "none" 42 | textImprimir.style.display = "none"; 43 | btnCopiar.style.display = "none"; 44 | animacion.style.display = "flex" 45 | /* CONDICION PARA EVALUAR SI EL VALOR DE TEXT AREA ESTA VACIO */ 46 | if(textIngresado.value == ""){ 47 | textImprimir.style.display = "none"; 48 | btnCopiar.style.display = "none"; 49 | sinRest.style.display = "flex"; 50 | sinRest.style.flexDirection = "column"; 51 | animacion.style.display = "none"; 52 | }else{ 53 | barraPorcentaje(); 54 | textIngresado.innerHTML = textImprimir 55 | textIngresado.value = ""; 56 | } 57 | } 58 | 59 | 60 | function barraPorcentaje() { 61 | /* FUNCION PARA CARGAR LA BARRA DE PORCENTAJE */ 62 | btnEncriptar.disabled = true; 63 | btnDesencriptar.disabled = true; 64 | const progresoBar = document.getElementById('barra'); 65 | const progresoBarText = progresoBar.querySelector('.progreso-bar-text'); 66 | const animacion = document.getElementById("animacion"); 67 | let porcent = 0; 68 | progresoBar.style.width = porcent + '%'; 69 | progresoBarText.textContent = porcent + '%'; 70 | let progreso = setInterval(function() { 71 | if (porcent >= 100) { 72 | clearInterval(progreso); 73 | btnEncriptar.disabled = false; 74 | btnDesencriptar.disabled = false; 75 | animacion.style.display = "none"; 76 | textImprimir.style.display = "flex"; 77 | btnCopiar.style.display = "block"; 78 | 79 | } else { 80 | porcent = porcent + 1; 81 | progresoBar.style.width = porcent + '%'; 82 | progresoBarText.textContent = porcent + '%'; 83 | } 84 | }, 30); 85 | } 86 | 87 | btnCopiar.addEventListener("click", ()=> { 88 | // FUNCION PARA COPIAR 89 | textImprimir.focus(); 90 | document.execCommand("selectAll"); 91 | document.execCommand("copy"); 92 | showAlert(); 93 | }) 94 | 95 | 96 | /* FUNCION PARA QUITAR LAS MAYUSCULAS Y LOS ACENTOS AL TEXT AREA */ 97 | textIngresado.addEventListener("input", () => { 98 | textIngresado.value = textIngresado.value.normalize("NFD").replace(/[^a-zA-Z 0-9.]+/g,'').toLowerCase() 99 | }); 100 | 101 | function showAlert() { 102 | Swal.fire({ 103 | position: 'top-end', 104 | icon: 'success', 105 | title: 'Texto Copiado', 106 | backdrop: false, 107 | showConfirmButton: false, 108 | timer: 1300 109 | }) 110 | } 111 | 112 | // FUNCION PARA ANIMACION DE MATRIX 113 | 114 | canvas.height = window.screen.height; 115 | canvas.width = window.screen.width; 116 | 117 | var columns = [] 118 | for (i = 0; i < 256; columns[i++] = 1); 119 | 120 | 121 | function step() { 122 | canvas.getContext('2d').fillStyle = 'rgba(0,0,0,0.05)'; 123 | canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height); 124 | canvas.getContext('2d').fillStyle = '#0F0'; 125 | columns.map(function (value, index) { 126 | 127 | var character = String.fromCharCode(3e4 + 128 | Math.random() * 33); 129 | 130 | canvas.getContext('2d').fillText(character, //texto 131 | index * 10, //x 132 | value //y 133 | ); 134 | columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10 135 | }) 136 | } 137 | 138 | setInterval(step, 33); 139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; /* REINICIO DE TODOS LOS ELEMENTO POR DEFECTO */ 4 | } 5 | 6 | 7 | body{ 8 | font-family: 'Courier New', Courier, monospace; /* FUENTE GLOBAL */ 9 | background-color: #000000; 10 | } 11 | 12 | /* ESTILO DEL CANVAS */ 13 | 14 | canvas{ 15 | width: 100%; 16 | height: 50px; 17 | } 18 | 19 | 20 | /* LOGO DE ALURA */ 21 | 22 | #logo{ 23 | width: 100%; 24 | display: flex; 25 | } 26 | 27 | #logo img{ 28 | width: 30px; 29 | margin-left: 30px; 30 | } 31 | 32 | #logo p{ 33 | color: #7eda28; 34 | font-size: 30px; 35 | margin: auto; 36 | font-style: oblique; 37 | } 38 | 39 | 40 | /* CONTENEDOR DE LAS DOS DIVISIONES */ 41 | 42 | #contenedor{ 43 | display: grid; 44 | grid-template-columns: repeat(2, 1fr); 45 | grid-template-rows: 1fr; 46 | grid-column-gap: 0px; 47 | grid-row-gap: 0px; 48 | justify-items: center; 49 | align-items: center; 50 | height:80vh ; 51 | 52 | } 53 | 54 | /* DIVISION UNO DONDE SE ESCRIBE EL TEXTO */ 55 | 56 | #division-uno{ 57 | display: flex; 58 | flex-direction: column; 59 | width: 100%; 60 | } 61 | 62 | #division-uno img{ 63 | width: 16px; 64 | height: 16px; 65 | margin-left: 30px; 66 | } 67 | 68 | .terminal { 69 | display: flex; 70 | height: 30px; 71 | align-items: center; 72 | padding: 0 8px; 73 | box-sizing: border-box; 74 | border-top-left-radius: 5px; 75 | border-top-right-radius: 5px; 76 | background: linear-gradient(#504b45 0%, #3c3b37 100%); 77 | width: 100%; 78 | } 79 | 80 | .butt { 81 | display: flex; 82 | align-items: center; 83 | } 84 | 85 | .btn { 86 | display: flex; 87 | justify-content: center; 88 | align-items: center; 89 | padding: 0; 90 | margin-right: 5px; 91 | font-size: 8px; 92 | height: 12px; 93 | width: 12px; 94 | border: none; 95 | border-radius: 100%; 96 | background: linear-gradient(#7d7871 0%, #595953 100%); 97 | text-shadow: 0px 1px 0px rgba(255,255,255,0.2); 98 | box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642; 99 | } 100 | 101 | .btn-color { 102 | background: #ee411a; 103 | } 104 | 105 | .btn:hover { 106 | cursor: pointer; 107 | } 108 | 109 | .btn:focus { 110 | outline: none; 111 | } 112 | 113 | .butt--exit { 114 | background: linear-gradient(#f37458 0%, #de4c12 100%); 115 | } 116 | .user { 117 | color: #d5d0ce; 118 | margin-left: 6px; 119 | font-size: 14px; 120 | line-height: 15px; 121 | } 122 | 123 | #texto-escribir{ 124 | display: flex; 125 | flex-direction: column; 126 | max-width: 578px; 127 | margin-top: 10px; 128 | } 129 | 130 | #texto-escribir textarea { 131 | width: 100%; 132 | height: 100%; 133 | border: 0; 134 | text-align: left; 135 | font-size: 26px; 136 | resize: none; 137 | outline: none; 138 | background-color: rgba(56, 4, 40, 0.9); 139 | color: #7eda28; 140 | } 141 | 142 | #texto-escribir textarea::placeholder { 143 | color: #7eda28; 144 | text-align: center; 145 | } 146 | 147 | #texto-escribir .alerta { 148 | margin-top: 20px; 149 | color: #FFFFFF; 150 | } 151 | 152 | /* BOTONES DE ENCRIPTAR O DESENCRIPTAR */ 153 | 154 | #btn{ 155 | display: flex; 156 | gap: 8px; 157 | margin-top: 10px; 158 | justify-content: center; 159 | margin-left: 20px; 160 | } 161 | 162 | #btn p{ 163 | justify-content: center; 164 | } 165 | 166 | #encriptar, #desencriptar { 167 | cursor: pointer; 168 | background: transparent; 169 | position: relative; 170 | display: inline-block; 171 | padding: 15px 30px; 172 | outline: none; 173 | border: 2px solid #0f0; 174 | margin: 0px; 175 | width: 50%; 176 | height: 60px; 177 | text-transform: uppercase; 178 | font-weight: 900; 179 | text-decoration: none; 180 | letter-spacing: 2px; 181 | color: #fff; 182 | -webkit-box-reflect: below 0px linear-gradient(transparent, #0002); 183 | transition: 0.45s; 184 | transition-delay: 0s; 185 | } 186 | 187 | #encriptar:hover, #desencriptar:hover { 188 | transition-delay: 1.5s; 189 | color: #000; 190 | box-shadow: 0 0 10px #0f0, 191 | 0 0 20px #0f0, 192 | 0 0 40px #0f0, 193 | 0 0 80px #0f0, 194 | 0 0 100px #0f0; 195 | } 196 | 197 | #encriptar span, #desencriptar span { 198 | position: relative; 199 | z-index: 100; 200 | } 201 | 202 | #encriptar::before, #desencriptar::before { 203 | content: ""; 204 | position: absolute; 205 | left: -20px; 206 | top: 50%; 207 | transform: translateY(-50%); 208 | width: 20px; 209 | height: 2px; 210 | background: #0f0; 211 | box-shadow: 5px -8px 0 #0f0, 212 | 5px 8px 0 #0f0; 213 | transition: width 0.5s, 214 | left 0.5s, 215 | height 0.5s, 216 | box-shadow 0.5s; 217 | transition-delay: 1s, 0.5s, 0s, 0s; 218 | } 219 | 220 | #encriptar:hover::before, #desencriptar:hover::before { 221 | width: 60%; 222 | height: 100%; 223 | /* right: -2px; */ 224 | left: -2px; 225 | box-shadow: 5px 0 0 #0f0, 226 | 5px 0 0 #0f0; 227 | transition-delay: 0s, 0.5s, 1s, 1s; 228 | } 229 | 230 | #encriptar::after, #desencriptar::after { 231 | content: ""; 232 | position: absolute; 233 | right: -20px; 234 | top: 50%; 235 | transform: translateY(-50%); 236 | width: 20px; 237 | height: 2px; 238 | background: #0f0; 239 | box-shadow: -5px -8px 0 #0f0, 240 | -5px 8px 0 #0f0; 241 | transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s; 242 | transition-delay: 1s, 0.5s, 0s, 0s; 243 | } 244 | 245 | #encriptar:hover::after, #desencriptar:hover::after { 246 | width: 60%; 247 | height: 102%; 248 | right: -2px; 249 | box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0; 250 | transition-delay: 0s, 0.5s, 1s, 1s; 251 | } 252 | 253 | 254 | 255 | /* DIVISION DONDE SE IMPRIME EL TEXO ENCRIPTADO */ 256 | 257 | #division-dos{ 258 | display: flex; 259 | flex-direction: row; 260 | justify-content: space-around; 261 | max-width: 578px; 262 | background-color: #FFFFFF; 263 | border-radius: 32px; 264 | width: 80%; 265 | margin-bottom: 50px; 266 | } 267 | 268 | #contenedor-texto-imprime{ 269 | display: flex; 270 | flex-direction: column; 271 | text-align: center; 272 | padding-bottom: 50px; 273 | width: 100%; 274 | } 275 | 276 | #contenedor-texto-imprime h2 { 277 | margin-top: 20px; 278 | font-size: 24px; 279 | } 280 | 281 | #contenedor-texto-imprime textarea{ 282 | width: 90%; 283 | border: 0; 284 | margin-left: 20px; 285 | text-align: center; 286 | font-size: 28px; 287 | resize: none; 288 | outline: none; 289 | background-color: #FFFFFF; 290 | text-align: start; 291 | min-height: 300px; 292 | margin-top: 30px; 293 | display: none; 294 | } 295 | 296 | #texto-imprime img { 297 | max-width: 300px; 298 | margin: auto; 299 | } 300 | 301 | /* BOTON DE COPIAR */ 302 | 303 | #copiar{ 304 | width: 50%; 305 | height: 30px; 306 | font-family: inherit; 307 | border: none; 308 | outline: 1px dotted rgb(37, 37, 37); 309 | outline-offset: -4px; 310 | background: hsl(0deg 0% 75%); 311 | box-shadow: inset -1px -1px #292929, inset 1px 1px #fff, inset -2px -2px rgb(158, 158, 158), inset 2px 2px #ffffff; 312 | font-size: 14px; 313 | text-transform: uppercase; 314 | letter-spacing: 2px; 315 | margin: auto; 316 | display: none; 317 | } 318 | 319 | #copiar:active { 320 | box-shadow: inset -1px -1px #fff, inset 1px 1px #292929, inset -2px -2px #ffffff, inset 2px 2px rgb(158, 158, 158); 321 | } 322 | 323 | /* BARRA DE PORCENTAJE */ 324 | 325 | #animacion{ 326 | display: none; 327 | } 328 | 329 | .progreso { 330 | height: 50px; 331 | width: 90%; 332 | margin-top: 50px; 333 | border: 1px solid #ffffff; 334 | border-radius: 5px; 335 | background-color: #ffffff; 336 | } 337 | 338 | .progreso-bar { 339 | height: 100%; 340 | background: rgb(126, 218, 40); 341 | display: flex; 342 | align-items: center; 343 | transition: width 0.25s; 344 | border-radius: 5px; 345 | } 346 | 347 | .progreso-bar-text { 348 | margin-left: 10px; 349 | font-weight: bold; 350 | color: rgba(56, 4, 40, 0.9); 351 | } 352 | 353 | /* FOOTER */ 354 | 355 | footer { 356 | background-color: black; 357 | position: sticky; 358 | z-index: 99; 359 | bottom: 0; 360 | width: 100%; 361 | height: 20px; 362 | color: #FFFFFF; 363 | display: flex; 364 | margin-top: 50px; 365 | 366 | } 367 | 368 | footer a { 369 | text-decoration: none; 370 | color: #FFFFFF; 371 | margin-left: 30px; 372 | font-family: 'Courier New', Courier, monospace; 373 | } 374 | 375 | 376 | /* MEDIA QUERIES PARA OPTIMIZAR AL CELULAR Y TABLET */ 377 | 378 | @media (max-width: 890px) { 379 | #contenedor, #btn, #division-uno{ 380 | display: flex; 381 | flex-direction: column; 382 | align-items: center; 383 | 384 | } 385 | 386 | #texto-escribir{ 387 | margin: 15px; 388 | } 389 | 390 | #texto-escribir textarea{ 391 | margin: auto; 392 | padding: 0; 393 | display: flex; 394 | text-align: left; 395 | } 396 | 397 | #texto-imprime img { 398 | display: none; 399 | } 400 | 401 | #logo img { 402 | margin: 5px 10px; 403 | } 404 | 405 | 406 | 407 | #division-uno p, #division-uno img { 408 | display: flex; 409 | margin: 0; 410 | } 411 | 412 | #resultado-texto{ 413 | margin: auto; 414 | justify-content: center; 415 | min-height: 300px; 416 | text-align: center; 417 | display: none; 418 | } 419 | #btn button { 420 | max-width: 250px; 421 | margin: auto ; 422 | padding: 0; 423 | justify-content: center; 424 | } 425 | 426 | footer{ 427 | display: none; 428 | } 429 | } 430 | 431 | 432 | 433 | --------------------------------------------------------------------------------