Encriptador

├── README.md ├── index.html └── src ├── assets ├── 1.gif ├── ico.ico └── img │ ├── boy.svg │ ├── design-desktop.png │ ├── icon-info.svg │ └── logo.svg ├── css ├── reset.css └── style.css └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # 🔒Encriptador de Texto | Challenge ONE - Oracle Next Education 2 | 3 | ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=flat&logo=javascript&logoColor=%23F7DF1E) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=flat&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=flat&logo=css3&logoColor=white) 4 | 5 |

6 |

7 |

8 | 9 | ## 🔗Links 10 | 11 | Pagina : [Github-Pages](https://mod8124.github.io/Oracle-challenge-1/) 12 | 13 | ## 📃Resume del projecto 14 | 15 | Este es el primer Challenge del programa ONE - Oracle Next Education. Esta aplicación tiene la función de codificar y decodificar mensajes de texto de forma sencilla. Con el objetivo de intercambiar información con otras personas de una manera segura y divertida. 16 | 17 | ## 🔑Llaves de encriptacion 18 | 19 | Las "llaves" de encriptación que se utilizaron son las siguiente: 20 | 21 | - La letra **"e"** es convertida para **"enter"** 22 | - La letra **"i"** es convertida para **"imes"** 23 | - La letra **"a"** es convertida para **"ai"** 24 | - La letra **"o"** es convertida para **"ober"** 25 | - La letra **"u"** es convertida para **"ufat"** 26 | 27 | **Aplica también a la inversa** 28 | 29 | ## 📋Requisitos: 30 | 31 | - Debe funcionar solo con letras minúsculas. 32 | - No deben ser utilizados letras con acentos ni caracteres especiales. 33 | - Un botón que copie el texto encriptado/desencriptado para la sección de transferencia. 34 | - Debe ser posible convertir una palabra para la versión encriptada también devolver una palabra encriptada para su versión original. 35 | - La página debe tener campos para inserción del texto que será encriptado o desencriptado, y el usuario debe poder escoger entre as dos opciones. 36 | - El resultado debe ser mostrado en la pantalla. 37 | 38 | ` Por ejemplo: "gato" => "gaitober" "gaitober" => "gato"` 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Encriptador 8 | 9 | 10 | 11 | 15 | 16 | 17 |

18 |

19 |

20 |

25 |

26 |

27 |

28 | 35 |

36 | 37 |

38 |

39 |

40 |

41 |

Solo letras minúsculas y sin acentos

42 |

43 |

44 | 47 | 50 |

51 |

52 |

53 |

54 |

55 | 56 |

57 |

58 |

59 |

60 |

Ningún mensaje fue encontrado

61 |

62 | 67 |

68 |

