Ningún mensaje fué encontrado
618 | 621 |49 | 61 | Solo letras minúsculas, sin carácteres especiales y sin acentos 62 |
63 |├── 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 |
13 |
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 |
72 | 74 | Aqui tienes el 75 | 76 | link del proyecto finalizado 77 | 78 | para que lo puedas ver 79 |
80 | 81 |
87 |
88 |
95 | 97 | Para organizarme y ver los requisitos que debería cumplir el proyecto 98 |
99 | 100 | 101 | link del Trello 102 | 103 | 104 |
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 |
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 |49 | 61 | Solo letras minúsculas, sin carácteres especiales y sin acentos 62 |
63 |Ningún mensaje fué encontrado
618 | 621 |