Laboratoria · paocmoras · Feb 7, 2020 · Feb 9, 2020 · Feb 10, 2020 · Feb 11, 2020
diff --git a/README.md b/README.md
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,82 @@
-const cipher = {
-  // ...
-};
-
-export default cipher;
+//window valor global, cipher es el objeto
+window.cipher = {
+//Codificar, cadena de texto, numero de desplazamiento
+encode: (string, offset) => {
+//variable para que introduzcan la palabra a cifrar
+let wordCipher = "";
+//mi ciclo "for" se va a estar ejecutando cada que el usuario introduzca una
+//cadena de texto e ira incrementando
+for (let i = 0; i < string.length; i++) {
+//variable que declara que word es igual a una cadena de texto[incrementar]
+let word = string[i];
+//mi variable word solo se va a ejecutar siempre y cuando sea equivalente
+//a solo letras
+if (word.match(/[a-z]/i)) {
+//mi variable word solo se va a ejecutar si mi cadena de texto respeta el
+//codigo al caracter tiene que ser igual o mayor a "A" pero igual y menor a "Z"
+//del codigo ASCII
+if (string.charCodeAt(i) >= 65 && string.charCodeAt(i) <= 90) {
+//variable que indica que mi cadena de texto respeta el codigo al caracter menos
+// la primera letra de ASCII más numero de desplazamiento(entero) % alfabeto más
+// primera letra ASCII.
+let textWord = (string.charCodeAt(i) - 65 + parseInt(offset)) % 26 + 65;
+//Mi cifrado de palabras va a ser más o igual a la palabra introducida y solo
+//pueden ser letras Mayusculas y no numeros
+wordCipher += String.fromCharCode(textWord);
+//mi variable word solo se va a ejecutar si mi cadena de texto respeta el codigo
+// al caracter tiene que ser igual o mayor a "a" pero igual y menor a "z" del
+//codigo ASCII
+} else if (string.charCodeAt(i) >= 97 && string.charCodeAt(i) <= 122) {
+//pero mi cadena de texto debe de respeta el codigo al caracter menos
+// la 97 letra "a" de ASCII más numero de desplazamiento(entero) % alfabeto más
+//la 97 letra "a" letra ASCII
+textWord = (string.charCodeAt(i) - 97 + parseInt(offset)) % 26 + 97;
+//Mi cifrado de palabras va a ser más o igual a la palabra introducida y solo
+//pueden ser letras minusculas y no numeros
+wordCipher += String.fromCharCode(textWord);
+}
+} else {
+wordCipher += word;
+}
+}
+//retorna en Cifrado de palabra
+return wordCipher;
+},
+//Decodificar, cadena de texto y numero de desplazamiento
+decode: (string, offset) => {
+//Se asigna una variable para descifrar
+let wordDeCipher = "";
+//mi ciclo "for" se va a ejecutar siempre y cuando se introduzca una cadena de
+//texto e ira incrementando
+for (let i = 0; i < string.length; i++) {
+// mi variable declara de mi palabra es igual a una cadena de texto e ira
+//incrementando
+let wordD = string[i];
+//mi variable dice que solo se pueden introducir letras
+if (wordD.match(/[a-z]/i)) {
+//mi variable word solo se va a ejecutar si mi cadena de texto respeta el
+//codigo al caracter tiene que ser igual o mayor a "A" pero igual y menor a
+//"Z" del codigo ASCII
+if (string.charCodeAt(i) >= 65 && string.charCodeAt(i) <= 90) {
+let textWord = (string.charCodeAt(i) + 65 - parseInt(offset)) % 26 + 65;
+//Mi descifrado de palabras va a ser más o igual a la palabra introducida y
+//solo pueden ser letras Mayusculas y no numeros
+wordDeCipher += String.fromCharCode(textWord);
+//mi variable word solo se va a ejecutar si mi cadena de texto respeta el codigo
+//al caracter tiene que ser igual o mayor a "a" pero igual y menor a "z" del
+//codigo ASCII
+} else if (string.charCodeAt(i) >= 97 && string.charCodeAt(i) <= 122) {
+//pero mi variable indica que se ejecuta con la formula de codigo ASCII con
+//palabras en minusculas
+let textWord = (string.charCodeAt(i) - 97 - parseInt(offset))% 26 + 97;
+//Mi descifrado de palabras va a ser + o = a una cadena de texto, no numeros
+wordDeCipher += String.fromCharCode(textWord);
+}
+} else {
+wordDeCipher += wordD;
+}
+}
+//retornar en Descifrado de palabra
+return wordDeCipher;
+}
+}
diff --git a/src/img/IMG_20200216_132235652.jpg b/src/img/IMG_20200216_132235652.jpg
diff --git a/src/img/abierto.png b/src/img/abierto.png
diff --git a/src/img/cerrado.png b/src/img/cerrado.png
diff --git a/src/img/cipher completo.png b/src/img/cipher completo.png
diff --git a/src/img/cipher estructura2.jpg b/src/img/cipher estructura2.jpg
diff --git a/src/img/maquetado pao.jpg b/src/img/maquetado pao.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,83 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<header>
     <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>
