🔒 Generador de Contraseñas

Este generador de contraseñas han sido inspirado por el Password Generator App challenge de Frontend Mentor y ha sido desarrollado por Cristina Correa.

👀 Vista Previa

➡️ Demo desplegada en GitHub Pages: Haz click aquí

Vista del generador de contraseñas

Funcionalidades:

1️⃣ Gestión de un Rango Dinámico:

• El sistema permite la gestión eficiente de un rango dinámico para adaptarse a diversas necesidades y requisitos de seguridad.

2️⃣ Generación de Contraseñas Personalizadas:

• Define la longitud de la contraseña según la necesidad.
• Especifica si la contraseña debe contener letras mayúsculas, minúsculas, números y/o símbolos para una personalización precisa.

3️⃣ Copiado Rápido de Contraseña:

• Facilita el proceso al proporcionar la opción de copiar la contraseña generada con un simple clic en el botón correspondiente.

4️⃣ Evaluación de Seguridad:

• Ofrece una evaluación de la seguridad de las contraseñas generadas.
• Clasifica la fortaleza de las contraseñas desde muy débil hasta fuerte, proporcionando una indicación visual de la robustez de cada contraseña.

🌱 Características

• Interfaz: Diseño sencillo y minimalista.
• Generación de contraseñas:
  • Crea contraseñas con opciones personalizables: letras mayúsculas, minúsculas, símbolos o números.
  • Ajusta la longitud de la contraseña según la preferencia del usuario.
• Copiar directamente: Un clic en el ícono de copiar permite una fácil duplicación de la contraseña.
• Seguridad: Evalúa la fortaleza de la contraseña con criterios de bajo, medio y alto nivel de seguridad.

🛠️ Tecnologías Utilizadas

• HTML
• CSS
• JavaScript

🔎💡 Información

Important

• Este es un proyecto de nivel principiante-intermedio. No se requieren conocimientos muy avanzados de HTML, CSS o JavaScript, pero sí que es necesario saber un poco sobre asincronía.
• Está desarrollado utilizando JavaScript Vanilla, así que no se usa ningún framework. Sin embargo, si estás buscando un poco más de desafío, ¡siéntete libre de explorar la posibilidad de integrar un framework!
• Nivel de dificultad del proyecto: 🔴🔴🔴⭕⭕⭕⭕⭕⭕⭕ (2,5 sobre 10)

Tip

A la hora de desarrollar el proyecto, te pueden venir bien los siguientes recursos:

• Password Generator App challenge de Frontend Mentor
• Password Generator de Frontend Projects
• HTML:
  • MDN: WAI-ARIA basics
  • MDN: "aria-label" attribute
  • MDN: WAI-ARIA Roles
• CSS:
  • Manz.Dev Lenguaje CSS
  • Stack Overflow: Display a footer
  • MDN: "::-moz-range-thumb" pseudo-element
  • MDN: "::-webkit-slider-thumb" pseudo-element
  • MDN: "::-webkit-slider-runnable-track" pseudo-element
  • W3Schools How TO - Custom Checkbox
  • MDN: "outline"
• JavaScript:
  • Manz.Dev Lenguaje Javascript
  • JavaScript MDN Documentation
  • How to Create Copy to Clipboard Button
  • W3Schools How TO - Copy Text to Clipboard
  • W3Schools - oninput Event
  • Creating a custom CSS range slider with JavaScript
  • MDN: "CSSStyleDeclaration: setProperty() method"
• Google Fonts:
  • How to use Google Fonts
  • FAQs about Google Fonts
• Font Awesome
  • Font Awesome Get Started
  • Font Awesome Documentation

📓Cómo Usar

1. Descarga o clona este repositorio en tu máquina local.
2. Abre el archivo index.html en tu navegador web.

¡Y eso es todo! Ahora cualquier persona puede usar el generador de contraseñas.

✨ Contribuciones

¡Las contribuciones son bienvenidas! Si deseas mejorar el generador de contraseñas existente, como agregar más contenido o mejorar el diseño, no dudes en enviar tus pull requests. También puedes sugerir nuevas funcionalidades o brindar retroalimentación para hacer que este proyecto sea aún mejor.

🎯 Propósito del Proyecto

Este proyecto tiene como objetivo principal facilitar mi aprendizaje en tecnologías clave para el desarrollo web.

➡️ Licencia

Este proyecto está licenciado bajo MIT License.