1
0

Challenge Encriptador JS + HTML + CSS

Desarrollo de lógica js, estructura html, comenzando estilo.
This commit is contained in:
devfzn 2023-04-16 23:41:52 -04:00
parent 2f9a2b1e19
commit 23f825150b
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
18 changed files with 323 additions and 1 deletions

View File

@ -3,7 +3,7 @@
¿Que son **Git** y **Github**? ¿Que son **Git** y **Github**?
[link](https://www.aluracursos.com/blog/git-y-github-que-son-y-primeros-pasos). [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 ## Controla y comparte tu código

View File

@ -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

View File

@ -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);

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 420 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -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>

View File

@ -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;
}

View File

View File

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