├── README.md ├── css ├── reset.css └── style.css ├── index.html └── js └── index.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Encriptador y desencriptador de texto 🔏 3 | 4 | Este es un proyecto creado con la iniciativa de resolver un challenge de Alura & Oracle Next Education. El proyecto esta desarollado con las tecnologias: HTML, CSS, JS. Con diseño Responsive 5 | ## Autor - ✒️ 6 | **Lina Duarte** 7 | 8 | * [Linkedin](http://www.linkedin.com/in/lina-duarte-dw) 9 | 10 | ## Ver ejemplo en vivo 11 | 12 | * [GITHUBPAGES](https://codeld24.github.io/Encriptador-y-Desencriptador-de-texto/) 13 | 14 | ## Instalación 15 | Este proyecto no necesita instalacion, solo hay que descargar los archvios y dar doble click al archivo index.html 16 | 17 | ## Contratación 18 | Si quieres contratarme puedes escribirme a linaduarteworks@gmail.com 19 | 20 | 21 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | 2 | .container{ 3 | display: flex; 4 | height: 100vh; 5 | font-family: 'Quicksand', sans-serif; 6 | background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); 7 | } 8 | .menu{ 9 | display: none; 10 | } 11 | .encriptador{ 12 | /*background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);*/ 13 | width: 50%; 14 | display: grid; 15 | place-items: center; 16 | } 17 | .ingreso-texto{ 18 | width: 100%; 19 | } 20 | .ocultar-ingreso{ 21 | display: none; 22 | } 23 | h1{ 24 | font-size: 2em; 25 | text-align: center; 26 | margin-top: 0.2em; 27 | margin-bottom: 0.5em; 28 | color: #ffda1e; 29 | } 30 | .centrar{ 31 | display: grid; 32 | place-items: center; 33 | width: 100%; 34 | } 35 | .botones{ 36 | display: flex; 37 | margin: 5px; 38 | } 39 | button{ 40 | padding: 10px; 41 | background-color: transparent; 42 | color: #fff; 43 | border: 2px solid rgb(227, 225, 225); 44 | border-radius: 5px; 45 | margin-right: 10px; 46 | font-size: 15px; 47 | } 48 | 49 | button:hover{ 50 | background: linear-gradient(90deg, rgba(223,223,222,1) 0%, rgba(233,233,233,1) 44%, rgba(255,255,255,1) 100%); 51 | color: #7D6EEE; 52 | cursor: pointer; 53 | 54 | } 55 | button a{ 56 | text-decoration: none; 57 | color: #fff; 58 | } 59 | textarea{ 60 | border: none; 61 | background-color: transparent; 62 | outline: none; 63 | font-family: 'Quicksand', sans-serif; 64 | font-size: 1.5em; 65 | height: 4em; 66 | width: 80%; 67 | margin-bottom: 1em; 68 | border-radius: 20px; 69 | box-shadow: 5px 5px 15px -3px #00000040; 70 | padding: 15px; 71 | color: #fff; 72 | } 73 | textarea::placeholder{ 74 | color: #fff; 75 | } 76 | .info{ 77 | text-align: center; 78 | margin-bottom: 20px; 79 | font-size: 1.2em; 80 | color: #a6fecd; 81 | } 82 | .autoDestruccion{ 83 | color: #e32378; 84 | background-color: rgba(255, 255, 255, 0.89); 85 | padding: 5px; 86 | border-radius: 5px; 87 | } 88 | .resultado{ 89 | width: 100%; 90 | display: grid; 91 | place-items: center; 92 | display: none; 93 | } 94 | .desincriptadora{ 95 | /*background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);*/ 96 | width: 50%; 97 | display: grid; 98 | place-items: center; 99 | } 100 | 101 | /*Responsive*/ 102 | 103 | @media screen and (max-width:540px) { 104 | .container{ 105 | display: block; 106 | } 107 | .menu{ 108 | display: block; 109 | width: 100%; 110 | height: 100%; 111 | position: relative; 112 | 113 | } 114 | .opciones{ 115 | position: absolute; 116 | top: 50%; 117 | left: 50%; 118 | transform: translate(-50%,-50%); 119 | } 120 | 121 | .encriptador, .desincriptadora{ 122 | width: 100%; 123 | height: 100%; 124 | } 125 | .encriptador{ 126 | background: linear-gradient(310deg, rgba(43,181,227,1) 20%, rgba(66,162,231,1) 52%, rgba(90,141,234,1) 89%); 127 | } 128 | .desincriptadora{ 129 | background: linear-gradient(121deg, rgba(250,1,254,1) 29%, rgba(216,32,251,1) 52%, rgba(172,68,244,1) 74%); 130 | } 131 | 132 | .info{ 133 | text-align: justify; 134 | font-size: 1em; 135 | width: 95%; 136 | 137 | } 138 | textarea{ 139 | height: 2.7em; 140 | } 141 | } 142 | @media screen and (max-width:750px) { 143 | .container{ 144 | display: block; 145 | } 146 | .menu{ 147 | display: block; 148 | width: 100%; 149 | height: 100%; 150 | position: relative; 151 | 152 | } 153 | .opciones{ 154 | position: absolute; 155 | top: 50%; 156 | left: 50%; 157 | transform: translate(-50%,-50%); 158 | } 159 | 160 | .encriptador, .desincriptadora{ 161 | width: 100%; 162 | height: 100%; 163 | } 164 | .encriptador{ 165 | background: linear-gradient(310deg, rgba(43,181,227,1) 20%, rgba(66,162,231,1) 52%, rgba(90,141,234,1) 89%); 166 | } 167 | .desincriptadora{ 168 | background: linear-gradient(121deg, rgba(250,1,254,1) 29%, rgba(216,32,251,1) 52%, rgba(172,68,244,1) 74%); 169 | } 170 | 171 | .info{ 172 | text-align: justify; 173 | font-size: 1em; 174 | width: 90%; 175 | 176 | } 177 | } 178 | @media screen and (max-width:768px) { 179 | .info{ 180 | text-align: justify; 181 | font-size: 1.2em; 182 | width: 70%; 183 | } 184 | button{ 185 | font-size: 20px; 186 | } 187 | } 188 | @media screen and (max-width:912px) { 189 | .info{ 190 | text-align: justify; 191 | font-size: 1.2em; 192 | width: 70%; 193 | } 194 | button{ 195 | font-size: 20px; 196 | } 197 | } 198 | 199 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Encriptador / Desencriptador 13 | 14 | 15 |
16 |
17 |
18 |
19 |

