Laboratoria · Karinna88 · May 12, 2021 · May 12, 2021 · May 12, 2021 · May 28, 2021
diff --git a/README.md b/README.md
@@ -1,3 +1,25 @@
+# Proceso y decisiones de diseño:
+Este proyecto es una aplicación de mensajes cifrados, en donde se invita a las usuarias a entablar comunicación a través de cifrar y descifrar mensajes, para ello se pensó en presentar la aplicación de una manera amistosa a través de una pantalla, en donde la usuaria pueda desenvolverse de manera intuitiva. Se orientó con un text area en donde se puede ingresar el mensaje y tres botones que puedan ir ayudando a la usuaria a tomar las decisiones para interactuar con la aplicación.
+
+# Usuarias:
+Las principales usuarias de la aplicación son personas que han estado distanciadas este último tiempo, y que necesitan comunicar un mensaje a una persona importante para ellas, un saludo, disculpa, mensaje amoroso, entre otras. La pandemia nos ha mantenido alejados de mucha gente que estimamos y esta aplicación nos ayuda a comunicarnos con ellos de una manera entretenida y novedosa para muchos como es el cifrado de mensajes.
+
+# Respuesta a sus necesidades:
+Mantener la comunicación con personas que estimamos y nos interesan, es fundamental para nuestro bienestar, poder expresar emociones, pensamientos, deseos,  a través de una aplicación de mensajes cifrados, podria ser una respuesta a esta necesidad, ya que ofrece la oportunidad de poder comunicar un mensaje que quizás no se atreven a decir por teléfono o un medio más convencional, de una forma entretenida y novedosa. 
+
+# Boceto inicial de la aplicación: 
+
+
+
+![Boceto](https://raw.githubusercontent.com/Karinna88/SCL017-cipher/main/assets/images/boceto.jpg
+)
+
+
+
+# Plan de acción:
+
+
+
 # Cifrado César
 
 ## Índice

