Challenge Encriptador JS + HTML + CSS

Desarrollo de lógica js, estructura html, comenzando estilo.

005_Git_y_github/README.md

@@ -3,7 +3,7 @@
 ¿Que son **Git** y **Github**?
 [link](https://www.aluracursos.com/blog/git-y-github-que-son-y-primeros-pasos).
 
-Video para [inicirse](https://www.youtube.com/watch?v=-LmFK6skG7s) en git.
+Video para [iniacirse](https://www.youtube.com/watch?v=-LmFK6skG7s) en git.
 
 ## Controla y comparte tu código
 

006_challenge_encriptador/README.md

@@ -0,0 +1,161 @@
+# Challenge Encriptador
+
+¿Qué son los Alura Challenges?
+
+Es una forma de implementar el Challenge Based Learning, es decir, aprendizaje
+basado en desafíos que Apple ayudó a crear. Por medio de estos podrás desafiarte
+a resolver un problema real.
+
+## Challenge One
+
+- [link](https://www.aluracursos.com/challenges/challenge-one-logica)
+- [video](https://youtu.be/BLgio_oPkLw)
+
+El Challenge ONE: Principiante en programación, fue ideado para que coloques en
+práctica los conocimientos que vas adquiriendo mientras realizas los cursos de
+la ruta de aprendizaje.
+
+El desafío está dividido en Sprint
+
+[Sprint 01](https://www.aluracursos.com/challenges/challenge-one-logica/sprint01-construye-un-encriptador-texto-con-javascript)
+
+```txt
+Construye un encriptador de texto con Javascript La Sprint tiene
+una duración de 6 semanas, este es el tiempo sugerido para la realización de
+este desafío y durante este periodo contarás con Live de Mentoría donde nuestros
+instructores resolverán en vivo las dudas referentes al Challenge.
+
+La realización del Challenge es una forma de demostrar lo que has aprendido y
+finalmente, podrás publicar tus proyectos, e ir construyendo tu portafolio.
+
+Todo esto mientras comentas y ayudas en proyectos de otros colegas del programa ONE.
+```
+
+Links Necesarios/Utiles:
+
+- [Trello](https://trello.com/b/WTdfcewC/encriptador-de-texto-alura-challenges-oracle-one)
+Board.
+- [Discord](https://discord.gg/2E5mQEat)
+- Modelo [Figma](https://www.figma.com/file/trP3p5nEh7XUyB3n2bomjP/Alura-Challenge---Desaf%C3%ADo-1---L%C3%B3gica)
+- Figma en el desarrollo [Front End](https://youtu.be/UuAX5azcvDQ)
+
+
+### Instrucciones
+
+Crear una aplicación que encripta textos, así podrás intercambiar mensajes
+secretos con otras personas que sepan el secreto de la encriptación utilizada.
+
+Las "llaves" de encriptación que utilizaremos son las siguientes:
+
+| Letra | Codificación |
+| - | - |
+| `e` | `enter` |
+| `i` | `imes` |
+| `a` | `ai` |
+| `o` | `ober` |
+| `u` | `ufat` |
+
+Requisitos:
+
+- Debe funcionar solo con letras minúsculas.
+- No deben ser utilizados letras con acentos ni caracteres especiales.
+- Debe ser posible convertir una palabra para la versión encriptada también
+devolver una palabra encriptada para su versión original.
+
+Por ejemplo:
+
+```txt
+"gato" => "gaitober"
+gaitober" => "gato"
+```
+
+La página debe tener campos para inserción del texto que será encriptado o
+desencriptado, y el usuario debe poder escoger entre as dos opciones.
+
+El resultado debe ser mostrado en la pantalla.
+
+Extras:
+
+- Un botón que copie el texto **encriptado/desencriptado** para la sección de
+transferencia, es decir, que tenga la misma funcionalidad del `Ctrl`+`C` o de
+la opción `copiar` del menú de las aplicaciones.
+- Cuatro semanas para desarrollar el proyecto, trabajando con el sistema ágil
+de desarrollo, utilizando el **Trello** de la siguiente forma:
+    - La columna **Listos** para iniciar presenta las tarjetas con elementos que
+    aun no fueron desarrollados.
+    - En la columna **En Desarrollo** estarán los elementos que estés desarrollando
+    en el momento. Al iniciar una tarea, podrás mover la tarjeta que contiene
+    dicha tarea para esta columna.
+    - En la columna **Pausado** estarán los elementos que comenzaste a desarrollar,
+    pero necesitaste parar por algún motivo.
+    - Por fin, en la columna **Concluido** estarán los elementos ya concluidos.
+- Pie de página con iformación/links del creador.
+
+### Modelo Figma
+
+![img](./html/imagenes/modelo_figma.png)
+
+#### Desencripta el mensaje secreto
+
+```txt
+fenterlimescimesdaidenters poberr enternfrenterntair enterstenter
+dentersaifimesober y haibenterrlober cobernclufatimesdober cobern enterximestober!
+```
+
+## Proyecto
+
+- [Javascript](./html/encriptador.js)
+- [Home](./html/index.html)
+- [Estilo](./html/style.css)
+- [Repositorio](https://github.com/DevFzn/Oracle_One-Alura_Latam/tree/master/006_challenge_encriptador/README.md)
+- [Sitio](https://github.com...)
+
+### Sitio web
+
+Lista de tareas challenge encriptador
+
+- [x] Github
+    - [x] Crear repositorio en GitHub y trabajar con control de versiones.
+- [x] Título de su sitio web
+- [x] Campo para el texto que va a ser encriptado/desencriptado
+- [x] Un botón para encriptar y otro para desencriptar
+    - [x] Crear función
+        - [x] Desarrollar la lógica de encriptación
+        - [x] Desarrollar la lógica de desencriptación
+    - [x] Conectar función a su respectivo botón en el HTML
+    - [x] Capturar el texto escrito en el campo del input del HTML
+- [x] Área para mostrar el texto encriptado/desencriptado:
+    Ocultar y mostrar diferentes elementos dependiendo del estado, comenzando
+    con una imagen que debe ser substituida por el texto encriptado/desencriptado.
+- [ ] Trabajar estilos
+
+#### Recursos
+
+- Modelo en
+[Figma](https://www.figma.com/file/trP3p5nEh7XUyB3n2bomjP/Alura-Challenge---Desaf%C3%ADo-1---L%C3%B3gica)
+- HTML - [input](https://developer.mozilla.org/es/docs/Web/HTML/Element/input)
+- HTML - [textarea](https://developer.mozilla.org/es/docs/Web/HTML/Element/textarea)
+- Imagen [input](./html/imagenes/input.png) trello.
+- HTML - DOM [Style display](https://www.w3schools.com/jsref/prop_style_display.asp)
+Property
+- Imagen [1](./html/imagenes/1.png) area de texto des/encriptado
+- Imagen [2](./html/imagenes/2.png) area de texto des/encriptado
+- Imagen boton [encriptar](./html/imagenes/boton-enc.png)
+- Imagen boton [desencriptar](./html/imagenes/)
+- Interact with the [clipboard](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard)
+- [Clipboard](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) API
+- Configuración de [Git](https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Configurando-Git-por-primera-vez)
+- Subir proyecto a [GitHub](https://www.youtube.com/watch?v=bhKkeOMysuw)
+- Crear Github [page](https://developer.mozilla.org/es/docs/Learn/Common_questions/Tools_and_setup/Using_Github_pages)
+
+## Entrega
+
+Checklist para entrega del proyecto
+
+- [ ] Publica en GitHub Pages
+- [ ] Agregar el #challengeonecodificador5 en Github
+- [ ] Rellenar formulario de
+[envío](https://lp.alura.com.br/alura-latam-entrega-challenge-one-esp) con el
+enlace a la GitHub Page del proyecto
+- [ ] Revisar e-mail y obtén tu Badge
+- [ ] Publica un video y/o tu proyecto en Linkedin

006_challenge_encriptador/html/encriptador.js

@@ -0,0 +1,56 @@
+const area_mensaje = document.getElementById("frase");
+const area_info = document.getElementById("resultado");
+const boton_encrip = document.getElementById("btn-encriptar");
+const boton_desencrip = document.getElementById("btn-desencriptar");
+const boton_copiar = document.getElementById("btn-copiar");
+
+var dict = { "e" : "enter", "i" : "imes", "a" : "ai", "o" : "ober", "u" : "ufat" };
+var largo_dict = Object.keys(dict).length;
+
+function imprimir(frase){
+    document.write(frase+"<br>");
+}
+
+function encriptar(){
+    let frase = area_mensaje.value;
+    if (frase != ""){
+        let arr_frase = Array.from(frase);
+        let resultado = []
+        for (let index=0; index < arr_frase.length; index++) {
+            let letra = arr_frase[index];
+            if (dict[letra] !== undefined) {
+                resultado += dict[letra];
+            } else {
+                resultado += letra;
+            }
+        }
+        area_info.innerHTML = resultado;
+        area_mensaje.value = "";
+        area_mensaje.focus();
+    }
+}
+
+function desencriptar(){
+    let frase = area_mensaje.value;
+    if (frase != ""){
+        for (let key in dict) {
+            let busca = dict[key];
+            frase = frase.replaceAll(busca,key);
+        }
+        area_info.innerHTML = frase;
+        area_mensaje.value = "";
+        area_mensaje.focus();
+    }
+}
+
+function copiar_texto(){
+    let frase = area_info.value;
+    if (frase != ""){
+        navigator.clipboard.writeText(frase);
+    }
+    area_mensaje.focus();
+}
+
+boton_encrip.addEventListener("click", encriptar);
+boton_desencrip.addEventListener("click", desencriptar);
+boton_copiar.addEventListener("click", copiar_texto);

006_challenge_encriptador/html/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width"/>
+        <link rel="stylesheet" href="./reset.css"/>
+        <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=Press+Start+2P&display=swap"
+        rel="stylesheet"/>
+        <title>Encriptador de mensajes</title>
+    </head>
+    <body>
+        <main>
+            <section id="mensaje" style="border-radius: 25px; padding: 10px; background: magenta;">
+                <div>
+                    <img src="./imagenes/logo.png"/>
+                </div>
+                <div>
+                    <label for="frase">Ingresa tu mensaje</label>
+                </div>
+                <div>
+                    <textarea id="frase" cols="70" rows="10" class="input-frase"
+                    required placeholder="Ingresa el texto aquí" autofocus></textarea>
+                </div>
+                <div id="botones">
+                    <img src="./imagenes/exclamacion.png"/>
+                    <p>Solo letras minúsculas y sin acentos</p>
+                    <!--<small>Solo letras minúsculas y sin acentos</small>-->
+                    <button id="btn-encriptar">Encriptar</button>
+                    <button id="btn-desencriptar">Desencriptar</button>
+                </div>
+            </section>
+            <section id="info" style="border-radius: 25px; padding: 10px; background: magenta;">
+                <div>
+                    <img src="./imagenes/mono.png">
+                    <h2>Ningún mensaje fue encontrado</h2>
+                    <p>Ingresa el texto que deseas encriptar o desencriptar.</p>
+                </div>
+                <div style="display: block;">
+                    <textarea cols="29" rows="15" readonly id="resultado"></textarea>
+                    <button id="btn-copiar">Copiar</button>
+                </div>
+            </section>
+        </main>
+        <footer>
+            <a href="https://github.com/DevFzn"><img src="./imagenes/github.png" width="5%"/></a>
+        </footer>
+        <script src="./encriptador.js"></script>
+    </body>
+</html>

006_challenge_encriptador/html/reset.css

@@ -0,0 +1,52 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+
+   *PROBAR* version fork actual:
+   https://github.com/elad2412/the-new-css-reset
+   https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

README.md

@@ -17,3 +17,4 @@ para certificación ORACLE. Notas, apuntes, resumenes y actividades.
 primoridiales en programación con Javascript.
 - Crea tus primeras [páginas Web](./004_primeras_paginas/README.md), HTML5 y CSS3.
 - [Git](./005_Git_y_github/README.md) y Github.
+- Desafío [Encriptador](./006_challenge_encriptador/README.md).