Password Generator 🔐

A beautifully designed, feature-rich password generator built with React and Tailwind CSS. It provides a stunning, modern glassmorphism UI with advanced customization options for creating secure and personalized passwords.

✨ Features

• Modern Glassmorphism UI: A visually striking, premium design with background blur, animated gradient elements, and a responsive layout.
• Custom Text Inclusion: Allows users to include a custom word or text (e.g., a name or memorable word) directly within the generated password.
• Granular Character Controls:
  • Toggle Lowercase letters (a-z)
  • Toggle Uppercase letters (A-Z)
  • Toggle Numbers (0-9)
  • Toggle Symbols (!@#$)
• Interactive Length Slider: Adjust password length dynamically between 6 and 50 characters.
• Smart Copy Functionality: One-click copy with a dynamic "Success!" toast popup animation for immediate user feedback.
• Real-time Generation: Passwords update instantly as you change settings or type custom text.

🚀 Tech Stack

• Frontend Framework: React.js (Hooks: useState, useEffect, useCallback, useRef)
• Styling: Tailwind CSS (Utility-first CSS framework for custom gradients, glass effects, and positioning)
• Build Tool: Vite (For fast, modern local development)

📦 Installation & Setup

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd 05passwordGenerator

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open in Browser: Navigate to http://localhost:5173 to see the app running.

💡 How it Works

The core of the application uses React's useCallback to memoize the passwordGenerator function, ensuring it only re-runs when specific dependencies change (length, allowed characters, custom input). When "Include Custom Text" is used, the app securely interweaves your text within the randomly generated string without breaking the requested length, providing both personalization and security.

🎨 UI/UX Details

• Gradients & Blurs: Uses bg-gradient-to-br alongside backdrop-blur-xl to create depth.
• Feedback Loops: The copy button triggers a temporary state change to show a bouncy "Success!" badge, ensuring the user knows their action was completed.
• Accessibility: Uses proper HTML labels and input bindings for screen readers.

---

Built with ❤️ for secure and beautiful web experiences.