diff --git a/005_Git_y_github/README.md b/005_Git_y_github/README.md index 0335586..9e300a8 100644 --- a/005_Git_y_github/README.md +++ b/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 diff --git a/006_challenge_encriptador/README.md b/006_challenge_encriptador/README.md new file mode 100644 index 0000000..fee15bf --- /dev/null +++ b/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 diff --git a/006_challenge_encriptador/html/encriptador.js b/006_challenge_encriptador/html/encriptador.js new file mode 100644 index 0000000..7e652fd --- /dev/null +++ b/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+"
"); +} + +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); diff --git a/006_challenge_encriptador/html/imagenes/1.png b/006_challenge_encriptador/html/imagenes/1.png new file mode 100644 index 0000000..91b08fe Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/1.png differ diff --git a/006_challenge_encriptador/html/imagenes/2.png b/006_challenge_encriptador/html/imagenes/2.png new file mode 100644 index 0000000..d35a0f3 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/2.png differ diff --git a/006_challenge_encriptador/html/imagenes/boton-copiar.png b/006_challenge_encriptador/html/imagenes/boton-copiar.png new file mode 100644 index 0000000..33b574c Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/boton-copiar.png differ diff --git a/006_challenge_encriptador/html/imagenes/boton-des.png b/006_challenge_encriptador/html/imagenes/boton-des.png new file mode 100644 index 0000000..b2d60c5 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/boton-des.png differ diff --git a/006_challenge_encriptador/html/imagenes/boton-enc.png b/006_challenge_encriptador/html/imagenes/boton-enc.png new file mode 100644 index 0000000..3c25849 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/boton-enc.png differ diff --git a/006_challenge_encriptador/html/imagenes/exclamacion.png b/006_challenge_encriptador/html/imagenes/exclamacion.png new file mode 100644 index 0000000..8efd336 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/exclamacion.png differ diff --git a/006_challenge_encriptador/html/imagenes/github.png b/006_challenge_encriptador/html/imagenes/github.png new file mode 100644 index 0000000..6cb3b70 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/github.png differ diff --git a/006_challenge_encriptador/html/imagenes/input.png b/006_challenge_encriptador/html/imagenes/input.png new file mode 100644 index 0000000..574a012 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/input.png differ diff --git a/006_challenge_encriptador/html/imagenes/logo.png b/006_challenge_encriptador/html/imagenes/logo.png new file mode 100644 index 0000000..2d1c212 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/logo.png differ diff --git a/006_challenge_encriptador/html/imagenes/modelo_figma.png b/006_challenge_encriptador/html/imagenes/modelo_figma.png new file mode 100644 index 0000000..673a33e Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/modelo_figma.png differ diff --git a/006_challenge_encriptador/html/imagenes/mono.png b/006_challenge_encriptador/html/imagenes/mono.png new file mode 100644 index 0000000..e7692b9 Binary files /dev/null and b/006_challenge_encriptador/html/imagenes/mono.png differ diff --git a/006_challenge_encriptador/html/index.html b/006_challenge_encriptador/html/index.html new file mode 100644 index 0000000..5767afe --- /dev/null +++ b/006_challenge_encriptador/html/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + + Encriptador de mensajes + + +
+
+
+ +
+
+ +
+
+ +
+
+ +

Solo letras minúsculas y sin acentos

+ + + +
+
+
+
+ +

Ningún mensaje fue encontrado

+

Ingresa el texto que deseas encriptar o desencriptar.

+
+
+ + +
+
+
+ + + + diff --git a/006_challenge_encriptador/html/reset.css b/006_challenge_encriptador/html/reset.css new file mode 100644 index 0000000..3bc676a --- /dev/null +++ b/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; +} diff --git a/006_challenge_encriptador/html/style.css b/006_challenge_encriptador/html/style.css new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 9bde6d6..3eb167c 100644 --- a/README.md +++ b/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).