🔐 Random Password Generator

A simple and interactive password generator built with HTML, CSS, and JavaScript. This app generates secure random passwords and allows users to copy them instantly to the clipboard.

Created as part of the Scrimba Fullstack Developer Path, focusing on JavaScript logic, DOM manipulation, and user interaction.

🎥 Video Preview

(Insert your video preview here)

🛠 Technologies Used

• HTML
• CSS
• JavaScript

✨ Features

• Random Password Generation – Generates two secure passwords instantly
• Custom Character Set – Includes uppercase, lowercase, numbers, and symbols
• Copy to Clipboard – Click on a password to copy it بسهولة
• Clean UI Design – Simple and modern interface with clear focus on usability
• Responsive Layout (basic) – Uses flexible layout for different screen sizes

🧠 What I Learned

While building this project, I strengthened my understanding of:

• JavaScript Functions – Creating reusable logic for generating passwords
• Randomization – Using Math.random() to generate unpredictable results
• DOM Manipulation – Updating UI elements dynamically with JavaScript
• Event Handling – Handling button clicks and user interactions
• Clipboard API – Copying text programmatically using navigator.clipboard
• Arrays – Working with character sets to build random strings

⚙️ The Process

I started by setting up the HTML structure and styling the interface using CSS to create a clean layout.

Next, I implemented the password generation logic in JavaScript using a predefined character array and random selection.

I then connected the logic to the UI using event listeners, allowing users to generate and copy passwords with a click.

Finally, I added clipboard functionality to improve usability and make the app more practical.

💭 Possible Improvements

If I revisit this project, I could improve it by:

• Allowing users to customize password length
• Adding options to include/exclude symbols or numbers
• Providing visual feedback when a password is copied (instead of alert)
• Improving responsiveness for smaller screens
• Adding strength indicators for generated passwords

🚀 Running the Project

1. Clone the repository
2. Open the project folder
3. Open index.html in your browser

---

This project helped strengthen my understanding of JavaScript fundamentals, randomness, and building interactive web applications.