¿Que deseas hacer?

20 |
21 | 22 | 23 |
24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 |

Encripte su texto

32 |
33 | 34 | 35 | 36 |

No se permiten palabras con acentos, caracteres especiales, tampoco letras mayúsculas.

37 | 38 |
39 | 40 | 41 | 42 | 43 |
44 |
45 |
46 | 47 |
48 |

Resultado

49 |
50 | 51 |

52 |
53 | 54 |
55 |
56 |
57 |
58 | 59 | 60 |
61 | 62 |
63 |

Desencripte su texto

64 | 65 |
66 | 67 |

No se permiten palabras con acentos, caracteres especiales, tampoco letras mayúsculas.

68 |
69 | 70 | 71 | 72 |
73 |
74 |
75 | 76 |
77 |

Resultado

78 |
79 | 80 |

81 |
82 | 83 |
84 |
85 |
86 |
87 |
88 | 89 | 90 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | /*Los ids a los que se les va a aplicar display: none/block */ 2 | const encriptador = document.getElementById("encriptador"); 3 | const desincriptadora = document.getElementById("desincriptadora"); 4 | 5 | /* Limpiar texto variable mandada por el evento onclick (idLimpiar)*/ 6 | const encriptar = document.getElementById("encriptar"); 7 | const desencriptar = document.getElementById("desencriptar"); 8 | 9 | /*Copiar texto de la id mandada por el evento onclik (idCopy)*/ 10 | const resultadoEncriptar = document.getElementById("resultado-encriptado"); 11 | const resultadoDesencriptar = document.getElementById("resultado-desencriptado"); 12 | 13 | /* los id para mostrar mensaje de la AUTODESTRUCCION (info)*/ 14 | const autoDestruccionEn = document.getElementById("autoDestruccionEn"); 15 | const autoDestruccionDes = document.getElementById("autoDestruccionDes"); 16 | 17 | /*los id para ocultar o mostrar el resultado */ 18 | const encriptadoDisplay = document.getElementById('en'); 19 | const desencriptadoDisplay = document.getElementById('des'); 20 | 21 | /* variables para modificar los valores de la AutoDestruccion */ 22 | const segundos = 6000; // un 1000 segundo equivale a 1 segundo 23 | const autoDestruccionMs = "El texto se ocultara en 60 segundos para mayor seguridad" 24 | 25 | /* Libreria que se va a tener en cuenta para el challenge*/ 26 | const libreria = /^[a-z ]+$/; 27 | 28 | function limpiarTexto(idLimpiar){ 29 | idLimpiar.value = ''; 30 | idLimpiar.focus(); 31 | } 32 | 33 | function copiarTexto(idCopy){ 34 | idCopy.select(); 35 | idCopy.setSelectionRange(0,99999); 36 | document.execCommand('copy'); 37 | } 38 | 39 | function validacionLetras(e){ 40 | var key = e.keyCode || e.which, 41 | tecla = String.fromCharCode(key); 42 | 43 | if (libreria.test(tecla) == false ) { 44 | 45 | alert('Recuerde que no puede ingresar Mayúsculas, Caracteres Especiales, tampoco se permiten acentos'); 46 | return false; 47 | } 48 | } 49 | 50 | function mostrarResultado(idLimpiar,idDisplay,info,ingreso){ 51 | ingreso.className = "ocultar-ingreso"; 52 | idDisplay.className = "mostrar-resultado"; 53 | 54 | ocultarResultado(idLimpiar,idDisplay,info,ingreso); 55 | } 56 | 57 | function ocultarResultado(idLimpiar,idDisplay,info,ingreso){ 58 | info.innerHTML = autoDestruccionMs; 59 | 60 | setTimeout(function(){ 61 | idDisplay.className = "resultado"; 62 | ingreso.className = "ingreso-texto"; 63 | limpiarTexto(idLimpiar); 64 | }, segundos); 65 | } 66 | 67 | function encriptacion(){ 68 | if(encriptar.value == ""){ 69 | alert("primero ingrese un texto!!!"); 70 | encriptar.focus(); 71 | }else if (libreria.test(encriptar.value) == false ) { 72 | 73 | alert('Recuerde que no puede ingresar Mayúsculas, Caracteres Especiales, tampoco se permiten acentos'); 74 | limpiarTexto(encriptar); 75 | 76 | }else{ 77 | var textoEncriptado = encriptar.value.replace(/e/img, "enter"); 78 | var textoEncriptado = textoEncriptado.replace(/i/img, "imes"); 79 | var textoEncriptado = textoEncriptado.replace(/a/img, "ai"); 80 | var textoEncriptado = textoEncriptado.replace(/o/img, "ober"); 81 | var textoEncriptado = textoEncriptado.replace(/u/img, "ufat"); 82 | var textoEncriptado = textoEncriptado.replace(/''/img, ""); 83 | 84 | resultadoEncriptar.innerHTML = textoEncriptado; 85 | 86 | mostrarResultado(encriptar,encriptadoDisplay,autoDestruccionEn,encriptador); 87 | } 88 | } 89 | 90 | function desencriptacion(){ 91 | if(desencriptar.value == ""){ 92 | alert("primero ingrese un texto!!!"); 93 | desencriptar.focus(); 94 | }else{ 95 | 96 | var textoDesencriptado = desencriptar.value.replace(/enter/img, "e"); 97 | var textoDesencriptado = textoDesencriptado.replace(/imes/img, "i"); 98 | var textoDesencriptado = textoDesencriptado.replace(/ai/img, "a"); 99 | var textoDesencriptado = textoDesencriptado.replace(/ober/img, "o"); 100 | var textoDesencriptado = textoDesencriptado.replace(/ufat/img, "u"); 101 | var textoDesencriptado = textoDesencriptado.replace(/''/img, ""); 102 | 103 | resultadoDesencriptar.innerHTML = textoDesencriptado; 104 | 105 | mostrarResultado(desencriptar,desencriptadoDisplay,autoDestruccionDes,desincriptadora); 106 | } 107 | } 108 | 109 | --------------------------------------------------------------------------------