Laboratoria · cheemsDevv · Jul 14, 2022 · Jul 14, 2022 · Jul 27, 2022 · Jul 28, 2022
diff --git a/README.md b/README.md
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-cayman
diff --git a/index.html b/index.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/chat.html b/src/chat.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header id="logo">
+        <img src="../images/teachat.png">
+      </header>
+      <main id="container"> <!--representa contenido principal del body-->
+      </main>
+
+</body>
+</html>
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,58 @@
-const cipher = {
-  // ...
-};
+const cipher = {  // Esta guardando las funciones dentro de un objeto
+  // toda la logica
+  encode: function (offset, plainText) {
+    let solved = ""
+    if (typeof offset == 'number' && typeof plainText == 'string') {
 
+      for (let i = 0; i < plainText.length; i++) {
+        let asciiNum = plainText[i].charCodeAt();
+        //console.log(asciiNum);
+        if (asciiNum >= 65 && asciiNum <= 90) {
+          let codedMessage = (asciiNum - 65 + offset) % 26 + 65;
+          //console.log(codedMessage);
+          solved += String.fromCharCode(codedMessage);
+          // console.log("solved",solved);
+        } else if (asciiNum >= 97 && asciiNum <= 122) {
+          let codedMessage = (asciiNum - 97 + offset) % 26 + 97;
+          //console.log(codedMessage);
+          solved += String.fromCharCode(codedMessage);
+        } else if (asciiNum == 32) {
+          solved += plainText[i];
+        }
+      }
+      return solved;
+      //console.log(solved); 
+    } else {
+      throw TypeError('wrong argument type');
+    }
+  },
+  decode: function (offset, decodedTxt) {
+    if (typeof offset == 'number' && typeof decodedTxt == 'string') {
+      let result = ""
+      // 33 -> 33%26 = 7. el "complemento de 7 a 26 es 19 o la resta de 26 y 7 = 19"
+      // 26 - 7 = 19
+      // 26 - (33%26) = 19
+      offset = 26 - (offset % 26);
+      for (let i = 0; i < decodedTxt.length; i++) {
+        let asciiNum = decodedTxt[i].charCodeAt();
+        //console.log(asciiNum); 
+        if (asciiNum >= 65 && asciiNum <= 90) {
+          let codedMessage = (asciiNum - 65 + offset) % 26 + 65;
+          result += String.fromCharCode(codedMessage);
+          //  console.log(result);
+        } else if (asciiNum >= 97 && asciiNum <= 122) {
+          let codedMessage = (asciiNum - 97 + offset) % 26 + 97;
+          // console.log(decodedMsg);
+          result += String.fromCharCode(codedMessage);
+        } else if (asciiNum == 32) {
+          result += decodedTxt[i];
+        }
+      }
+      return result;
+
+    } else {
+      throw TypeError('wrong argument type')
+    }
+  }
+}
 export default cipher;
diff --git a/src/images/flecha.png b/src/images/flecha.png
diff --git a/src/images/tea-blanco.png b/src/images/tea-blanco.png
diff --git a/src/images/teachat.png b/src/images/teachat.png
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,49 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Caesar Cipher</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
+
+<head>
+  <meta charset="utf-8">
+  <title>Caesar Cipher</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <header id="logo">
+    <img src="images/teachat.png">
+  </header>
+
+  <main id="container">
+    <!--representa contenido principal del body-->
+    <figure id="centrar">
+      <img src="images/tea-blanco.png" alt="logo_blanco">
+    </figure>
+    <p id="hi">¡Hola!</p>
+    <p id="txt">Escoge número clave para cifrar:</p>
+    <input id="offset" type="number" min="1" max="13">
+    <button id="boton" class="btn">Start</button>
+    <div id="container2">
+      <button id="cifrar" class="btn" value="cifrar">Cifrar</button>
+      <button id="btnDecode" class="btn" value="descifrar">Descifrar</button>
+      <button id="btnClear" class="btn">Borrar</button>
+    </div>
+    <div id="areaTexts">
+      <textarea id="plainText" rows="7" cols="25" placeholder="Escribe tu mensaje"></textarea>
+      <textarea id="decodedTxt" rows="7" cols="25" placeholder="Descifra tu mensaje"></textarea>
+    </div>
+    <div>
+      <button id="goBack" class="btn"><img src="images/flecha.png" /></button>
+    </div>
+
+
+  </main>
+  <!--<footer>Ya puedes cifrar para tu chat</footer>-->
+
+  <!--
     <div id="root">
       <h1>Hello world!</h1>
-    </div>
-    <script src="index.js" type="module"></script>
-  </body>
-</html>
+    </div>-->
+
+  <script src="index.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,61 @@
 import cipher from './cipher.js';
