A single-page web application that generates secure, customizable passwords based on user-defined criteria. Built using React, JavaScript (ES6+), and styled using Tailwind CSS v4.
This project was developed to practice React state management patterns, performance optimization hooks, and browser API integration.
- State Synchronization (
useState): Manages real-time configuration tracking for password length, boolean toggles for character sets, and the final output string payload. - Logic Memoization (
useCallback): Caches the mathematical password generation loop in memory. This optimizes execution by preventing redundant function re-creations when unrelated components re-render. - Side-Effect Management (
useEffect): Automatically synchronizes the password generation cycle with the application state, triggering a recalculation immediately whenever the user adjusts the length slider or flips a checkbox toggle. - DOM Direct Referencing (
useRef): Links directly to the text input field node, allowing the application to trigger instantaneous text selection feedback when the user interacts with the interface. - System API Integration (
window.navigator.clipboard): Connects the React sandboxed environment to the secure Web Clipboard API, allowing string payloads to be written directly to the host operating system's copy-paste buffer.
- Adjustable Length: Interactive slider range supporting password configurations from 6 to 100 characters.
- Character Set Modifiers: Conditional string builders that include or exclude numeric characters (
0-9) and special symbols (!@#$%^&*?/:;) based on component state. - Clipboard Integration: One-click copy functionality that highlights the generated text and saves it straight to the system clipboard.
- Responsive Layout: Fluid layout built entirely with Tailwind utility-first classes, optimized for standard mobile and desktop viewports.
To run this project locally, execute the following commands in your terminal:
- Clone the Repository:
git clone [https://github.com/Anusha614/password-generator.git](https://github.com/Anusha614/password-generator.git) cd password-generator
.