Encriptador de texto realizado para el Challenge ONE Front End de Alura-Latam.
Esta página web permite encriptar y desencriptar un texto, además de copiarlo al portapapeles.
La encriptación funciona de ida y vuelta usando las claves:
🔹 La letra "a" es convertida a "ai"
🔹 La letra "e" es convertida a "enter"
🔹 La letra "i" es convertida a "imes"
🔹 La letra "o" es convertida a "ober"
🔹 La letra "u" es convertida a "ufat"
✔️ Debe funcionar solo con letras minúsculas.
✔️ No deben ser utilizados letras con acentos ni caracteres especiales.
✔️ La página debe tener campos para la inserción del texto que será encriptado o desencriptado.
✔️ El usuario debe poder escoger entre las dos opciones: encriptar o desencriptar.
✔️ El resultado debe ser mostrado en la pantalla.
Un botón que copie el texto encriptado/desencriptado para la sección de transferencia, o sea que tenga la misma funcionalidad del ctrl+C o de la opción "copiar" del menú de las aplicaciones.
Mantiene el branding y el diseño propuesto por Alura Latam con la intención de traducir lo más fielmente posible el prototipo en Figma y mantiene las funcionalidades descriptas más arriba.
a. Se tomó el diseño y el branding base propuesto por Alura Latam y se cambió la distribución de los elementos manteniendo las funcionalidades principales de encriptar/desencriptar/copiar mensaje.
b. Se agregó un switch para modo claro / modo oscuro.
c. Se agregó un botón para intercambiar el texto entre ambas cajas.
a. Se propone un nuevo diseño basado en la tendencia neo-brutalism, se mantuvo la distribución de los elementos de la versión 2 y las funcionalidades principales de encriptar/desencriptar/copiar mensaje.
b. Se agregó un switch para modo claro / modo oscuro.
c. Se agregó un botón para limpiar las cajas.
d. A modo de mantener la constinuidad con el primer diseño de Alura, se actualizó la imagen a los colores y diseño general.
Versión v.1 (original):
◆
◆
◆
◆
Versión v.2 (personalizada):
◆
◆
◆
◆
Versión v.3 (personalizada):
◆
◆
◆
◆
El proyecto fue desarrollado por Vanina Denegri en base a los diseños provistos por Alura-Latam.
■
■
■
Links útiles y utilizados para realizar este README:
●
●
●
●
Si te gustó mi proyecto podés dejarme alguna estrellita ⭐
Mandarme algún mensaje 📧
O seguirme en redes para comentar y compartir 🔔
Dame los reconocimientos correspondientes si es necesario 💝
Este es uno de mis primeros "grandes" proyectos. Le puse mucho amor y mucho tiempo de dedicación. Aún me quedan cosas por aprender, mejorar mis "buenas prácticas", trabajar mejor en el responsive, utilizar mejor GitHub, etc., etc., etc. Por favor, miralo con el mismo amor que yo y si tenés algún comentario para ayudarme a crecer lo recibiré atentamente siempre y cuando venga con respeto.