apu52 · PankajSingh34 · Feb 3, 2026 · Feb 3, 2026
diff --git a/Projects/Password_Generator/README.md b/Projects/Password_Generator/README.md
@@ -0,0 +1,120 @@
+# 🔐 Password Generator
+
+A modern, secure, and user-friendly password generator web application built with vanilla HTML, CSS, and JavaScript.
+
+## 📸 Preview
+
+![Password Generator Preview](screenshot.png)
+
+## ✨ Features
+
+- **Customizable Password Length**: Generate passwords between 8 to 32 characters
+- **Multiple Character Types**:
+  - Uppercase letters (A-Z)
+  - Lowercase letters (a-z)
+  - Numbers (0-9)
+  - Symbols (!@#$%^&*)
+- **Real-time Strength Indicator**: Visual feedback on password strength
+- **One-Click Copy**: Easy copy to clipboard functionality
+- **Responsive Design**: Works perfectly on all devices
+- **Beautiful UI**: Modern gradient design with smooth animations
+- **Secure Generation**: Uses cryptographically secure random generation
+
+## 🚀 Technologies Used
+
+- **HTML5**: Semantic markup
+- **CSS3**: Modern styling with flexbox, gradients, and animations
+- **JavaScript (ES6+)**: Vanilla JavaScript for functionality
+- **Clipboard API**: Modern clipboard access
+
+## 🎯 How to Use
+
+1. **Adjust Password Length**: Use the slider to set your desired password length (8-32 characters)
+2. **Select Character Types**: Check/uncheck the boxes to include:
+   - Uppercase letters
+   - Lowercase letters
+   - Numbers
+   - Symbols
+3. **Generate Password**: Click the "Generate Password" button
+4. **Copy to Clipboard**: Click the copy icon to copy the password
+5. **Check Strength**: View the password strength indicator (Weak, Medium, Strong)
+
+## 📦 Installation
+
+1. Clone or download this project
+2. Open `index.html` in your web browser
+3. Start generating secure passwords!
+
+```bash
+# Clone the repository
+git clone <repository-url>
+
+# Navigate to the project folder
+cd Password_Generator
+
+# Open in browser
+open index.html
+```
+
+## 💻 Code Structure
+
+```
+Password_Generator/
+│
+├── index.html      # Main HTML structure
+├── style.css       # Styling and animations
+├── script.js       # Password generation logic
+└── README.md       # Documentation
+```
+
+## 🔒 Security Features
+
+- Uses `Math.random()` for generating random characters
+- Ensures all selected character types are included in the password
+- No password is stored or transmitted anywhere
+- All processing happens locally in the browser
+
+## 🎨 Customization
+
+You can easily customize the appearance by modifying the CSS variables:
+
+```css
+/* Main gradient colors */
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+/* Strength colors */
+.strength-weak { background: #ef4444; }
+.strength-medium { background: #f59e0b; }
+.strength-strong { background: #10b981; }
+```
+
+## 🌟 Future Enhancements
+
+- [ ] Add password history (optional, with user consent)
+- [ ] Pronounceable password option
+- [ ] Password strength checker for user-entered passwords
+- [ ] Dark mode toggle
+- [ ] Export passwords to file
+- [ ] Password blacklist checker
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
+
+## 📝 License
+
+This project is open source and available under the [MIT License](../LICENSE).
+
+## 👨‍💻 Author
+
+Created with ❤️ for the METAVERSE project
+
+## 🙏 Acknowledgments
+
+- Icons from [Feather Icons](https://feathericons.com/)
+- Inspired by modern password generator tools
+- Part of the METAVERSE Front-End Playground
+
+---
+
+**Note**: For maximum security, always use unique passwords for different accounts and consider using a password manager to store them securely.
diff --git a/Projects/Password_Generator/index.html b/Projects/Password_Generator/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Password Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="password-box">
+            <h1>🔐 Password Generator</h1>
+            <p class="description">Generate secure and random passwords instantly!</p>
+
+            <div class="display-box">
+                <input type="text" id="password" placeholder="Your secure password" readonly>
+                <button id="copy-btn" class="copy-btn" title="Copy to clipboard">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="settings">
+                <div class="setting-item">
+                    <label for="length">Password Length: <span id="length-value">16</span></label>
+                    <input type="range" id="length" min="8" max="32" value="16">
+                </div>
+
+                <div class="setting-item checkbox-item">
+                    <input type="checkbox" id="uppercase" checked>
+                    <label for="uppercase">Include Uppercase (A-Z)</label>
+                </div>
+
+                <div class="setting-item checkbox-item">
+                    <input type="checkbox" id="lowercase" checked>
+                    <label for="lowercase">Include Lowercase (a-z)</label>
+                </div>
+
+                <div class="setting-item checkbox-item">
+                    <input type="checkbox" id="numbers" checked>
+                    <label for="numbers">Include Numbers (0-9)</label>
+                </div>
+
+                <div class="setting-item checkbox-item">
+                    <input type="checkbox" id="symbols" checked>
+                    <label for="symbols">Include Symbols (!@#$%^&*)</label>
+                </div>
+            </div>
+
+            <div class="strength-indicator">
+                <span>Password Strength:</span>
+                <div class="strength-bar">
+                    <div id="strength-level" class="strength-level"></div>
+                </div>
+                <span id="strength-text">Strong</span>
+            </div>
+
+            <button id="generate-btn" class="generate-btn">Generate Password</button>
+
+            <div id="notification" class="notification">Password copied to clipboard!</div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/Password_Generator/script.js b/Projects/Password_Generator/script.js
@@ -0,0 +1,193 @@
+// Character sets for password generation
+const UPPERCASE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const LOWERCASE = 'abcdefghijklmnopqrstuvwxyz';
+const NUMBERS = '0123456789';
+const SYMBOLS = '!@#$%^&*()_+-=[]{}|;:,.<>?';
+
+// DOM Elements
+const passwordEl = document.getElementById('password');
+const lengthEl = document.getElementById('length');
+const lengthValueEl = document.getElementById('length-value');
+const uppercaseEl = document.getElementById('uppercase');
+const lowercaseEl = document.getElementById('lowercase');
+const numbersEl = document.getElementById('numbers');
+const symbolsEl = document.getElementById('symbols');
+const generateBtn = document.getElementById('generate-btn');
+const copyBtn = document.getElementById('copy-btn');
+const strengthLevelEl = document.getElementById('strength-level');
+const strengthTextEl = document.getElementById('strength-text');
+const notificationEl = document.getElementById('notification');
+
+// Update length value display
+lengthEl.addEventListener('input', (e) => {
+    lengthValueEl.textContent = e.target.value;
+});
+
+// Generate password on button click
+generateBtn.addEventListener('click', generatePassword);
+
+// Copy to clipboard
+copyBtn.addEventListener('click', copyToClipboard);
+
+// Generate password on page load
+window.addEventListener('load', generatePassword);
+
+// Generate password function
+function generatePassword() {
+    const length = parseInt(lengthEl.value);
+    const useUppercase = uppercaseEl.checked;
+    const useLowercase = lowercaseEl.checked;
+    const useNumbers = numbersEl.checked;
+    const useSymbols = symbolsEl.checked;
+
+    let charSet = '';
+    let password = '';
+
+    // Build character set based on selected options
+    if (useUppercase) charSet += UPPERCASE;
+    if (useLowercase) charSet += LOWERCASE;
+    if (useNumbers) charSet += NUMBERS;
+    if (useSymbols) charSet += SYMBOLS;
+
+    // If no option is selected, default to lowercase
+    if (charSet === '') {
+        charSet = LOWERCASE;
+        lowercaseEl.checked = true;
+    }
+
+    // Generate password
+    for (let i = 0; i < length; i++) {
+        const randomIndex = Math.floor(Math.random() * charSet.length);
+        password += charSet[randomIndex];
+    }
+
+    // Ensure password meets criteria (at least one of each selected type)
+    password = ensurePasswordCriteria(password, useUppercase, useLowercase, useNumbers, useSymbols);
+
+    // Display password
+    passwordEl.value = password;
+
+    // Update strength indicator
+    updateStrengthIndicator(password, useUppercase, useLowercase, useNumbers, useSymbols);
+
+    // Add animation
+    passwordEl.style.animation = 'none';
+    setTimeout(() => {
+        passwordEl.style.animation = 'slideIn 0.3s ease';
+    }, 10);
+}
+
+// Ensure password contains at least one character of each selected type
+function ensurePasswordCriteria(password, uppercase, lowercase, numbers, symbols) {
+    let newPassword = password;
+    const length = password.length;
+
+    if (uppercase && !/[A-Z]/.test(newPassword)) {
+        const pos = Math.floor(Math.random() * length);
+        const char = UPPERCASE[Math.floor(Math.random() * UPPERCASE.length)];
+        newPassword = replaceAt(newPassword, pos, char);
+    }
+
+    if (lowercase && !/[a-z]/.test(newPassword)) {
+        const pos = Math.floor(Math.random() * length);
+        const char = LOWERCASE[Math.floor(Math.random() * LOWERCASE.length)];
+        newPassword = replaceAt(newPassword, pos, char);
+    }
+
+    if (numbers && !/[0-9]/.test(newPassword)) {
+        const pos = Math.floor(Math.random() * length);
+        const char = NUMBERS[Math.floor(Math.random() * NUMBERS.length)];
+        newPassword = replaceAt(newPassword, pos, char);
+    }
+
+    if (symbols && !/[!@#$%^&*()_+\-=\[\]{}|;:,.<>?]/.test(newPassword)) {
+        const pos = Math.floor(Math.random() * length);
+        const char = SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)];
+        newPassword = replaceAt(newPassword, pos, char);
+    }
+
+    return newPassword;
+}
+
+// Helper function to replace character at position
+function replaceAt(str, index, char) {
+    return str.substring(0, index) + char + str.substring(index + 1);
+}
+
+// Update strength indicator
+function updateStrengthIndicator(password, uppercase, lowercase, numbers, symbols) {
+    const length = password.length;
+    let strength = 0;
+    let strengthText = '';
+
+    // Calculate strength score
+    if (length >= 12) strength += 2;
+    else if (length >= 8) strength += 1;
+
+    if (uppercase) strength += 1;
+    if (lowercase) strength += 1;
+    if (numbers) strength += 1;
+    if (symbols) strength += 2;
+
+    // Determine strength level
+    strengthLevelEl.classList.remove('strength-weak', 'strength-medium', 'strength-strong');
+
+    if (strength <= 3) {
+        strengthLevelEl.classList.add('strength-weak');
+        strengthText = 'Weak';
+        strengthTextEl.style.color = '#ef4444';
+    } else if (strength <= 5) {
+        strengthLevelEl.classList.add('strength-medium');
+        strengthText = 'Medium';
+        strengthTextEl.style.color = '#f59e0b';
+    } else {
+        strengthLevelEl.classList.add('strength-strong');
+        strengthText = 'Strong';
+        strengthTextEl.style.color = '#10b981';
+    }
+
+    strengthTextEl.textContent = strengthText;
+}
+
+// Copy to clipboard function
+function copyToClipboard() {
+    const password = passwordEl.value;
+
+    if (!password) {
+        return;
+    }
+
+    // Modern clipboard API
+    navigator.clipboard.writeText(password).then(() => {
+        showNotification();
+    }).catch(() => {
+        // Fallback for older browsers
+        passwordEl.select();
+        document.execCommand('copy');
+        showNotification();
+    });
+}
+
+// Show notification
+function showNotification() {
+    notificationEl.classList.add('show');
+    setTimeout(() => {
+        notificationEl.classList.remove('show');
+    }, 2000);
+}
+
+// Add slide in animation
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideIn {
+        from {
+            opacity: 0;
+            transform: translateX(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+`;
+document.head.appendChild(style);