Laboratoria · LauraJimenezB · Jul 14, 2020 · Jul 14, 2020 · Jul 14, 2020 · Jul 14, 2020
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1 @@
+{  "plugins": ["@babel/plugin-transform-modules-commonjs"]}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,13 @@
+{
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-console": "warn"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+coverage/
diff --git a/2020-07-15 (2).png b/2020-07-15 (2).png
diff --git a/README.md → READ.md b/README.md → READ.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/protfinal.jpg b/protfinal.jpg
diff --git a/protini.jpg b/protini.jpg
diff --git a/readme.md b/readme.md
@@ -0,0 +1,48 @@
+# GENERADOR DE CONTRASEÑAS
+
+### PLAN DE ACCIÓN 
+* Objetivo principal: Manipulación dinámica del DOM. Para ello,
+* Escuchar eventos del DOM en Index.js que invoque cipher.encode() y cipher.decode() desde cipher.js
+
+## ¿DE QUÉ TRATA EL PROYECTO?
+
+El proyecto "Generador de contraseñas" consiste en una aplicación interactiva y amigable con el usuario que  permita generar contraseñas seguras siguiendo el mecanismo del Caesar Cipher o “Cifrado Caesar”.
+
+## DESCARGAR
+
+## INSTALACIÓN
+
+## EJECUTAR
+
+## VISTA PREVIA 
+
+## INVESTIGACIÓN UX
+
+### ¿Quiénes son los principales usuarios de producto?
+
+Público general con cuentas personales en distintas redes sociales.
+
+### ¿Cuáles son los objetivos de estos usuarios en relación con tu producto?
+
+Público de distintas edades poseen cuentas que necesitan contraseñas más complicadas y seguras.
+
+### ¿Cómo crees que el producto que estás creando está resolviendo sus problemas?
+El Cipher permite que las contraseñas sean difíciles de hackear, es decir, contribuye a la seguridad de las cuentas del usuario.
+
+### Prototipo inicial
+
+![](/protini.jpg)
+
+### Feedback
+
+Luego de presentar mi prototipo inicial (en papel) a m familia y compañeras de Laboratoria, reuní las siguientes observaciones:
+
+* La caja de "resultado" no es necesaria, pues ocupa espacio y no se usará todo su espacio para la palabra codifica o decodificada.
+
+* El ingreso del offset era confuso para las personas no familiarizadas con el código César, quienes no veían la utilidad de ese número.
+
+Por ello, para el prototipo final se decidió no dejar un espacio determinado para el resultado, sino que éste aparezca luego de presionar el botón cuando ya se realice la conversión. Además, se podrá un **label** para explicar el offset y su uso.
+
+### Prototipo final
+
+![](/protfinal.jpg)
diff --git a/src/background.jpg b/src/background.jpg
diff --git a/src/bgFooter.svg b/src/bgFooter.svg
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,33 @@
 const cipher = {
-  // ...
+  encode : function (offset, str) {
+      let x = [];
+      for (let i=0; i<str.length; i++) {
+        if(str.charCodeAt(i)>=65 && str.charCodeAt(i)<=90){
+          x [i] = ((str.charCodeAt (i))-65+ offset)%26 +65
+          } else {
+              x[i]= str.charCodeAt (i);
+            }
+        }
+        return x;
+  },
+
+  decode : function (offset, str) {
+    let x = [];
+    for (let i=0; i<str.length; i++) {
+      if(str.charCodeAt(i)>=65 && str.charCodeAt(i)<=90){
+        if ((str.charCodeAt(i)-65)>=offset) {
+          x [i] = ((str.charCodeAt (i))-65- offset)%26 +65
+        }
+        else {
+          x [i] = (((str.charCodeAt (i))-65- offset)%26+26)%26+65
+        }
+      }
+        else {
+            x[i]= str.charCodeAt (i);
+          }
+      }
+      return x;
+  }
 };
 
 export default cipher;
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,50 @@
   <head>
     <meta charset="utf-8">
     <title>Caesar Cipher</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div id="root">
-      <h1>Hello world!</h1>
+      <header>
+        <h1> GENERADOR DE CONTRASEÑAS</h1>
+        <p><i>Crea mejores contraseñas, mantén tus cuentas seguras</i></p>
+      </header>
+      <section>
+          <form>
+            <input type="text" id="txt" placeholder="Ingrese texto aquí..."></input>
+            <label for="num"><strong>OFFSET </strong><input type="number" id="num" min="0" step="1"></input></label>
+            <button type="button" class="encode" id="encode">CODIFICAR</button>
+            <button type="button" class="decode" id="decode">DECODIFICAR</button>
+          </form>
+          <div class="bigQuestion">
+            <div class="icon">
+              <p class="questionIcon">?</p>
+            </div>
+            <div class="question">
+              <div>
+                <p><strong>¿Qué es el offset? </strong>Cada letra se desplaza "x" espacios hacia la derecha en el alfabeto.</p>
+              </div>
+              <div>
+                <p><i><strong>Por ejemplo.</strong> Con un offset de 3, la letra "A" avanza 3 espacios y se convierte en "D".</i></p>
+              </div>
+            </div>
+          </div>
+      </section>
+      <footer>
+        <div class="flex">
+          <div class="lock">
+            <img src="resultado.svg" width="75px" height="75px"/>
+          </div>
+          <div class="resulText">
+            <div>
+              <h2>TEXTO CODIFICADO / DECODIFICADO </h2>
+            </div>
+            <div class="resultado">
+              <h3 id="resultado"></h3>
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
     <script src="index.js" type="module"></script>
   </body>

diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,25 @@
 import cipher from './cipher.js';
 
-console.log(cipher);
+document.getElementById("txt").addEventListener ("keyup", function () {
+  this.value=this.value.toUpperCase ();
+});
+
+document.getElementById("encode").addEventListener("click", onEncode);
+function onEncode () {
+  let offset = parseInt(document.getElementById('num').value);
+  let str = document.getElementById('txt').value;
+
+  const x = cipher.encode(offset,str);
+  const resultado = String.fromCharCode.apply (null, x)
+  document.getElementById('resultado').innerHTML = resultado;
+}
+
+document.getElementById("decode").addEventListener("click", onDecode);
+function onDecode () {
+  let offset = parseInt(document.getElementById('num').value);
+  let str = document.getElementById('txt').value;
+
+  const x = cipher.decode(offset,str);
+  const resultado = String.fromCharCode.apply (null, x)
+  document.getElementById('resultado').innerHTML = resultado;
+}
diff --git a/src/question.svg b/src/question.svg
diff --git a/src/resultado.svg b/src/resultado.svg
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,152 @@
+* {
+  font-family:sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  max-width: 1280px;
+  background-image: url("background.jpg");
+  background-size: cover;
+}
+
+header {
+  font-size: 35px;
+  width: 100%;
+  margin: 0;
+  padding: 10px;
+  text-align: center;
+  color: #394648;
+  font-weight: bolder;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  line-height: 25px;
+}
+
+img {
+  border-radius: 4px;
+}
+
+input[type=text], select {
+  width: 75%;
+  height: 30px;
+  padding: 12px 20px;
+  margin-left:auto;
+  margin-right: auto;
+  margin-top: 35px;
+  margin-bottom: 20px;
+  display:block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+label {
+  margin-left: 145px;
+}
+
+input[type=number], select {
+  width: 80px;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.bigQuestion {
+  display: flex;
+  justify-content: center;
+}
+
+.icon {
+  background: #394648;
+  border-radius: 70px;
+  width: 70px;
+  height: 70px;
+  text-align: center;
+  margin-top: 35px;
+  color: #FFFFFF;
+  font-weight: bold;
+  font-size: 28px;
+}
+
+.questionIcon {
+  margin-top: 18px;
+}
+
+.question {
+  text-align: left;
+  margin-left: 20px;
+  margin-top: 30px;
+}
+
+button {
+  width:220px;
+  color: white;
+  padding: 14px 20px;
+  margin: 4px 0;
+  margin-top: 7px;
+  margin-bottom: 0;
+  margin-left: 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display:inline-block;
+  justify-content: center;
+  font-weight: bolder;
+  font-size: 15px;
+}
+
+.encode {
+  background-color: #F05D5E;
+  margin-left: 370px;
+}
+
+.decode{
+  background-color: #99D17B;
+}
+
+footer {
+  margin-top: 20px;
+  margin-left: 0;
+  height: 165px;
+  width: 1304px;
+  background-image: url("bgFooter.svg");
+  background-position:top;
+}
+
+.lock {
+  margin-left: 370px;
+  margin-top: 75px;
+  margin-right: 1px;
+}
+
+.resulText {
+  margin-top: 65px;
+  width: 400px;
+  color: white;
+}
+
+h3 {
+  background-color: #6C6C6E;
+  border-radius: 8px;
+  height: 30px;
+  width: 385px;
+  margin-left: 10px;
+  margin-top: 0px;
+  margin-bottom: 0;
+  padding-top: 7px;
+}
+
+h2 {
+  margin-bottom: 7px;
+}
+
+h2, h3 {
+  text-align: center;
+  font-size: 20px;
+  color: #FFFFFF;
+}
+
+.flex {
+  display: flex;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{ "plugins": ["@babel/plugin-transform-modules-commonjs"]}