Final #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

GabbyHolics wants to merge 21 commits into Laboratoria:master from GabbyHolics:Final

.htmlhintrc

-Original file line number
+Diff line change
@@ -0,0 +1,4 @@
+    {
+      "attr-lowercase": false
+    }

Home-State-1.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

README.md

-Original file line number
+Diff line change
@@ -1,3 +1,62 @@
+    # Creador de Cifrado HBCZ 👩🏽‍💻
+    ## Introducccion 🤓
+      El proyecto a continuacion muestra la implementacion de un *cifrado*  que sera creado con el metodo de "Cifrado Cesar". Lo que haremos es aplicar la formula conocida, al mismo tiempo hacerla mas eficiente con un programa que la ejecute automaiticamente y con los movimientos que deser el usuario.
+    ## Usuarios del producto 👩‍🚀 👨‍⚖️ 👩‍🔬
+    Principalmente es para quien quiera enviar un mensaje corto con un cifrado y que el receptor pueda descifrarlo.  Se adaptaria a quienes necesiten esta función.
+    Podria ser, un integrado para uso de WhatsApp, o Redes internas de una empresa.
+    ### Solucion que crea nuestro producto a su necesidades.👾
+    - Permitirles crear un cifrado de numeros de desplazamiento a su criterio.
+    - Poder cifrar mayusculas y minisculas.
+    ## Proceso de creacion👩‍🎨
+    ### Diseño 🎨
+    Usamos un ambiente minimalista, donde lo principal era enfocarnos en los recuadros donde queriamos enviar y recibir el mensaje. Colores sobrios para hacer facilidad de lectura del mismo.
+    ### Prototipo Inicial 🖌
+    Desde un pirncipio maquetamos un diseño sencillo donde el principal atractivo sea la aplicacion del encriptado.
+    ![](papel-2.jpeg)
+    ### Prototipo en figma 👁‍🗨
+    ![Prototipo](Home-State-1.png)
+    ### Explicacion de diseño y colores✍️
+    Ideé en un diseño minimalista ya que para el fin del proyecto considero importante que no haya elementos adicionales ya que va hacer adaptado a la necesidad del consumidor.
+    La paleta de colores y las razones por la que fueron escogidos son:
+    - Blanco⚪️:  Refleja calma y al mismo tiempo enfoquue.
+    - Verde🟢: Seguridad.
+    - Azul🔵: Comunicacion
+    - Negro ⚫️: Hacer enfasis en los titulos con un color legible
+    ## Conclusion
+    Se creo un sistema automatico de cifrado de -30 a 30 Movimientos de mayusculas y minisculas. Con un diseño minimalista y bastante intuitivo para el usuario. En el siguiente enlace podras visualizar como se ve el proyecto👉
+    [Link](https://gabbyholics.github.io/SCL017-cipher/)
+    <details>
     # Cifrado César
     ## Índice
@@ Expand Down @@

docs/cipher.js

-Original file line number
+Diff line change
@@ -0,0 +1,71 @@
+    //Colocancando una funcion dentro de un obejeto y pasa  a ser una propiedad
+    const cipher = {
+      encode: function(message, move)  {
+      /*  if (typeof message !=="string"){
+        throw new TypeError("error");
+      }
+      if(typeof move !=="number"){
+        throw new TypeError("");
+      }*/
+        let transform = "";
+        //Aplico un ciclo repetitivo para la formula
+        for (let i = 0; i < message.length; i++) {
+          const asciiNum = message[i].charCodeAt();
+          if (asciiNum >= 65 && asciiNum <= 90) {
+            //Las letras mayusculas en ASCII
+            move = ((move % 26) + 26) % 26; //Para que pueda darse la vuelta
+            const location = asciiNum - 65 + move;
+            const formulated = (location % 26) + 65;
+            transform += String.fromCharCode(formulated);
+          }  else if (asciiNum >= 97 && asciiNum <= 122) {
+            // colocar rango de letras
+            move = ((move % 26) + 26) % 26;
+            const location = asciiNum - 97 + move;
+            const formulated = (location % 26) + 97;
+            transform += String.fromCharCode(formulated);
+          } else {
+            transform += String.fromCharCode(asciiNum);
+          }
+        }
+        return transform;
+      },
+      //Lo mismo pero restando movimientos
+      decode: function(message, move)  {
+        /*if (typeof message !=="string"){
+          throw new TypeError("error");
+        }
+        if(typeof move !=="number"){
+          throw new TypeError("error2");
+        }*/
+        let untransform = "";
+        for (let i = 0; i <message.length; i++) {
+          const asciiNum = message[i].charCodeAt();
+          if (asciiNum >= 65 && asciiNum <= 90) {
+            //Las letras mayusculas en ASCII
+            move = ((move % 26) + 26) % 26; //Para que pueda darse la vuelta
+            const location = asciiNum + 65 - move;
+            const formulated = (location % 26) + 65;
+            untransform += String.fromCharCode(formulated);
+          }  else if (asciiNum >= 97 && asciiNum <= 122) {
+            // colocar rango de letras
+            move = ((move % 26) - 26) % 26;
+            const location = asciiNum - 97 - move;
+            const formulated = (location % 26) + 97;
+            untransform += String.fromCharCode(formulated);
+          } else {
+            untransform += String.fromCharCode(asciiNum);
+          }
+        }
+        return untransform;
+      },
+    };
+    export default cipher;

docs/index.html

-Original file line number
+Diff line change
@@ -0,0 +1,63 @@
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <title>Cesar Cipher</title>
+        <link rel="stylesheet" href="style.css" />
+        <link rel="icon" href= "https://cdn.pixabay.com/photo/2016/10/18/19/40/anatomy-1751201_960_720.png" type="image/x-icon">
+        <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Source+Code+Pro:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
+      </head>
+        <body>
+            <header>
+              <h1>Creador de cifrado HBCZ</h1>
+            </header>
+            <div class="contenedor">
+               <div class="contenedor-mensaje">
+                  <h3>Mensaje</h3>
+                  <textarea  id="frases" cols="30" rows="10"  placeholder="Escribe el codigo"></textarea>
+                </div>
+                <div class="contenedor-botones">
+                  <h3>Movimientos</h3>
+                    <div class="contenedor-botones-desplazamiento">
+                      <input type="number" id="desplazamiento" value="0" min="-33" max="33">
+                    </div>
+                  <button id="cifrar" >
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                    width="50"
+                    height="50" fill="currentColor"
+                     class="bi bi-arrow-right-square"
+                     viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                    d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+                  </svg>
+                 </button>
+                  <button id="descifrar" >
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                     width="50"
+                     height="50"
+                     fill="currentColor"
+                     class="bi bi-arrow-left-square"
+                     viewBox="0 0 16 16">
+                     <path fill-rule="evenodd"
+                     d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
+                    </svg>
+                  </button>
+                </div>
+                <div class="contenedor-resultado">
+                  <h3>Cifrado</h3>
+                  <textarea  id ="resultado" cols="30" rows="10" readonly></textarea>
+                </div>
+             </div>
+             <div class="contenedor-2">
+             <footer>
+                <h4>Gabbyholics 2021 © </h4>
+                <p>TODOS LOS DERECHOS RESERVADOS</p>
+              </footer>
+            </div>
+        <script src="index.js" type="module"></script>
+      </body>
+    </html>

docs/index.js

-Original file line number
+Diff line change
@@ -0,0 +1,100 @@
+    import cipher from "./cipher.js";
+    // Hacer que el texto escriba en mayusuculas
+    // Crear una funcion de cifrado
+    //Impirmir el texto en el cuadro dos
+    //Llamar todos los eventos
+    const phrases = document.getElementById("frases");
+    const displacement= document.getElementById("desplazamiento");
+    const code= document.getElementById("cifrar");
+    const result = document.getElementById("resultado");
+    const decipher = document.getElementById("descifrar");
+    //Recibir la informacion del boton
+    code.addEventListener("click", btnCode);
+    decipher.addEventListener("click", btnDecipher);
+    // Creando una funcion para almacenar los datos del botn cifrar
+    function btnCode() {
+      const message = phrases.value;
+      const move = displacement.value;
+      result.value = cipher.encode(message, move);
+    }
+    // / Creando una funcion para almacenar los datos del botn descifrar
+    function btnDecipher() {
+      const message = phrases.value;
+      const move = displacement.value;
+      result.value = cipher.decode(message, move);
+    }
+    //Cambiar funcion a dentro de un objeto en cipher
+    // Formula usanndo las funciones
+    /*
+     function textoCodificado(mensaje,movimientos) {
+        let encriptado="";
+       for (let i=0;i<mensaje.length;i++){
+        const asciiNum = mensaje[i].charCodeAt();
+          if  (asciiNum >=65 && asciiNum <=90 ) {
+            movimientos =(movimientos %26+26)%26;
+            const ubicacion = (asciiNum - 65 + movimientos);
+            const formula = ubicacion %26 + 65;
+            encriptado+= String.fromCharCode(formula);
+          } /* else if  (asciiNum >=91 && asciiNum <=96 ) { // colocar rango de letras
+            movimientos =(movimientos % 6 + 6) % 6;
+            const ubicacion = (asciiNum - 91 + movimientos);
+            const formula = ubicacion %26 + 91;
+            encriptado+= String.fromCharCode(formula);
+          }  else if (asciiNum >=97 && asciiNum <=122 ) { // colocar rango de letras
+            movimientos =(movimientos %26+26)%26;
+            const ubicacion = (asciiNum - 97 + movimientos);
+            const formula = ubicacion %26 + 97;
+            encriptado+= String.fromCharCode(formula);
+          }
+          else {
+              encriptado+= String.fromCharCode(asciiNum)
+            };
+          }
+          return encriptado;
+       };
+       function textoDescodificado(mensaje,movimientos){
+         let Desencriptado="";
+       for (let i=0;i<mensaje.length;i++){
+        const asciiNum = mensaje[i].charCodeAt();
+          if  (asciiNum >=65 && asciiNum <=90 ) {
+            movimientos =(movimientos %26+26)%26;
+            const ubicacion = (asciiNum - 65 - movimientos);
+            const formula = ubicacion %26 + 65;
+            Desencriptado+= String.fromCharCode(formula);
+          } /*else if (asciiNum >=91 && asciiNum <=96 ) { // colocar rango de letras
+            movimientos =(movimientos % 6 + 6) % 6;
+            const ubicacion = (asciiNum - 91 - movimientos);
+            const formula = ubicacion %6 + 91;
+            Desencriptado+= String.fromCharCode(formula);
+          } else if (asciiNum >=97 && asciiNum <=122 ) { // colocar rango de letras
+            movimientos =(movimientos %26+26)%26;
+            const ubicacion = (asciiNum - 97 - movimientos);
+            const formula = ubicacion %26 + 97;
+            Desencriptado+= String.fromCharCode(formula);
+          }
+          else {
+              Desencriptado+= String.fromCharCode(asciiNum)
+            };
+          }
+          return Desencriptado;
+       }*/

docs/style.css

-Original file line number
+Diff line change
@@ -0,0 +1,59 @@
+    body {
+      font-family: "Source Code Pro", monospace;
+      margin: auto;
+      background-color: ghostwhite;
+    }
+    header {
+      padding: 30px;
+      text-align: center;
+      color: rgb(12, 6, 6);
+    }
+    .contenedor {
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .contenedor-mensaje,
+    .contenedor-resultado,
+    .contenedor-botones h3 {
+      text-align: center;
+    }
+    .contenedor-botones,
+    .contenedor-botones-dezplasamiento {
+      text-align: center;
+    }
+    .contenedor-mensaje,
+    .contenedor-resultado {
+      padding-left: 0px;
+      background-color: rgb(80 198 94);
+      border-color: rgb(80 171 198);
+      border-style: groove;
+      border-radius: 10px;
+      position: relative;
+      margin-left: 200px;
+      margin-right: 200px;
+    }
+    #cifrar:hover {
+      opacity: 0.7;
+      background-color: lawngreen;
+    }
+    #descifrar:hover {
+      opacity: 0.7;
+      background-color: lawngreen;
+    }
+    textarea {
+      background-color: rgb(80 198 94);
+    }
+    .contenedor-2 {
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
+    .contenedor-2 p {
+      font-size: 5px;
+    }

foto-1.jpg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

papel-2.jpeg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Final #1

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Final #1

Are you sure you want to change the base?

Uh oh!

Final #1

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!