├── README.md
├── Images
    ├── Muñeco.png
    ├── icon.png
    └── exclamacion.png
├── style
    ├── _variables.scss
    ├── style.css.map
    ├── style.scss
    └── style.css
├── style.css
├── encrypter.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaime-IgnacioDev/Challenge-Oracle-ONE1/HEAD/README.md


--------------------------------------------------------------------------------
/Images/Muñeco.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaime-IgnacioDev/Challenge-Oracle-ONE1/HEAD/Images/Muñeco.png


--------------------------------------------------------------------------------
/Images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaime-IgnacioDev/Challenge-Oracle-ONE1/HEAD/Images/icon.png


--------------------------------------------------------------------------------
/Images/exclamacion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jaime-IgnacioDev/Challenge-Oracle-ONE1/HEAD/Images/exclamacion.png


--------------------------------------------------------------------------------
/style/_variables.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
2 | $Font: 'Inter', sans-serif;
3 | $ColorPrimario: #0A3871;
4 | $ColorSecundario: #fff;


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: sans-serif;
 3 | }
 4 | form {
 5 |   max-width: 500px;
 6 |   margin: 0 auto;
 7 |   text-align: center;
 8 | }
 9 | textarea {
10 |   width: 100%;
11 |   height: 200px;
12 |   margin-bottom: 20px;
13 |   font-size: 16px;
14 |   resize: none;
15 | }
16 | .button-container {
17 |   display: flex;
18 |   justify-content: space-between;
19 | }
20 | button {
21 |   padding: 10px 20px;
22 |   font-size: 16px;
23 |   border-radius: 5px;
24 |   background-color: #4CAF50;
25 |   color: white;
26 |   border: none;
27 |   cursor: pointer;
28 | }
29 | button:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | h1 {
34 |     text-align: center;
35 | }
36 | .subtittle_1 {
37 |     text-align: center;
38 | }
39 | 


--------------------------------------------------------------------------------
/style/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["_variables.scss","style.scss","style.css"],"names":[],"mappings":"AAAQ,2FAAA;ACER;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACAF;;ADGA;EACE,eAAA;EACA,gCDTK;AESP;;ADIE;EACE,2BAAA;ACDJ;ADGE;EACE;IACE,2BAAA;ECDJ;AACF;;ADME;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACHJ;ADII;EACE,WAAA;EACA,mBAAA;EAEA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACHN;ADME;EACE,WAAA;ACJJ;ADME;EACE,UAAA;EACA,cAAA;EACA,eAAA;EACA,aAAA;EACA,iBAAA;EACA,iBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;EACA,gCDxDG;ECyDH,cDxDY;ECyDZ,gBAAA;ACJJ;ADMI;EACE,cD5DU;EC6DV,iBAAA;EACA,mBAAA;EAEA,gBAAA;ACLN;ADAI;EACE,cD5DU;EC6DV,iBAAA;EACA,mBAAA;EAEA,gBAAA;ACLN;ADAI;EACE,cD5DU;EC6DV,iBAAA;EACA,mBAAA;EAEA,gBAAA;ACLN;ADOI;EACE,yBAAA;ACLN;ADQE;EACE,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EAEA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,QAAA;ACPJ;ADSE;EACE,UAAA;EACA,aAAA;EAEA,yBAAA;EACA,mBAAA;EACA,sBDvFc;ECwFd,gBAAA;EACA,eAAA;ACRJ;ADSI;EACE,mBD5FU;EC6FV,WD5FY;AEqFlB;ADQM;EACE,gBD9FU;EC+FV,cDhGQ;AE0FhB;ADSI;EACE,mBDpGU;ECqGV,WDpGY;AE6FlB;ADUE;EACE,WAAA;EAEA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACTJ;ADWE;EACE,aAAA;ACTJ;ADWE;EACE,mBAAA;ACTJ;ADWE;EACE,mBAAA;ACTJ;ADWE;EAEI;IACE,mBAAA;IACA,eAAA;ECVN;EDaE;IACE,eAAA;ECXJ;AACF;ADaE;EACE;IACE,mBAAA;ECXJ;EDaE;IACE,UAAA;ECXJ;EDaE;IACE,cAAA;ECXJ;AACF","file":"style.css"}