69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/assets/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mod8124/Oracle-challenge-1/9f4fa598f7f4d615928a1fe8984b5423afad9c25/src/assets/1.gif -------------------------------------------------------------------------------- /src/assets/ico.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mod8124/Oracle-challenge-1/9f4fa598f7f4d615928a1fe8984b5423afad9c25/src/assets/ico.ico -------------------------------------------------------------------------------- /src/assets/img/boy.svg: -------------------------------------------------------------------------------- 1 | 140 | -------------------------------------------------------------------------------- /src/assets/img/design-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mod8124/Oracle-challenge-1/9f4fa598f7f4d615928a1fe8984b5423afad9c25/src/assets/img/design-desktop.png -------------------------------------------------------------------------------- /src/assets/img/icon-info.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/css/reset.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type='button'], 199 | [type='reset'], 200 | [type='submit'] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type='button']::-moz-focus-inner, 210 | [type='reset']::-moz-focus-inner, 211 | [type='submit']::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type='button']:-moz-focusring, 222 | [type='reset']:-moz-focusring, 223 | [type='submit']:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type='checkbox'], 273 | [type='radio'] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type='number']::-webkit-inner-spin-button, 283 | [type='number']::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type='search'] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type='search']::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dark-blue-100: #609ed4; 3 | --dark-blue-200: #356ea9; 4 | --dark-blue-300: #0a3b71; 5 | --dark-blue-400: #072b61; 6 | --dark-blue-500: #052051; 7 | 8 | --light-blue-100: #f3f5fc; 9 | --light-blue-200: #eff1fa; 10 | --light-blue-300: #e9ecf8; 11 | --light-blue-400: #aab2d5; 12 | --light-blue-500: #757fb2; 13 | 14 | --gray-100: #ced4da; 15 | --gray-200: #adb5bd; 16 | --gray-300: #868e96; 17 | --gray-400: #495057; 18 | --gray-500: #343a40; 19 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 20 | background: var(--light-blue-100); 21 | } 22 | * { 23 | margin: 0px; 24 | padding: 0px; 25 | box-sizing: border-box; 26 | } 27 | .encryption { 28 | width: 100%; 29 | min-height: 100vh; 30 | background: var(--light-blue-100); 31 | display: grid; 32 | grid-template-columns: 100%; 33 | padding: 30px; 34 | overflow: hidden; 35 | } 36 | 37 | .cta { 38 | display: grid; 39 | grid-template-rows: 10% 90%; 40 | } 41 | 42 | .cta__cta { 43 | display: flex; 44 | flex-wrap: wrap; 45 | padding-top: 4vh; 46 | } 47 | 48 | .cta__ctaInput { 49 | width: 100%; 50 | max-width: 700px; 51 | } 52 | 53 | textarea { 54 | color: var(--dark-blue-300); 55 | width: 100%; 56 | height: 100%; 57 | font-weight: 500; 58 | border: none; 59 | padding-left: 0; 60 | margin-left: 0; 61 | outline: none; 62 | resize: none; 63 | font-size: 22px; 64 | line-height: 150%; 65 | background-color: transparent; 66 | } 67 | 68 | textarea::placeholder { 69 | color: var(--dark-blue-300); 70 | } 71 | 72 | .cta__ctaInfo { 73 | width: 100%; 74 | display: flex; 75 | align-self: flex-end; 76 | } 77 | 78 | .cta__ctaBottom { 79 | width: 100%; 80 | } 81 | 82 | .cta_ctaInfowrapper { 83 | width: 100%; 84 | display: flex; 85 | } 86 | 87 | .cta_ctaInfowrapper p { 88 | padding-left: 1vh; 89 | color: var(--gray-400); 90 | transition: all 0.5s ease-in-out; 91 | } 92 | 93 | .active.cta_ctaInfowrapper p { 94 | color: red; 95 | } 96 | 97 | .cta__ctaButtons { 98 | width: 100%; 99 | padding: 15px; 100 | padding-left: 0; 101 | display: flex; 102 | flex-direction: column; 103 | column-gap: 4vh; 104 | row-gap: 1vh; 105 | min-height: 67px; 106 | } 107 | 108 | .cta__ctaButton { 109 | width: 100%; 110 | /* max-width: 330px; */ 111 | border-radius: 10px; 112 | border: none; 113 | min-height: 55px; 114 | background-color: var(--dark-blue-300); 115 | color: white; 116 | font-weight: bold; 117 | cursor: pointer; 118 | transition: all 0.5s ease-in-out; 119 | } 120 | 121 | .cta__ctaButton:hover { 122 | border: 1px solid var(--dark-blue-500); 123 | background-color: var(--dark-blue-200); 124 | } 125 | 126 | .cta__ctaButton--grey { 127 | background-color: transparent; 128 | color: var(--dark-blue-300); 129 | border: 1px solid var(--dark-blue-300); 130 | } 131 | 132 | .cta__ctaButton--grey:hover { 133 | background-color: var(--dark-blue-100); 134 | color: white; 135 | } 136 | 137 | .result { 138 | padding: 3vh; 139 | background-color: white; 140 | overflow: hidden; 141 | border-radius: 32px; 142 | display: flex; 143 | align-items: center; 144 | flex-direction: column; 145 | justify-content: center; 146 | box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08); 147 | position: relative; 148 | transition: all 0.5s ease-in-out; 149 | } 150 | 151 | .result__title { 152 | width: 80%; 153 | text-align: center; 154 | padding-top: 3vh; 155 | font-size: 24px; 156 | color: var(--gray-400); 157 | transition: all 0.5s ease-in-out; 158 | } 159 | 160 | .result__boy { 161 | transform: translateY(0%); 162 | transition: all 0.5s ease-in-out; 163 | display: none; 164 | } 165 | 166 | .result__paragraph { 167 | color: var(--gray-400); 168 | padding-bottom: 3vh; 169 | line-height: 150%; 170 | } 171 | 172 | .cta-ctaButton-desative, 173 | .result__paragraph { 174 | transition: all 0.5s ease-in-out; 175 | transform: translateX(150%); 176 | } 177 | 178 | .cta-ctaButton-desative { 179 | position: relative; 180 | right: 300%; 181 | display: none; 182 | } 183 | 184 | .active .cta-ctaButton-desative, 185 | .active .result__paragraph { 186 | transform: translateX(0); 187 | right: 0; 188 | } 189 | 190 | .active .cta-ctaButton-desative { 191 | display: block; 192 | } 193 | 194 | .active .result__paragraph { 195 | height: 100%; 196 | display: flex; 197 | align-items: center; 198 | } 199 | 200 | .active .result__title { 201 | transform: translateX(-150%); 202 | position: absolute; 203 | } 204 | .active .result__boy { 205 | transform: translateY(300%); 206 | position: absolute; 207 | } 208 | 209 | .cta-ctaButton-desative::after { 210 | content: '✔️ Texto Copiado'; 211 | width: 100%; 212 | display: flex; 213 | align-items: center; 214 | justify-content: center; 215 | position: absolute; 216 | background-color: var(--light-blue-100); 217 | position: absolute; 218 | top: -110%; 219 | color: var(--dark-blue-300); 220 | transition: all 0.5s ease-in-out; 221 | height: 100%; 222 | opacity: 1; 223 | outline: none; 224 | transform: scale(0); 225 | } 226 | 227 | .copy.cta-ctaButton-desative::after { 228 | opacity: 1; 229 | transform: scale(1); 230 | } 231 | 232 | @media only screen and (min-width: 700px) { 233 | .cta__ctaButtons { 234 | flex-direction: row; 235 | } 236 | } 237 | 238 | @media only screen and (min-width: 1200px) { 239 | .encryption { 240 | grid-template-columns: 80% 20%; 241 | } 242 | 243 | .result { 244 | max-width: 400px; 245 | padding: 0; 246 | } 247 | 248 | .cta__cta { 249 | padding-left: 20vh; 250 | } 251 | 252 | textarea { 253 | font-size: 32px; 254 | } 255 | 256 | .cta__ctaButton { 257 | max-width: 330px; 258 | } 259 | 260 | .cta-ctaButton-desative { 261 | display: block; 262 | } 263 | 264 | .result__boy { 265 | display: block; 266 | } 267 | 268 | .active.result { 269 | background-image: url('../assets/1.gif'); 270 | background-position: top; 271 | background-repeat: no-repeat; 272 | background-size: contain; 273 | padding: 30px; 274 | } 275 | 276 | .cta-ctaButton-desative::after { 277 | top: -130%; 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | const btnEncrypt = document.querySelector('.cta-ctaButton--blue'), 2 | btnDecrypt = document.querySelector('.cta__ctaButton--grey'), 3 | btnCopy = document.querySelector('.cta-ctaButton-desative'), 4 | text = document.querySelector('textarea'), 5 | divResult = document.querySelector('.result'), 6 | textarea = document.querySelector('textarea'), 7 | para = document.querySelector('.result__paragraph'), 8 | error = document.querySelector('.cta_ctaInfowrapper'); 9 | (regexUppercase = new RegExp(/[A-Z]/g)), 10 | (regexAccents = new RegExp(/[áéíóúñ]/gi)); 11 | let textResult, str; 12 | 13 | const KEYS_ENCRYPT = { 14 | e: 'enter', 15 | i: 'imes', 16 | a: 'ai', 17 | o: 'ober', 18 | u: 'ufat', 19 | }; 20 | 21 | const KEYS_REVERSEENCRYPT = { 22 | enter: 'e', 23 | imes: 'i', 24 | ai: 'a', 25 | ober: 'o', 26 | ufat: 'u', 27 | }; 28 | 29 | const isUpperCaseOrIsAccent = (text) => { 30 | return text.match(regexAccents) || text.match(regexUppercase); 31 | }; 32 | 33 | const toEncrypt = (text) => { 34 | const rgx_keys_encrypt = new RegExp(/[eiou]/gi); 35 | return text.replace(rgx_keys_encrypt, (word) => KEYS_ENCRYPT[word]); 36 | }; 37 | 38 | const toReverseEncrypt = (text) => { 39 | const rgx_keys_reverseEncrypt = new RegExp(/enter|imes|ai|ober|ufat/gi); 40 | return text.replace( 41 | rgx_keys_reverseEncrypt, 42 | (word) => KEYS_REVERSEENCRYPT[word] 43 | ); 44 | }; 45 | 46 | function animate() { 47 | let running = setTimeout(animate, 145); 48 | str.length > 0 ? (para.innerHTML += str.shift()) : clearTimeout(running); 49 | } 50 | 51 | const handleClick = (mode = 'encrypt') => { 52 | const text = textarea.value; 53 | let isCheck = isUpperCaseOrIsAccent(text); 54 | if (isCheck !== null || text.length === 0) { 55 | error.classList.add('active'); 56 | } else { 57 | error.classList.remove('active'); 58 | textResult = mode === 'decrypt' ? toReverseEncrypt(text) : toEncrypt(text); 59 | para.innerHTML = ''; 60 | str = textResult.split(''); 61 | divResult.classList.add('active'); 62 | animate(); 63 | } 64 | }; 65 | 66 | const handleCopy = () => { 67 | navigator.clipboard.writeText(textResult); 68 | btnCopy.classList.add('copy'); 69 | setTimeout(() => btnCopy.classList.remove('copy'), 2000); 70 | }; 71 | 72 | const isEmpty = (event) => { 73 | const value = event.target.value; 74 | if (value.length === 0) { 75 | divResult.classList.remove('active'); 76 | para.innerHTML = ''; 77 | } 78 | }; 79 | 80 | textarea.addEventListener('input', isEmpty); 81 | btnEncrypt.addEventListener('click', handleClick); 82 | btnDecrypt.addEventListener('click', () => handleClick('decrypt')); 83 | btnCopy.addEventListener('click', handleCopy); 84 | --------------------------------------------------------------------------------