+// todo lo que ver con manipulacion del DOM
+let btnCifrar = document.getElementById('cifrar');
+btnCifrar.addEventListener('click', function () {
+    let plainText = document.getElementById('plainText').value;
+    let offset = parseInt(document.getElementById('offset').value); // parseInt() convierte un string a un entero
+    //manda a llamar a la funcion dentro del objeto, y le pasa los valores de offset e input a cipher.js
+    document.getElementById('decodedTxt').value = cipher.encode(offset, plainText);
+
+});
+
+const btnDecode = document.getElementById('btnDecode');
+btnDecode.addEventListener('click', function () {
+    let decodedTxt = document.getElementById('decodedTxt').value;
+    let offset = parseInt(document.getElementById('offset').value); // parseInt() convierte un string a un entero
+    document.getElementById('plainText').value = cipher.decode(offset, decodedTxt);
+});
+
+//Sirve para ocultar estos elementos al cargar el html. 
+//Al no estar dentro de una funcion permite que se escondan estos elementos.
+document.getElementById('container2').style.display = 'none';
+document.getElementById('areaTexts').style.display = 'none';
+document.getElementById('goBack').style.display = 'none';
+
+//funcion para mostrar los elementos ocultos
+const boton = document.getElementById('boton');
+boton.addEventListener('click', showScreen);
+function showScreen() {
+    document.getElementById('container2').style.display = 'flex';
+    document.getElementById('areaTexts').style.display = 'flex';
+    document.getElementById('goBack').style.display = 'flex';
+    document.getElementById('hi').style.display = 'none';
+    document.getElementById('centrar').style.display = 'none';
+    document.getElementById('boton').style.display = 'none';
+    document.getElementById('txt').style.display = 'none';
+    document.getElementById('offset').style.display = 'none';
+}
+
+const btnAtras = document.getElementById('goBack');
+btnAtras.addEventListener('click', goBack);
+function goBack() {
+    document.getElementById('container2').style.display = 'none';
+    document.getElementById('areaTexts').style.display = 'none';
+    document.getElementById('goBack').style.display = 'none';
+    document.getElementById('hi').style.display = 'flex';
+    document.getElementById('centrar').style.display = 'flex';
+    document.getElementById('boton').style.display = 'flex';
+    document.getElementById('txt').style.display = 'none';
+    document.getElementById('offset').style.display = 'flex';
+
+}
+
+//Funcion para borrar las areas de texto
+let btnClear = document.getElementById('btnClear');
+btnClear.addEventListener('click', clearText)
+function clearText() {
+    document.getElementById('plainText').value = '';
+    document.getElementById('decodedTxt').value = '';
+    //  document.getElementById('offset').value = '';
+}
 
-console.log(cipher);
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,179 @@
+* {
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
+    font-family: 'Montserrat', sans-serif;
+    color: white;
+}
+
+body {
+    background: linear-gradient(360deg, #C3D0E2, #E4CAE8);
+    /*  background-repeat: no-repeat; */
+    background-attachment: fixed;
+    /*determina si la posición de la imagen de fondo será fija dentro de la pantalla*/
+}
+
+#logo img {
+    width: 150px;
+
+}
+
+#logo {
+    margin-top: 35px;
+    text-align: center;
+}
+
+#container {
+    width: 50%;
+    height: 70%;
+    margin: 35px auto 0 auto;
+    background-color: #f1adff;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/*
+#centrar{
+    display: flex;
+    /*Podemos usar las propiedades de flexbox dentro de un contenedor estableciendo 
+    la propiedad display como flex. Entonces podemos usar la propiedad justify-content: center 
+    para centrar los elementos o imágenes dentro del contenedor horizontalmente. Usar en contenedor padre
+    justify-content: center;
+
+}*/
+
+figure img {
+    display: block;
+    margin-top: 20px;
+    width: 165px;
+    height: auto;
+}
+
+#hi {
+    font-size: 4em;
+    margin: 0;
+}
+
+p {
+    display: flex;
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    text-align: center;
+}
+
+#offset {
+    background-color: #f1adff;
+    border-radius: 15px;
+    border: solid white;
+    width: 110px;
+    height: 25px;
+    text-align: center;
+    color: white;
+    /*margin-bottom: 15px;*/
+}
+
+.btn {
+    background-color: #C794D8;
+    color: white;
+    width: 114px;
+    height: 30px;
+    margin: 10px;
+    border: none;
+    border-radius: 15px;
+    font-size: 1em;
+    font-family: 'Montserrat', sans-serif;
+}
+
+.btn:hover {
+    background-color: #A560BC;
+    transition: 0.7s;
+}
+
+#container2 {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+}
+
+#areaTexts {
+    display: flex;
+    justify-content: center;
+    margin: 10px;
+    box-sizing: border-box;
+}
+
+textarea::placeholder {
+    color: white;
+    opacity: 0.5;
+}
+
+#plainText {
+    font-weight: 500;
+    margin: 10px;
+    border-radius: 14px;
+    border: solid white 2px;
+    background-color: #f1adff;
+    color: white;
+    padding: 5px;
+
+}
+
+#decodedTxt {
+    font-weight: 500;
+    margin: 10px;
+    border-radius: 14px;
+    border: solid white 2px;
+    background-color: #f1adff;
+    color: white;
+    padding: 5px;
+}
+
+#boton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*text-align: center;*/
+
+}
+
+#cifrar {
+    margin-top: 25px;
+}
+
+#btnDecode {
+    margin-top: 25px;
+}
+
+#btnClear {
+    margin-top: 25px;
+}
+
+#goBack {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #C794D8;
+    color: white;
+    width: 30px;
+    height: 30px;
+    margin: 10px;
+    border: none;
+    border-radius: 15px;
+    font-size: 1em;
+    font-family: 'Montserrat', sans-serif;
+}
+
+#goBack img {
+    height: 22px;
+    /* align-items: center;*/
+    justify-content: center;
+}
+
+#goBack:hover {
+    background-color: #A560BC;
+    transition: 0.7s;
+}
+
+#txt {
+    display: flex;
+}