--------------------------------------------------------------------------------
/encrypter.js:
--------------------------------------------------------------------------------
 1 | const encryptButton = document.getElementById("encrypt-button");
 2 | const decryptButton = document.getElementById("decrypt-button");
 3 | const copyButton = document.getElementById("copy-button");
 4 | const inputText = document.getElementById("input-text");
 5 | const result = document.getElementById("result");
 6 | 
 7 | const encryptionKey = {
 8 |   "e": "enter",
 9 |   "i": "imes",
10 |   "a": "ai",
11 |   "o": "ober",
12 |   "u": "ufat"
13 | };
14 | 
15 | const decryptKey = {
16 |   "enter": "e",
17 |   "imes": "i",
18 |   "ai": "a",
19 |   "ober": "o",
20 |   "ufat": "u"
21 | };
22 | 
23 | function encrypt(text) {
24 |   let encryptedText = "";
25 |   for (let i = 0; i < text.length; i++) {
26 |     const letter = text[i];
27 |     if (letter in encryptionKey) {
28 |       encryptedText += encryptionKey[letter];
29 |     } else {
30 |       encryptedText += letter;
31 |     }
32 |   }
33 |   return encryptedText;
34 | }
35 | 
36 | function decrypt(text) {
37 |   let decryptedText = "";
38 |   let currentWord = "";
39 |   for (let i = 0; i < text.length; i++) {
40 |     const letter = text[i];
41 |     if (letter in decryptKey) {
42 |       currentWord += letter;
43 |     } else {
44 |       if (currentWord in decryptKey) {
45 |         decryptedText += decryptKey[
46 |             currentWord];
47 |       } else {
48 |         decryptedText += currentWord;
49 |       }
50 |       currentWord = "";
51 |       decryptedText += letter;
52 |     }
53 |   }
54 |   if (currentWord in decryptKey) {
55 |     decryptedText += decryptKey[currentWord];
56 |   } else {
57 |     decryptedText += currentWord;
58 |   }
59 |   return decryptedText;
60 | }
61 | 
62 | encryptButton.addEventListener("click", function() {
63 |   const input = inputText.value;
64 |   result.textContent = encrypt(input);
65 | });
66 | 
67 | decryptButton.addEventListener("click", function() {
68 |   const input = inputText.value;
69 |   result.textContent = decrypt(input);
70 | });
71 | 
72 | copyButton.addEventListener("click", function() {
73 |   const input = inputText.value;
74 |   const encryptedInput = encrypt(input);
75 |   navigator.clipboard.writeText(encryptedInput);
76 | });
77 | 
78 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" type="text/css" href="./style/style.css" />
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css"
11 |     />
12 |     <title>Encriptador/Desencriptador</title>
13 |   </head>
14 | 
15 |   <body>
16 |     <main>
17 |       <header class="header__contenedor">
18 |         <h1>
19 |           <img class="header__logo" src="./Images/icon.png" alt="icono" />
20 |         </h1>
21 |       </header>
22 | 
23 |       <section class="encriptador__contenedor">
24 |         <div class="encriptador__textos">
25 |           <textarea
26 |             class="encriptador__text-area"
27 |             name=""
28 |             id="input-text"
29 |             placeholder="Ingrese el texto aqui"
30 |           ></textarea>
31 | 
32 |           <p class="encriptador__requerimientos">
33 |             <img src="./Images/exclamacion.png" alt="icono exclamacion" /> Solo
34 |             letras minúsculas y sin acentos
35 |           </p>
36 | 
37 |           <div class="encriptador__contenedor-botones">
38 |             <button class="encriptador__boton" id="encrypt-button">
39 |               Encriptar
40 |             </button>
41 |             <button class="encriptador__boton" id="decrypt-button">
42 |               Desencriptar
43 |             </button>
44 |           </div>
45 |         </div>
46 | 
47 |         <div class="encriptador__resultados">
48 |           <img class="encriptador__secundario" src="./Images/Muñeco.png" alt="logo secundario">
49 |           <p class="encriptador__resultado">Resultado:</p>
50 |           <p class="encriptador__texto-encriptado" id="result"></p>
51 | 
52 |           <button class="encriptador__boton" id="copy-button">
53 |             Copiar texto encriptado
54 |           </button>
55 |         </div>
56 |       </section>
57 |     </main>
58 | 
59 |     <script src="encrypter.js"></script>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/style/style.scss:
--------------------------------------------------------------------------------
  1 | @import './variables';
  2 | 
  3 | * {
  4 |   padding: 0;
  5 |   margin: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | body{
 10 |   font-size: 18px;
 11 |   font-family: $Font;
 12 | }
 13 | 
 14 | .header{
 15 |   &__contenedor{
 16 |     margin: 20px 15px 50px 15px;
 17 |   }
 18 |   @media (min-width: 1024px){
 19 |     &__contenedor{
 20 |       margin: 30px 15px 50px 30px;
 21 |     }
 22 |   }
 23 | }
 24 | 
 25 | .encriptador{
 26 |   &__contenedor{
 27 |     display: flex;
 28 |     flex-direction: column;
 29 |     align-items: center;
 30 |     justify-content: center;
 31 |     &-botones{
 32 |       width: 100%;
 33 |       margin-bottom: 15px;
 34 | 
 35 |       display: flex;
 36 |       flex-direction: column;
 37 |       align-items: center;
 38 |       justify-content: center;
 39 |       gap: 15px;
 40 |     }
 41 |   }
 42 |   &__textos{
 43 |     width: 100%;
 44 |   }
 45 |   &__text-area{
 46 |     width: 95%;
 47 |     min-width: 95%;
 48 |     max-width: 100%;
 49 |     height: 250px;
 50 |     max-height: 300px;
 51 |     min-height: 250px;
 52 |     display: flex;
 53 |     align-items: flex-start;
 54 |     margin-bottom: 5px;
 55 |     border: none;
 56 |     font-size: 1.2em;
 57 |     font-weight: 400;
 58 |     font-family: $Font;
 59 |     color: $ColorPrimario;
 60 |     padding: 5px 5px;
 61 | 
 62 |     &::placeholder{
 63 |       color: $ColorPrimario;
 64 |       text-align: start;
 65 |       letter-spacing: 2px;
 66 | 
 67 |       font-weight: 500;
 68 |     }
 69 |     &:focus{
 70 |       border: 1px solid $ColorPrimario;
 71 |     }
 72 |   }
 73 |   &__requerimientos{
 74 |     width: 100%;
 75 |     margin-bottom: 15px;
 76 |     margin-left: 5px;
 77 |     opacity: .8;
 78 |     font-size: .78em;
 79 | 
 80 |     display: flex;
 81 |     justify-content: start;
 82 |     align-items: center;
 83 |     gap: 8px;
 84 |   }
 85 |   &__boton{
 86 |     width: 90%;
 87 |     padding: 13px;
 88 | 
 89 |     border: 1px solid $ColorPrimario;
 90 |     border-radius: 10px;
 91 |     background-color: $ColorSecundario;
 92 |     font-weight: 500;
 93 |     cursor: pointer;
 94 |     &:first-child{
 95 |       background: $ColorPrimario;
 96 |       color: $ColorSecundario;
 97 |       &:hover{
 98 |         background: $ColorSecundario;
 99 |         color: $ColorPrimario;
100 |       }
101 |     }
102 |     &:hover{
103 |       background: $ColorPrimario;
104 |       color: $ColorSecundario;
105 |     }
106 |   }
107 |   &__resultados{
108 |     width: 100%;
109 | 
110 |     display: flex;
111 |     flex-direction: column;
112 |     align-items: center;
113 |     justify-content: center;
114 |   }
115 |   &__secundario{
116 |     display: none;
117 |   }
118 |   &__resultado{
119 |     margin-bottom: 20px;
120 |   }
121 |   &__texto-encriptado{
122 |     margin-bottom: 20px;
123 |   }
124 |   @media (min-width: 768px){
125 |     &__contenedor{
126 |       &-botones{
127 |         flex-direction: row;
128 |         padding: 0 20px;
129 |       }
130 |     }
131 |     &__textos{
132 |       padding: 0 10px;
133 |     }
134 |   }
135 |   @media (min-width: 1024px){
136 |     &__contenedor{
137 |       flex-direction: row;
138 |     }
139 |     &__resultados{
140 |       width: 55%;
141 |     }
142 |     &__secundario{
143 |       display: block;
144 |     }
145 |   }
146 | }


--------------------------------------------------------------------------------
/style/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
  2 | * {
  3 |   padding: 0;
  4 |   margin: 0;
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | body {
  9 |   font-size: 18px;
 10 |   font-family: "Inter", sans-serif;
 11 | }
 12 | 
 13 | .header__contenedor {
 14 |   margin: 20px 15px 50px 15px;
 15 | }
 16 | @media (min-width: 1024px) {
 17 |   .header__contenedor {
 18 |     margin: 30px 15px 50px 30px;
 19 |   }
 20 | }
 21 | 
 22 | .encriptador__contenedor {
 23 |   display: flex;
 24 |   flex-direction: column;
 25 |   align-items: center;
 26 |   justify-content: center;
 27 | }
 28 | .encriptador__contenedor-botones {
 29 |   width: 100%;
 30 |   margin-bottom: 15px;
 31 |   display: flex;
 32 |   flex-direction: column;
 33 |   align-items: center;
 34 |   justify-content: center;
 35 |   gap: 15px;
 36 | }
 37 | .encriptador__textos {
 38 |   width: 100%;
 39 | }
 40 | .encriptador__text-area {
 41 |   width: 95%;
 42 |   min-width: 95%;
 43 |   max-width: 100%;
 44 |   height: 250px;
 45 |   max-height: 300px;
 46 |   min-height: 250px;
 47 |   display: flex;
 48 |   align-items: flex-start;
 49 |   margin-bottom: 5px;
 50 |   border: none;
 51 |   font-size: 1.2em;
 52 |   font-weight: 400;
 53 |   font-family: "Inter", sans-serif;
 54 |   color: #0A3871;
 55 |   padding: 5px 5px;
 56 | }
 57 | .encriptador__text-area::-moz-placeholder {
 58 |   color: #0A3871;
 59 |   text-align: start;
 60 |   letter-spacing: 2px;
 61 |   font-weight: 500;
 62 | }
 63 | .encriptador__text-area:-ms-input-placeholder {
 64 |   color: #0A3871;
 65 |   text-align: start;
 66 |   letter-spacing: 2px;
 67 |   font-weight: 500;
 68 | }
 69 | .encriptador__text-area::placeholder {
 70 |   color: #0A3871;
 71 |   text-align: start;
 72 |   letter-spacing: 2px;
 73 |   font-weight: 500;
 74 | }
 75 | .encriptador__text-area:focus {
 76 |   border: 1px solid #0A3871;
 77 | }
 78 | .encriptador__requerimientos {
 79 |   width: 100%;
 80 |   margin-bottom: 15px;
 81 |   margin-left: 5px;
 82 |   opacity: 0.8;
 83 |   font-size: 0.78em;
 84 |   display: flex;
 85 |   justify-content: start;
 86 |   align-items: center;
 87 |   gap: 8px;
 88 | }
 89 | .encriptador__boton {
 90 |   width: 90%;
 91 |   padding: 13px;
 92 |   border: 1px solid #0A3871;
 93 |   border-radius: 10px;
 94 |   background-color: #fff;
 95 |   font-weight: 500;
 96 |   cursor: pointer;
 97 | }
 98 | .encriptador__boton:first-child {
 99 |   background: #0A3871;
100 |   color: #fff;
101 | }
102 | .encriptador__boton:first-child:hover {
103 |   background: #fff;
104 |   color: #0A3871;
105 | }
106 | .encriptador__boton:hover {
107 |   background: #0A3871;
108 |   color: #fff;
109 | }
110 | .encriptador__resultados {
111 |   width: 100%;
112 |   display: flex;
113 |   flex-direction: column;
114 |   align-items: center;
115 |   justify-content: center;
116 | }
117 | .encriptador__secundario {
118 |   display: none;
119 | }
120 | .encriptador__resultado {
121 |   margin-bottom: 20px;
122 | }
123 | .encriptador__texto-encriptado {
124 |   margin-bottom: 20px;
125 | }
126 | @media (min-width: 768px) {
127 |   .encriptador__contenedor-botones {
128 |     flex-direction: row;
129 |     padding: 0 20px;
130 |   }
131 |   .encriptador__textos {
132 |     padding: 0 10px;
133 |   }
134 | }
135 | @media (min-width: 1024px) {
136 |   .encriptador__contenedor {
137 |     flex-direction: row;
138 |   }
139 |   .encriptador__resultados {
140 |     width: 55%;
141 |   }
142 |   .encriptador__secundario {
143 |     display: block;
144 |   }
145 | }/*# sourceMappingURL=style.css.map */


--------------------------------------------------------------------------------