RisellU · RisellU · Mar 14, 2023 · Mar 21, 2023 · Mar 21, 2023 · Mar 22, 2023
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,13 +15,20 @@
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^27.0.1",
-    "eslint": "^8.3.0",
+    "eslint": "^8.36.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-standard": "^5.0.0",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "opener": "^1.5.1",
-    "serve": "^13.0.2"
+    "serve": "^13.0.2",
+    "standard": "^17.0.0"
   },
   "engines": {
     "node": ">=16.x"
@@ -31,4 +38,4 @@
     "version": "5.6.0",
     "commit": "ffa75c8b2bede153844195479abeff01f3e34227"
   }
-}
+}
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,69 @@
+//crear funciones para hacer el cifrado
 const cipher = {
-  // ...
-};
 
-export default cipher;
+
+
+  encode: function(texto,desplazamiento){
+    let resultado = "";
+    const mayusculas = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const minusculas = "abcdefghijklmnopqrstuvwxyz";
+    let valueInt = parseFloat(desplazamiento);
+
+    if (valueInt % 1 === 0 && valueInt > 0){
+      valueInt = (valueInt % 26);
+      if (texto){
+        for (let i = 0; i<texto.length; i++){
+
+          if (mayusculas.indexOf(texto[i])!==-1){
+            const posicion = ((mayusculas.indexOf(texto[i])+valueInt)%26);
+            resultado += mayusculas[posicion];
+          }
+          else if (minusculas.indexOf(texto[i])!==-1){
+            const posicion = ((minusculas.indexOf(texto[i])+valueInt)%26);
+            resultado += minusculas[posicion];
+          } else {
+            resultado += texto[i];
+          }
+        }
+      }
+    } else{
+      throw new TypeError("Ingrese un número entero y una cadena")
+
+    }
+
+
+    return resultado;  
+  },
+
+  decode: function(texto, desplazamiento){
+    let resultado = "";
+    let valueInt = parseFloat(desplazamiento);
+    const mayusculas = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const minusculas = "abcdefghijklmnopqrstuvwxyz";
+
+    if (valueInt % 1 === 0 && valueInt > 0){
+      valueInt = (valueInt % 26);
+      if (texto){
+        for (let i = 0; i<texto.length; i++){
+
+          if (mayusculas.indexOf(texto[i])!==-1){
+            const posicion = (((mayusculas.indexOf(texto[i])-valueInt)+26)%26);
+            resultado += mayusculas[posicion];
+          }
+          else if (minusculas.indexOf(texto[i])!==-1){
+            const posicion = (((minusculas.indexOf(texto[i])-valueInt)+26)%26);
+            resultado += minusculas[posicion];
+          } else {
+            resultado += texto[i];
+          }
+        }
+      }
+    } else{
+      throw new TypeError("Ingrese un número y una cadena")
+
+    }
+    return resultado;   
+  }
+}
+export default cipher
+
diff --git a/src/img/logo.png b/src/img/logo.png
diff --git a/src/index.html b/src/index.html
@@ -5,10 +5,71 @@
     <title>Caesar Cipher</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+  <main>
   <body>
-    <div id="root">
-      <h1>Hello world!</h1>
+    <header>
+      <div class="logo">
+          <img src="img/logo.png" alt="logo: pergamino y pluma">
+        </div>
+        <nav>
+          <a href="#">Books</a>
+          <a href="#">Poetry</a>
+          <a href="#">History</a>
+          <a href="#">Signature</a>
+        </nav>
+    </header>
+    <div class="contenido">
+      <h1 class="title">Encrypt your favorite poem</h1>
+      <section>
+        <p class="poema">Poem</p>
+        <p class="poema1">Fire does not burn or consume
+
+            Fire neither burns nor consumes,
+          nor do the waves of the sea come and go in haste,
+          nor does the delicious, dry air, the ripe summer air, gently push white flakes of countless seeds
+          That float, moving gracefully, to fall where they may.
+          None of this, none of this surpasses my own blazing fire
+          that burns for the love of the one I love,
+          nor does anything come and go with more haste than I do.
+
+          Does the tide rush in seeking something without ever giving up? So do I.
+          Neither flakes nor perfumes nor high rain-laden clouds furrow the free air
+          as my soul furrows the free air floating
+          in all directions, love, in search of friendship, of you.
+          </p><p class="poema1">-Walt Whitman</p>
+          <p class="poema1">Crisis
+
+            Your voice seems from another time,
+          it no longer has that warm tone
+          of before, nor the complicity
+          of always, they are only words
+          and your affection is now discreet:
+          in your messages there is no more message.
+          </p><p class="poema1">-Francisco Gálvez</p>
+      </section>
+
+      <div class="bloque">
+
+        <div class="text1">
+          <textarea name="comentario" id="comentario" class="texto" rows="15" cols="50"></textarea>
+          <p class="parrafo">Number of spaces for your cipher</p>
+          <input class="resultado" type="number" id="desplazamiento"/><button class="resultado" id="cifrar" name="cifrar" type="buttom">encode</button>
+          <button class="resultado" id="descifrar" name="descifrar" type="buttom">decode</button>
+        </div>
+
+        <div class="text2">
+          <textarea id="comentario2" name="comentario2" class="texto" rows="15" cols="50"></textarea>
+        </div>
+
+      </div>
+      <footer>
+        <p>
+          <a href="#" target="_blank">Contact us</a>
+        </p>
+        <p class="address">123 Poem</p>
+      </footer>
+      <script src="index.js" type="module"></script>
     </div>