+    <title>Bienvenidos al creador de Password</title>
+    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+</header>
+
+<main>
+
+
+<div class="contenedor" id="first" class="display_block">;
+
+      <div class= "contenedor1"><h1>¡Advertencia!</h1><br>
+
+      No admite letra "Ñ"<br>
+      No admite caracteres<br>
+      No admite numeros
+
+  <!--Boton Entendido-->
+  <form><br>
+  <button type="button" id="boton">Entendido</button>
+  </form>
+  </div></div>
+
+<!--Segunda pantalla-->
+
+<div id="second" class="bienvenidos display_none">
+    <h1>Bienvenidos al creador de Password</h1>
+
+<!--Boton Toggle-->
+
+<div class="cifra-Descifra">Cifra-Descifra<br>
+<input id="myCheckbox" type="checkbox" /></div>;
+
+
+<!--Botones Cifrado y Descifrado-->
+<div id="encode-decode">
+             <a href="#" id="page-encode"><img src= "img/abierto.png"></a>
+             <a href="#" id="page-decode"><img src= "img/cerrado.png"></a>
+         </div>
+
+         <!--display cifrar-->
+
+         <div id="text-encode" class="display_block"><!--Enlazar styledisplay-->
+           <div class="content-offset">
+             <label class="label">Número de desplazamiento</label><br>
+             <input type="number" id="offset_ci" class="style_offset"><!--enlaza offset a variable y css-->
+           </div>
+             <br><textarea id="box-msg-encode" class="box-text-style" placeholder="Introduce el texto a cifrar..."></textarea><br><!--Caja de texto-->
+             <button id="btn_encode" class="send">Enviar</button><br><!--Boton enviar-->
+             <div id="msg-encode" class="text-result"><p id="msg-encode-check"></p><!--Demo-->
+             </div>
+             <button onclick="location.reload();" class="recharge">Limpiar</button><!--Boton Limpiar-->
+            </div>
+
+         <!--display descifrar-->
+
+         <div id="text-decode" class= "display_none"><!--Enlazar style.display-->
+           <div class="content-offset">
+             <label class="label">Número de desplazamiento</label><br>
+             <input type="number" id="offset_des" class="style_offset"><!--enlaza offset a variable y css-->
+           </div>
+             <br><textarea id="box-msg-decode" class="box-text-style" placeholder="Introduce el texto a descifrar..."></textarea><br><!--Caja de texto-->
+             <button id="btn_decode" class="send">Enviar</button><br><!--Boton enviar-->
+             <div id="msg-decode" class="text-result"><p id="msg-decode-check"></p><!--Demo-->
+             </div>
+             <button onclick="location.reload();" class="recharge">Limpiar</button><!--Boton Limpiar-->
+         </div>
+
+     </section>
+
+
+     <script src="cipher.js"></script>
+     <script src="index.js"></script>
+
+</main>
+<footer></footer>
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,70 @@
-import cipher from './cipher.js';
+    window.onload = () => {
 
-console.log(cipher);
+    //variable de mi boton "entendido" con el nombre de id "boton"
+    //nota: se le tiene que poner un div id al comienzo de cada pagina para
+    //poderla meter en eventos y poder pasar a la siguiente pagina
+
+    const boton = document.getElementById("boton");
+
+    boton.addEventListener("click", function() {
+    console.log("Has hecho clic en el botón");
+    document.getElementById("first").style.display = "none";
+    document.getElementById("second").style.display= "block";
+
+  });
+
+//Boton Toggle
+  const checkbox = document.getElementById('myCheckbox')
+
+  checkbox.addEventListener('change', (event) => {
+      if (event.target.checked) {
+      alert('checked');
+    } else {
+      alert('not checked');
+    }
+  });
+
+    /*pantalla cifrado*/
+
+    const cifrado = document.getElementById("page-encode");//se liga a href.
+
+    cifrado.addEventListener("click", function() {
+      document.getElementById("text-encode").style.display = "none";
+      document.getElementById("text-encode").style.display= "block";
+      document.getElementById("text-decode").style.display= "none";
+    });
+
+    /*variables para funcionamiento de botones cifrar*/
+
+    const btnTextEncode = document.getElementById('btn_encode');
+    btnTextEncode.addEventListener("click", function() {
+        //enlaza a caja de texto html y css
+        let textEncode = document.getElementById("box-msg-encode").value;
+        //Enlaza offset a html y css
+        let number_offset = document.getElementById("offset_ci").value;
+        document.getElementById("msg-encode-check").innerHTML = window.cipher.encode(textEncode, number_offset);
+    });
+
+
+    /*pantalla descifrado*/
+
+    const descifrado = document.getElementById("page-decode");//se liga a href
+
+    descifrado.addEventListener("click", function() {
+      document.getElementById("text-decode").style.display = "none";
+      document.getElementById("text-decode").style.display = "block";
+      document.getElementById("text-encode").style.display = "none";
+    });
+
+    /*variables para funcionamiento de botones descifrar*/
+
+    const btnTextDecode = document.getElementById("btn_decode");
+    btnTextDecode.addEventListener("click", function() {
+      //enlaza a caja de texto html y css
+      let textDecode = document.getElementById("box-msg-decode").value;
+      //Enlaza offset a html y css
+      let number_offset = document.getElementById("offset_des").value;
+      document.getElementById("msg-decode-check").innerHTML = window.cipher.decode(textDecode, number_offset);
+    });
+
+}