Laboratoria · andreatoledo · Feb 10, 2020 · Feb 14, 2020 · Feb 17, 2020 · Feb 17, 2020
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/prototipo/cap.png b/prototipo/cap.png
diff --git a/prototipo/cap2.png b/prototipo/cap2.png
diff --git a/prototipo/pro.jpg b/prototipo/pro.jpg
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,66 @@
-const cipher = {
-  // ...
+window.cipher = {
+  //crear una función de cifrado
+  encode: (offset, toEncode) => {
+    let result1 = '';
+    let toUnicode='';
+    let toUnicode1='';
+    let toUnicode2='';
+    //variable donde estara almacenado el ascii encriptado
+
+    for(let i = 0; i< toEncode.length; i++){ //Convertiremos y alamacenamos cada letra de la frase ingresada a código Ascci
+    let toAscii = toEncode.charCodeAt(i); //Condicionamos para que la frase almacenada este en el rango de numeros ASCII y no de otros
+
+    if (toAscii>=65 && toAscii<=90){
+    toUnicode = String.fromCharCode((toAscii- 65 + offset)%26 + 65);  //Si la letra es MAYÚSCULA Aplicaremos la formula de César para obtener el código ASCII de la letra ya encriptada
+    result1 += toUnicode; //codAsciiEncrypted: Guardamos el código ascii encriptado
+    }else if (toAscii === 32){
+    toAscii = ((toAscii- 32 + offset)%1 + 32); //valido si  hay un espacio  en ASCII 
+    toUnicode1  = String.fromCharCode(toAscii);
+    result1 += toUnicode1;
+    }else if (toAscii>=97 && toAscii<=122){
+    toUnicode2 = String.fromCharCode((toAscii- 97 + offset)%26 + 97); //Si la letra es minúscula Aplicaremos la formula de César para obtener el código ASCII de la letra ya encriptada
+    //codAsciiEncrypted: Guardamos el código ascii encriptado
+    result1 += toUnicode2;
+
+    // To ascii y to unicode: Estas funciones estan diseñadas para realizar la "traducción" de códigos de teclas virtuales + flags de estas + estado del teclado + configuración regional del teclado, a sus correspondientes teclas, estas proveen un mecanismo de detección de la tecla bastante efectivo y preciso, 
+    }
+  }
+
+  return result1; //Por ultimo retornamos la nueva frase encriptada
+  },
+  decode: (offset, toDecode) => {
+    let result2 = '';
+    let toUnicode6='';
+    let toUnicode7='';
+    let toUnicode8='';
+    let toUnicode9='';
+    for(let i = 0; i< toDecode.length; i++){
+    let toAscii = toDecode.charCodeAt(i);
+
+    if (toAscii>=65 && toAscii<=90){
+    toUnicode6 = String.fromCharCode((toAscii+ 65 - offset-26)%26 + 65);
+    result2 += toUnicode6;
+
+    }else if (toAscii === 32){
+    toAscii = ((toAscii+ 32 - offset-1)%1 + 32);
+    toUnicode7 = String.fromCharCode(toAscii);
+    result2 += toUnicode7;
+
+    }else if (toAscii>=97 && toAscii<=122){
+    toUnicode8 = String.fromCharCode((toAscii+97 - offset-38)%26 + 97);
+    result2 += toUnicode8;
+
+    }else if (toAscii === 165){
+    toAscii = ((toAscii- 165 + offset)%1 + 165);
+    toUnicode9 = String.fromCharCode(toAscii);
+    result2 += toUnicode9;
+
+    }
+  }
+
+  return result2;
+  }
 };
 
-export default cipher;
+
+
diff --git a/src/data.jpg b/src/data.jpg
diff --git a/src/detective.jpg b/src/detective.jpg
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>
-    <div id="root">
-      <h1>Hello world!</h1>
-    </div>
-    <script src="index.js" type="module"></script>
-  </body>
+<html lang="es">
+<head>
+  <meta charset="utf-8">
+  <title>Caesar Cipher</title>
+
+        <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header id="main-header">
+
+
+    <MARQUEE>  <big> <h1>P E R S O N A L 🔍 D A T A 🔍 P R O T E C T I O N</h1>  </big> </MARQUEE>
+
+
+  </header>
+
+<div id= "cifrar">
+<h2 id="instruccion"> I N S T R U C C I O N E S:
+</h2>
+<p> Seleccciona una clave del 1 al 33.
+<p> CLAVE </p>
+<br>
+<input type="number" value min="1" id="offset">
+<br> Escribe el texto que deseas cifrar
+<p><textarea id="message"  placeholder="Escribe aquí"  cols="35" rows="4"> 
+
+</textarea>
+<textarea id="container"  placeholder="RESULTADO" name="" cols="35" rows="4">
+</textarea></p>
+<p><input type="button" value="C I F R A R" id="btncifrar">
+  <input type="button" value="D E S C I F R A R" id="btndescifrar">
+  <input type="reset" value="B O R R A R" id="resetbtn">
+</p>
+</div>
+<div id= "enviar">
+  <p><a href= index1.html target=_blank><button>VOLVER AL INICIO </button></a> </p>
+  <footer id="main-footer">
+    <p>&copy; 2020 @Andrea Toledo</a></p>
+  </footer> 
+</div>
+<div id="root">
+<script src="index.js"></script>
+<script src="cipher.js"></script>
+</div>
+</div>
+</body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,26 @@
-import cipher from './cipher.js';
 
-console.log(cipher);
+
+let containerResult = document.getElementById('container');
+
+
+document.getElementById("btncifrar").addEventListener("click", () => {
+
+  let toEncode= document.getElementById("message").value;
+  let offset = parseInt(document.getElementById("offset").value);
+  containerResult.innerHTML = cipher.encode(offset,toEncode);
+
+
+  document.getElementById("btndescifrar").addEventListener("click", () => {
+    let toDecode = document.getElementById("message").value;
+    let offset = parseInt(document.getElementById("offset").value);
+    containerResult.innerHTML = cipher.decode(offset,toDecode);
+
+
+});
+document.getElementById("resetbtn").addEventListener("click", () => {
+  document.getElementById("message").value = "";
+  document.getElementById("offset").value = "";
+  document.getElementById("container").value = "";
+
+});
+});
diff --git a/src/index1.html b/src/index1.html
@@ -0,0 +1,44 @@
+
+
+    <!DOCTYPE html>
+    <html lang="es">
+    <head>
+      <meta charset="utf-8">
+      <title>Caesar Cipher</title>
+
+            <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+
+      <header id="main-header">
+
+
+        <MARQUEE>  <big> <h1>P E R S O N A L 🔍 D A T A 🔍 P R O T E C T I O N</h1>  </big> </MARQUEE>
+
+
+      </header>
+
+
+
+      <section id="main-content">
+
+
+         <h1><center>Mantente protegido 🔐 </center> </h1> 
+
+         <center><big> <big> <big> ¿QUÉ   QUIERES   HACER? </big> </big> </big> <p>
+          <a class="boton" href="index.html"> PULSE AQUÍ SI QUIERE CIFRAR Y DESCIFRAR🔒 </a>
+            </center> </p>
+            <p>
+            <center><img src="detective.jpg" align="center"> </p> </center>
+
+      </section>
+
+          <footer id="main-footer">
+            <p>&copy; 2020 @Andrea Toledo</h1></p>
+          </footer> 
+    </body>
+    </html>
+
+
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,76 @@
+body {
+	margin: 20;
+	padding: 20;
+	font-family: Centhury Gothic;
+	color: grey;
+	background: #e2dbdb; 
+	font-size: 1.5em;
+	line-height: 1.5em;
+
+}
+
+h1 {
+	font-size: 1.5em;
+	line-height: 1.5em;
+	margin: 10px 0;
+	text-align: left;
+	font-weight: 100;
+}
+
+p {
+	margin: 0 0 1em 0;
+}
+
+img {
+	max-width: 50%;
+	height: auto;
+}
+
+#main-header {
+
+	font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
+	background : rgb(255, 158, 174); 
+	color: rgb(255, 255, 255);
+	height: 100px;
+}	
+	#main-header a {
+		color: white;
+	}
+
+
+
+
+
+#main-content {
+	background:rgb(255, 248, 248);
+	width: 1000%;
+	max-width: 1000px;
+	margin: 10px auto;
+	box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
+
+	#main-content header,
+	#main-content .content {
+		padding: 30px;
+	}
+
+#main-footer {
+	background: #333;
+	color: white;
+	text-align: center;
+	padding: 20px;
+	margin-top: 40px;
+}
+	#main-footer p {
+		margin: 0;
+	}
+
+	#main-footer a {
+		color: white;
+	}
+    .boton {
+        padding: 10px 20px;
+        background-color: #00f396; 
+        color: white
+
+    }