-    <script src="index.js" type="module"></script>
   </body>
+</main>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,17 @@
 import cipher from './cipher.js';
 
-console.log(cipher);
+
+
+document.getElementById("cifrar").addEventListener("click", function(){
+  const text = document.getElementById("comentario").value
+  const desplazamiento = document.getElementById("desplazamiento").value
+  document.getElementById("comentario2").value = cipher.encode(text, desplazamiento) 
+})
+
+document.getElementById("descifrar").addEventListener("click", function(){
+
+  const text = document.getElementById("comentario").value
+  const desplazamiento = document.getElementById("desplazamiento").value
+  document.getElementById("comentario2").value = cipher.decode(text, desplazamiento)
+})
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,123 @@
+
+html {
+    width: 50%;
+}
+header {
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 20px;
+    margin-top: -130px;
+}
+/*.wrapper {
+    width: 90%;
+    max-width: 1000px;
+    margin: auto;
+    overflow: hidden;
+}*/
+.logo {
+    margin-top: 100px;
+    float: left;
+}
+nav {
+    float:right;
+    line-height: 200px;
+    margin-top: 90px;
+    position: relative;
+
+ }
+ nav a {
+    display: inline-block;
+    color:#ffff;
+    padding: 10px 20px;
+    line-height: normal;
+    position: relative;
+    text-decoration: none;
+
+ }
+body {
+    background-image: url(https://img.freepik.com/foto-gratis/libro-biblioteca-libro-texto-abierto_1150-5923.jpg?w=900&t=st=1679679049~exp=1679679649~hmac=eba10e8bcd65ea644d8eb1984f51320fd7c266a547376cb08fbc06fb1a66db82);
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    margin: 50px;
+}
+.title {
+    font-family:"sans-serif";
+    font-style: oblique ;
+    color: #ffff;
+    font-size: 200%;
+    text-align: left;
+    position: relative;
+    top: 50px;
+    left: 132%;
+}
+.bloque {
+    flex-direction: column;
+    position: relative;
+    left: 115%;
+    margin: 50px;
+    top: -380px;
+    /*display: flex;
+    justify-content: right;*/
+}
+.text1 {
+    margin: 5px 60px;
+    color:#ffff;
+    font-family: "sans-serif";
+    font-style:oblique;
+}
+.text2 {
+    margin: 20px 60px;
+    color: aliceblue;
+    font-family: "gill sans", sans-serif;
+}
+.parrafo {
+    margin-bottom: 0px;
+    position: relative;
+    top: -15px;
+}
+.texto {
+    border-radius: 20px;
+}
+.poema {
+    font-size: xx-large;
+    font-family:"sans-serif";
+    font-style:oblique;
+    color: #ffff;
+    margin-bottom: auto;
+    position: relative;
+    top: -15px;
+    right: -10%;
+}
+.poema1 {
+    font-size:medium;
+    font-family:"sans-serif";
+    font-style:oblique, normal;
+    color: #ffff;
+    line-height: 115%;
+    text-align:left;
+    width: 30vw;
+    position: relative;
+    top: -10px;
+    right: -10%;
+}
+footer {
+    font-size: 20px;
+    /*background: black;*/
+    position: relative;
+    margin-bottom: 60px;
+    width: 100%;
+    left: 50%;
+    text-align: center;
+    top: -25px;
+}
+.address {
+    margin-bottom: 5px;
+    color: #ffff;
+}
+a:visited {
+    color: #ffff;
+}
+a:hover {
+    color: #733f00;
+}