Password Generator

A fully functional password generator with a dark, minimal card UI. Users can control password length via a slider, toggle character types (uppercase, lowercase, numbers, symbols), and generate a cryptographically secure random password with one click. A 4-bar strength indicator updates live based on length and character variety. The generated password can be copied to the clipboard instantly with a toast notification and button feedback. Passwords auto-regenerate when options change and are built using window.crypto.getRandomValues() with a Fisher-Yates shuffle to guarantee randomness and character-type diversity.

• Structuring a single-page UI with semantic HTML5 and ARIA accessibility attributes
• Styling a dark SaaS UI with CSS custom properties and solid color design tokens
• Using window.crypto.getRandomValues() for cryptographically secure random numbers
• Building a character pool dynamically from selected options
• Guaranteeing at least one character from each selected type before random fill
• Implementing the Fisher-Yates shuffle to randomize character positions
• Reading and responding to range input (slider) events for dynamic length display
• Handling checkbox state to control character set options
• Copying text to clipboard with the Clipboard API and an execCommand fallback
• Building a toast notification system with CSS transitions
• Calculating password strength from length and character variety heuristics
• Animating UI elements with CSS keyframes (flash, fadeInUp)
• Responsive layout with CSS Grid and media queries for mobile screens
• Writing clean, readable, and beginner-friendly vanilla JavaScript