Laboratoria · ArelyGutierrez · Jul 13, 2022 · Jul 13, 2022 · Jul 14, 2022 · Jul 14, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,8 @@
   },
   "engines": {
     "node": ">=14.x"
-  }
+  },
+  "type": "module"
+
 }
 
diff --git a/src/Decipher.html b/src/Decipher.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Caesar Cipher</title>
+  <link rel="stylesheet" href="style.css" />
+
+
+
+</head>
+
+<body>
+  <div id="root">
+  </div>
+
+  <header>
+    <h1 id="introduction2"> Decifrando un texto 🔑🔓📜</h1>
+  </header>
+  <main>
+    <form id="decipherhtmlmain">
+      <label>Pon aquí tu mensaje a <strong>descifrar</strong> </label> 
+      <textarea name="MessageToCipher" id="message" rows="4" placeholder="Escribe aquí tu texto a descifrar"></textarea>
+      <br>
+      <div>
+        <label>Número secreto (llave) para descifrar: </label>
+        <input type="number" id="offsetID" name="offset" maxlength="2" placeholder="--">
+        <button type="submit" value="Submit" id="cipherFunction2" class="pointer">Descifrar</button>
+      </div>
+      <div id="result"><p id="decipherText"></p></div>
+
+      <menu>
+        <button id="returnWelcome"><a href="index.html">Inicio</a></button>
+      </menu>
+    </form>
+
+  </main>
+
+  <!-- <form id="decipherhtmlmain">
+    <label>Pon aquí tu mensaje a <strong>descifrar</strong> </label> <br>
+    <textarea name="MessageToDecipher" id="message" rows="10" cols="50"
+      placeholder="Escribe aquí tu texto a descifrar"></textarea> <br>
+    <br>
+    <label>Número secreto (llave) para descifrar: </label>
+    <input type="number" id="offsetID" name="offset" maxlength="2">
+    <button type="submit" value="Submit" id="cipherFunction2" class="pointer">Descifrar</button>
+
+    <p id="decipherText"></p>
+    <menu>
+      <button id="returnWelcome"><a href="index.html">Inicio</a></button>
+    </menu>
+  </form> -->
+
+
+
+
+  <footer id="cipherFooter">
+    <p>Elaborado por Arely Gutiérrez, estudiante de Laboratoria</p>
+  </footer>
+
+
+
+  <script src="index.js" type="module"></script>
+
+</body>
+
+</html>
diff --git a/src/READMe.md b/src/READMe.md
@@ -0,0 +1,47 @@
+# Cifrado César
+
+## Índice
+
+* [1. Objetivo de esta página](#1-Objetivos-de-esta-página)
+* [2. Proceso y decisiones de diseño](#2-Proceso-y-decisiones-de-diseño)
+* [3. Cómo ayuda está página a los usuarios](#3-Cómo-ayuda-está-página-a-los-usuarios)
+* [4. Cómo ejecutar la aplicación](#4-Cómo-ejecutar-la-aplicación)
+
+
+***
+
+## 1. Objetivo de esta página.
+
+Logra mantener contacto con tu persona favorita mediante mensajes que sólo ustedes puedan cifrar/descifrar con un número secreto. 
+Te ha pasado que siempre que hay "moros en la costa", que revisan tus dispositivos móviles, computadoras o tablets. 
+Imaginate que puedes enviar mensajes sin temor a que si prestas tu teléfo, dejas activa tu cuenta de mensajeria o tu computadora, 
+no serán expuestas tus conversaciones, ya que no tendrán sintaxis ni coherencia esos mensajes, quizá los intrusos piensen que estas 
+un poco loc@ o quizá que hablas idioma alienigena (muy actual y moderno por cierto) pero no será así, estarán cifradas, 
+y sólo tu persona especial y tú tendrán la llave, ese número secreto que puede ser por ejemplo: de el día que se conocieron o el día de su cumpleaños, el número de la suerte, la suma de las letras que componen el nombre de ambos, en fin ese número que los identifica y que sólo ustedes conocen.
+Ten cuidado de no revelar tu llave (número secreto) para que tus mensajes esten a salvo y no demos pistas a esos intrusos de averiguar. 🕵️‍♂️
+
+![caeser-cipher]("image/mensaje.gif")
+
+## 2. Proceso y decisiones de diseño
+
+El concepto de está página se baso, en mensajería entre amigos, parejas, hermanos que son vigilados y no tienen privacidad,
+es por eso que el diseño de la página tiene un diseño fuera de lo tradicional como corazones tonos pasteles por citar unos ejemplos.
+
+Consta de 3 archivos html, implica que son 3 vistas: página principal que describe de que va la página y eliges la opción que de cifrar o descifrar, página de cifrar donde 2 datos importantes uno de ellos es el texto a cifrar y en el recuadro siguiente tu llave secreta (offset) que indica los números a desplazarse, similar a esta página esta la tercera y última que solo cambia que ingresas el texto descifrado, la llave secreta es la misma que ingresas en cifrar y al presionar el botón de cifrar o descifrar te muestra el texto correspondiente en cada una de ellas, adicional del botón de cifrar o descifrar esta el botón de inicio
+para que el usurio se pueda regresar a la página de inicio.
+
+
+* Boceto en papel del diseño de la página.
+* Boceto en figma del diseño de la página.
+![webpace-design]("https://www.figma.com/file/gGdeqVZE3gaQJqdYJF3r3q/Ceasar-cipher?node-id=4%3A34")
+* Elaboracion de código 
+
+Al final de la elaboración de este proyecto se consiguió que el cifrado se pueda realizar con letras mayúsculas y minúsculas, cabe recalcar que otro tipo de texto como espacio, signos de puntuación, números y la letra  Ñ y ñ no cambian en el proceso del cifrado o descifrado del texto.
+
+## 3. Como ayuda está página a los usuarios
+
+Está página ayuda a los usuarios a mantener privacidad en sus conversaciones, al poder copiar y pegar los mensajes cifrados y enviarlos por su mensajería instantanea preferida, evita que aquellos intrusos o personas no deseadas que revisan los dispositivos del usuario no logren comprender estos mensajes ya que no tendran sentido o coherencia los textos, y aún encontrada está página para tratar de descifrarlos tendrá que saber la llave especifica que lo descifra.
+
+## 4. Cómo ejecutar la aplicación
+
+Desde el editor de código fuente Visual Studio Code se ejecuta el programa mediante alguana terminal como git bash, power shell escribiendo los comandos `npm start` al ejecutarse arroja una url que se abre copiando y pegando en el navegador o bien con el boton `ctrl` + `click` sobre este link para detener el funcionalidad del código basta con teclear `ctrl` + `c` sobre cualquier parte de la terminal.
diff --git a/src/cipher.html b/src/cipher.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Caesar Cipher</title>
+  <link rel="stylesheet" href="style.css" />
+
+
+
+</head>
+
+<body>
+  <link rel="stylesheet" href="../css/styles.css">
+  <div id="root">
+  </div>
+
+  <header>
+    <h1 id="introduction2">📜🔑🔐Cifrando un texto</h1>
+  </header>
+  <!-- ingreso de datos --> <!-- ingreso de datos -->
+
+  <main>
+    <form id="cipherForm">
+      <label>Pon aquí tu mensaje a <strong>cifrar</strong> </label> 
+      <textarea name="MessageToCipher" id="message" rows="4" placeholder="Escribe aquí tu texto a cifrar"></textarea>
+      <br>
+      <div>
+        <label>Número secreto (llave) para cifrar: </label>
+        <input type="number" id="offsetID" name="offset" maxlength="2" placeholder="--">
+        <button type="submit" value="Submit" id="cipherFunction" class="pointer"> Cifrar </button>
+      </div>
+      <!-- <label>El mensaje cifrado: </label> -->
+      <div id="result"><p id="cipherText"></p></div>
+
+      <menu>
+        <button id="returnWelcome"><a href="index.html">Inicio</a></button>
+      </menu>
+    </form>
+
+  </main>
+  <!-- <form id="cipherhtmlmain">
+    <label>Pon aquí tu mensaje a <strong>cifrar</strong> </label> <br>
+    <textarea name="MessageToCipher" id="message" rows="10" cols="50"
+      placeholder="Escribe aquí tu texto a cifrar"></textarea> <br>
+    <br>
+    <label>Número secreto (llave) para cifrar: </label>
+    <input type="number" id="offsetID" name="offset" maxlength="2">
+    <button type="submit" value="Submit" id="cipherFunction" class="pointer">Cifrar</button>
+    <p id="cipherText"></p>
+  </form> -->
+
+
+
+  <footer id="cipherFooter">
+    <p>Elaborado por Arely Gutiérrez, estudiante de Laboratoria</p>
+  </footer>
+
+
+
+  <script src="index.js" type="module"></script>
+
+
+</body>
+
+</html>
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,66 @@
+
+
 const cipher = {
-  // ...
+
+  encode: function (offset, string) {
+
+    if(offset=="") throw (TypeError("Se te olvido ingresar el offset"));
+    if(offset<=0) throw (TypeError("Se te olvido ingresar el offset"));
+
+    let result = ''; //acá se acumularan los resultados de las operaciones de cada caracter
+
+
+    for (let i = 0; i < string.length; i++) {
+      const character = string.charCodeAt(i); // de cadena a numero ascii  
+
+      if (65 <= character && character <= 90) {   //letras mayúsculas
+        const newCharacter = String.fromCharCode((character - 65 + offset) % 26 + 65);
+        result += newCharacter;
+      } else if (97 <= character && character <= 122) {  //letras minúsculas
+        const newCharacter = String.fromCharCode((character - 97 + offset) % 26 + 97);
+        result += newCharacter;
+      } else {                                    // otros caracteres que no sean letras las deja igual
+        result += String.fromCharCode(character);//considerando cualquier otro caracter que no sea letra
+      }
+    }
+    return result;
+
+  },
+  //////////////////////////////////////////////////////////////////
+  decode: function (offset, string) {
+
+    if(offset=="") throw (TypeError("Se te olvido ingresar el offset"));
+    if(offset<=0) throw (TypeError("Se te olvido ingresar el offset"));
+
+    let result = '';
+    offset = 26 - (offset % 26); //offset es ahora el "complemento del modulo" si offset es 7 por ejemplo ahora sera 27-7=19
+
+
+    for (let i = 0; i < string.length; i++) {
+      const character = string.charCodeAt(i); // de cadena a número ascii
+
+      if (65 <= character && character <= 90) {   //letras mayúsculas
+        const newCharacter = String.fromCharCode((character - 65 + offset) % 26 + 65);
+        result += newCharacter;
+      } else if (97 <= character && character <= 122) {  //letras minúsculas
+        const newCharacter = String.fromCharCode((character - 97 + offset) % 26 + 97);
+        result += newCharacter;
+      } else {                                    // otros caracteres que no sean letras las deja igual
+        result += String.fromCharCode(character);//considerando cualquier otro caracter que no sea letra
+      }
+    }
+    return result;
+  }
 };
 
+
+//console.log(cipher.encode(33, "ABCDEFGHIJKLMNOPQRSTUVWXYZ"));//"HIJKLMNOPQRSTUVWXYZABCDEFG"
+//console.log(cipher.decode(33, "HIJKLMNOPQRSTUVWXYZABCDEFG"));//"ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+//console.log(cipher.encode(33, "HOLA MUNDO"));//"HIJKLMNOPQRSTUVWXYZABCDEFG"
+//console.log(cipher.decode(33, "OVSH TBUKV"));//"ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+//console.log(cipher.decode(27, "A B C . +"));//"ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+
 export default cipher;
+////////////////////////
+
+
diff --git a/src/image/_102522256_gettyimages-915391614.jpg b/src/image/_102522256_gettyimages-915391614.jpg
diff --git a/src/image/cesarCipher.png b/src/image/cesarCipher.png
diff --git a/src/image/fondoPostales.jpg b/src/image/fondoPostales.jpg
diff --git a/src/image/mensaje.gif b/src/image/mensaje.gif
diff --git a/src/image/message.png b/src/image/message.png
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,57 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Caesar Cipher</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root">
-      <h1>Hello world!</h1>
-    </div>
-    <script src="index.js" type="module"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Caesar Cipher</title>
+  <link rel="stylesheet" href="style.css" />
+
+
+
+</head>
+
+<body>
+  <div id="root">
+  </div>
+
+  <header>
+    <h1 id="title1">Mensajería secreta para parejas</h1>
+  </header>
+
+  <main id="welcomeMain">
+    <section id="topSection">
+      <p id="introduction">Logra mantener contacto con tu persona favorita con mensajes que sólo ustedes puedan
+        cifrar/descifrar con un número secreto
+      </p>
+    </section>
+
+    <section id="centerSection">
+      <img id="cipherImage" src="./image/cesarCipher.png" alt="cesarCipher">
+      <h2 id="question">¿Qué deseas hacer?</h2>
+      <img id="guysImage" src="./image/message.png" alt="message">
+    </section>
+
+    <section id="bottomSection">
+      <!-- elemento lista dentro de un menu  -->
+      <menu id="cipherMenu">
+        <button id="cipherButton"><a href="cipher.html">Cifrar</a></button>
+        <button id="decipherButton"><a href="Decipher.html"> Descifrar</a></button>
+      </menu>
+
+    </section>
+
+  </main>
+
+  <footer id="cipherFooter">
+    <p>Elaborado por Arely Gutiérrez, estudiante de Laboratoria</p>
+  </footer>
+
+
+
+
+
+  <script src="index.js" type="module"></script>
+
+</body>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,55 @@
 import cipher from './cipher.js';
 
-console.log(cipher);
+// const variable que no se reasigna o /// let variable que se vuelve a reasignar 
+let getCipherText = document.getElementById("cipherFunction"); //id está en el  botón cifrar
+let string = document.getElementById("message");// id está en el texto de entrada
+let offset = document.getElementById("offsetID");
+
+let getCipherText2 = document.getElementById("cipherFunction2"); //id está en botón descifrar
+//let string2 = document.getElementById("message2"); // id está en el texto de entrada
+//let offset2 = document.getElementById("offsetID2");// id enté en el dato que ingresa offset
+
+if (getCipherText === null) {
+    //hacemos lo que se requiera en caso de que la variable contenga null
+    //si getChipherText es null, es porque NO estamos en cifrar sino en DESCIFRAR  
+    getCipherText2.addEventListener("click", function (event) {
+
+        if (offset === null || string === " ") {
+            alert(" 😱 Falta ingresar algún dato, por favor asegurate de llenar ambos 📑🖋 😊");
+            event.preventDefault(); // Previene recarga del navegador
+            document.getElementById("decipherText").innerHTML = "Llena todos datos correctamente 📝 y presiona el botón cifrar de nuevo 📥";
+
+        } else if (document.getElementById("offsetID").value < 0 || document.getElementById("offsetID").value == 0) {
+            alert(" 😱 Por favor introduce un número positivo mayor a cero ➕ 😊");
+            event.preventDefault(); // Previene recarga del navegador
+            document.getElementById("decipherText").innerHTML = "Llena todos datos correctamente 📝 y presiona el botón cifrar de nuevo 📥";
+        } else {                    //ejecuta los metodos en cipher.js  
+            event.preventDefault(); // Previene recarga del navegador 
+            document.getElementById("decipherText").innerHTML = "Tu mensaje cifrado es: <br/><br/> " + cipher.decode(Number(offset.value), string.value);
+        }
+    });
+} else if (getCipherText2 === null) {         //estamos en CIFRAR
+
+    getCipherText.addEventListener("click", function (event) {
+
+        if (offset === null || string === "") {
+            alert(" 😱 Falta ingresar algún dato, por favor asegurate de llenar ambos 📑🖋 😊");
+            document.getElementById("cipherText").innerHTML = "Llena todos datos correctamente 📝 y presiona el botón cifrar de nuevo 📥";
+        } else if (document.getElementById("offsetID").value < 0 || document.getElementById("offsetID").value == 0) {
+            alert(" 😱 Por favor introduce un número positivo mayor a cero ➕ 😊");
+            document.getElementById("cipherText").innerHTML = "Llena todos datos correctamente 📝 y presiona el botón cifrar de nuevo 📥";
+        } else {
+            event.preventDefault(); // Previene recarga del navegador
+            document.getElementById("cipherText").innerHTML = "Tu mensaje cifrado es: <br/><br/> " + cipher.encode(Number(offset.value), string.value);
+        }
+    });
+}
+
+
+
+
+
+
+
+
+