diff --git a/assets/images/boceto.jpg b/assets/images/boceto.jpg
diff --git a/assets/images/fondo1.jpg b/assets/images/fondo1.jpg
diff --git a/assets/images/fondo2.jpg b/assets/images/fondo2.jpg
diff --git a/assets/images/logocarta.png b/assets/images/logocarta.png
diff --git a/assets/images/opcion1.jpg b/assets/images/opcion1.jpg
diff --git a/assets/images/opcion2.jpg b/assets/images/opcion2.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,51 @@
+const letras = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
 const cipher = {
-  // ...
+  encode: (desplazamiento, texto) => {
+    let resultado = "";
+    desplazamiento = ((desplazamiento % 26) + 26) % 26;
+
+    // con este for se va recorriendo cada una de las letras
+    if (texto) {
+      for (let i = 0; i < texto.length; i++) {
+        if (letras.indexOf(texto[i]) != -1) {
+          let posicion = (letras.indexOf(texto[i]) + desplazamiento) % 26;
+          resultado = resultado + letras[posicion];
+        } else {
+          resultado = resultado + texto[i];
+        }
+      }
+    }
+
+    return resultado;
+  },
+
+  decode: (desplazamiento, texto) => {
+    let resultado = "";
+
+    desplazamiento = ((desplazamiento % 26) + 26) % 26;
+
+    // Con este for se va recorriendo cada una de las letras, la busca en el diccionario y si existe le calcula la posicion.
+    // Si la letra no existe se deja pasar
+    if (texto) {
+      for (let i = 0; i < texto.length; i = i + 1) {
+        if (letras.indexOf(texto[i]) != -1) {
+          let posicion = (letras.indexOf(texto[i]) - desplazamiento) % 26;
+
+          //otra instruccción en caso de encontrar un negativo
+          if (posicion < 0) {
+            posicion = posicion + 26;
+          }
+
+          resultado = resultado + letras[posicion];
+        } else {
+          resultado = resultado + texto[i];
+        }
+      }
+    }
+
+    return resultado;
+  },
 };
 
 export default cipher;
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,105 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>Caesar Cipher</title>
+    <meta charset="utf-8" />
+    <title>Proyecto Cipher</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <!--Letra Cuerpo de la Pag.-->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,700&display=swap"
+      rel="stylesheet"/>
+    <!--Letra Nav-->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap"
+      rel="stylesheet"/>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <div id="root">
-      <h1>Hello world!</h1>
-    </div>
+    <!--Nav-->
+    <header class="navigation">
+      <nav>
+        <h1 class="navH1">Para ti ...</h1>
+        <img class="logo" src="../assets/images/logocarta.png" alt="logo" />
+      </nav>
+    </header>
+
+    <main class="contenedor">
+      <!--Bienvenida e Instrucciones al usuario-->
+      <section id="bloque1">
+        <section class="textos-main">
+          <h1 class="titulo">Todo lo que no te he dicho</h1>
+          <h2 class="subtitulo">(hasta ahora)</h2>
+          <h2 class="instructions">
+            <strong>
+              Ahora que no podemos vernos tanto como nos gustaría, es fácil
+              recordar todas esas cosas que no hemos dicho a esas personas
+              importantes ¿A quién no le has dicho lo suficiente? Este es el
+              momento de enviar ese mensaje que tenemos pendiente. Aprovecha el
+              cifrado para expresar lo que te has estado guardando... No olvides
+              compartir el link a esa persona importante, para que pueda
+              descifrar tu mensaje...</strong
+            >
+          </h2>
+        </section>
+
+        <!-- text area/ input offset-->
+        <section>
+          <div class="divMensajeOffset">
+            <div>
+              <h2 class="h2MensajePrincipal">Ingresa tu mensaje:</h2>
+              <p>
+                <textarea
+                  name="mensaje"
+                  id="mensaje"
+                  cols="80"
+                  rows="10"
+                ></textarea>
+              </p>
+            </div>
+            <div class="divMensajePrincipal">
+              <h2 class="h2OffSet">Ingresa un número para cifrar</h2>
+              <input class="offset" type="number" id="desplazamiento" />
+            </div>
+          </div>
+
+          <!--botones cifrar/ descifrar-->
+          <div class="divButton">
+            <p>
+              <button class="buttonCode" id="cifrar" type="button">
+                Cifrar
+              </button>
+              <button class="buttonDecode" id="descifrar" type="button">
+                Descifrar
+              </button>
+            </p>
+          </div>
+        </section>
+      </section>
+
+        <!--Text area con mensaje final-->
+
+        <section id="bloque2" style="display: none">
+          <div class="divMensajeResultado">
+            <h2 class="h2Mensajefinal">Tu mensaje es...</h2>
+            <p>
+              <textarea
+                name="mensajeResultado"
+                id="txtMensajeResultado"
+                cols="100"
+                rows="10"
+              ></textarea>
+            </p>
+            <p>
+              <button class="buttongoBack" id="goBack" type="button">
+                volver
+                </button>
+            </p>
+          </div>
+        </section>
+
+    </main>
+
     <script src="index.js" type="module"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,43 @@
-import cipher from './cipher.js';
+//Página con eventos del Dom
 
-console.log(cipher);
+import cipher from "./cipher.js";
+
+//Declarar botones antes de darles funcionalidad
+
+let cifrar = document.getElementById("cifrar");
+let goBack = document.getElementById("goBack");
+
+//cifrar
+cifrar.addEventListener("click", () => {
+  let mensaje = document.getElementById("mensaje").value;
+  let mensajeMayuscula = mensaje.toUpperCase();
+  let desplazamiento = document.getElementById("desplazamiento").value;
+
+  let mensajeCifrado = cipher.encode(desplazamiento, mensajeMayuscula);
+
+  document.getElementById("txtMensajeResultado").value = mensajeCifrado;
+
+  document.getElementById("bloque1").style.display = "none";
+  document.getElementById("bloque2").style.display = "block";
+});
+
+//descifrar
+document.getElementById("descifrar").addEventListener("click", () => {
+  let mensaje = document.getElementById("mensaje").value;
+  let mensajeMayuscula = mensaje.toUpperCase();
+  let desplazamiento = document.getElementById("desplazamiento").value;
+
+  let mensajeDescifrado = cipher.decode(desplazamiento, mensajeMayuscula);
+
+  document.getElementById("txtMensajeResultado").value = mensajeDescifrado;
+
+  //funcionalidad ocultar el bloque
+  document.getElementById("bloque1").style.display = "none";
+  document.getElementById("bloque2").style.display = "block";
+});
+
+//button goBack
+goBack.addEventListener("click", () => {
+  document.getElementById("bloque1").style.display = "block";
+  document.getElementById("bloque2").style.display = "none";
+});