Javascript Random Password Generator

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<div class="container">
  <h1>Password Generator</h1>
  <p class="subtitle">Create strong and secure passwords</p>

  <div class="password-display">
    <input type="text" id="passwordOutput" readonly value="Click generate to create password">
    <button class="icon-btn" id="copyBtn" title="Copy password">
      <ion-icon name="copy-outline"></ion-icon>
    </button>
    <button class="icon-btn" id="refreshBtn" title="Generate new password">
      <ion-icon name="refresh-outline"></ion-icon>
    </button>
  </div>

  <div class="options">
    <div class="option-group">
      <label>Password Length</label>
      <div class="slider-container">
        <input type="range" id="lengthSlider" min="8" max="32" value="16">
        <span class="length-value" id="lengthValue">16</span>
      </div>
    </div>

    <div class="option-group">
      <label>Include Characters</label>
      <div class="checkbox-group">
        <div class="checkbox-item">
          <input type="checkbox" id="uppercase" checked>
          <label for="uppercase">Uppercase (A-Z)</label>
        </div>
        <div class="checkbox-item">
          <input type="checkbox" id="lowercase" checked>
          <label for="lowercase">Lowercase (a-z)</label>
        </div>
        <div class="checkbox-item">
          <input type="checkbox" id="numbers" checked>
          <label for="numbers">Numbers (0-9)</label>
        </div>
        <div class="checkbox-item">
          <input type="checkbox" id="symbols" checked>
          <label for="symbols">Symbols (!@#$%^&*)</label>
        </div>
      </div>
    </div>
  </div>

  <button class="generate-btn" id="generateBtn">
    <ion-icon name="key-outline"></ion-icon>
    Generate Password
  </button>

  <div class="strength-indicator" id="strengthIndicator"></div>
</div>

<div class="toast" id="toast">Password copied to clipboard!</div>

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #8B4513 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 40px;
            width: 100%;
            max-width: 480px;
        }

        h1 {
            font-size: 24px;
            color: #333;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .subtitle {
            color: #8B4513;
            font-size: 14px;
            margin-bottom: 30px;
        }

        .password-display {
            background: #f7f7f7;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            transition: border-color 0.3s;
        }

        .password-display:focus-within {
            border-color: #8B4513;
        }

        #passwordOutput {
            flex: 1;
            font-family: 'Courier New', monospace;
            font-size: 16px;
            color: #333;
            background: none;
            border: none;
            outline: none;
        }

        .icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            transition: background 0.2s;
        }

        .icon-btn:hover {
            background: #e0e0e0;
        }

        .icon-btn ion-icon {
            font-size: 20px;
            color: #666;
        }

        .options {
            margin-bottom: 24px;
        }

        .option-group {
            margin-bottom: 20px;
        }

        .option-group label {
            display: block;
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        input[type="range"] {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: #e0e0e0;
            outline: none;
            -webkit-appearance: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #8B4513;
            cursor: pointer;
        }

        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #667eea;
            cursor: pointer;
            border: none;
        }

        .length-value {
            font-size: 16px;
            font-weight: 600;
            color: #8B4513;
            min-width: 32px;
            text-align: center;
        }

        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #8B4513;
        }

        .checkbox-item label {
            font-size: 14px;
            color: #555;
            cursor: pointer;
            margin: 0;
            font-weight: 400;
        }

        .generate-btn {
            width: 100%;
            background: linear-gradient(135deg, #8B4513 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 16px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .generate-btn:active {
            transform: translateY(0);
        }

        .strength-indicator {
            margin-top: 16px;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            display: none;
        }

        .strength-weak {
            background: #fee;
            color: #c33;
        }

        .strength-medium {
            background: #ffeaa7;
            color: #d63031;
        }

        .strength-strong {
            background: #d4edda;
            color: #155724;
        }

        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: #333;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            opacity: 0;
            transition: all 0.3s;
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

     const lengthSlider = document.getElementById('lengthSlider');
        const lengthValue = document.getElementById('lengthValue');
        const passwordOutput = document.getElementById('passwordOutput');
        const generateBtn = document.getElementById('generateBtn');
        const copyBtn = document.getElementById('copyBtn');
        const refreshBtn = document.getElementById('refreshBtn');
        const strengthIndicator = document.getElementById('strengthIndicator');
        const toast = document.getElementById('toast');

        const uppercase = document.getElementById('uppercase');
        const lowercase = document.getElementById('lowercase');
        const numbers = document.getElementById('numbers');
        const symbols = document.getElementById('symbols');

        const charSets = {
            uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
            lowercase: 'abcdefghijklmnopqrstuvwxyz',
            numbers: '0123456789',
            symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?'
        };

        lengthSlider.addEventListener('input', (e) => {
            lengthValue.textContent = e.target.value;
        });

        function generatePassword() {
            const length = parseInt(lengthSlider.value);
            let availableChars = '';
            
            if (uppercase.checked) availableChars += charSets.uppercase;
            if (lowercase.checked) availableChars += charSets.lowercase;
            if (numbers.checked) availableChars += charSets.numbers;
            if (symbols.checked) availableChars += charSets.symbols;

            if (availableChars === '') {
                showToast('Please select at least one character type!');
                return;
            }

            let password = '';
            for (let i = 0; i < length; i++) {
                const randomIndex = Math.floor(Math.random() * availableChars.length);
                password += availableChars[randomIndex];
            }

            passwordOutput.value = password;
            checkStrength(password);
        }

        function checkStrength(password) {
            let strength = 0;
            
            if (password.length >= 12) strength++;
            if (password.length >= 16) strength++;
            if (/[a-z]/.test(password)) strength++;
            if (/[A-Z]/.test(password)) strength++;
            if (/[0-9]/.test(password)) strength++;
            if (/[^a-zA-Z0-9]/.test(password)) strength++;

            strengthIndicator.style.display = 'block';
            
            if (strength <= 2) {
                strengthIndicator.className = 'strength-indicator strength-weak';
                strengthIndicator.textContent = '⚠️ Weak Password';
            } else if (strength <= 4) {
                strengthIndicator.className = 'strength-indicator strength-medium';
                strengthIndicator.textContent = '⚡ Medium Strength';
            } else {
                strengthIndicator.className = 'strength-indicator strength-strong';
                strengthIndicator.textContent = '✓ Strong Password';
            }
        }

        function copyToClipboard() {
            if (passwordOutput.value && passwordOutput.value !== 'Click generate to create password') {
                passwordOutput.select();
                navigator.clipboard.writeText(passwordOutput.value);
                showToast('Password copied to clipboard!');
            }
        }

        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }

        generateBtn.addEventListener('click', generatePassword);
        copyBtn.addEventListener('click', copyToClipboard);
        refreshBtn.addEventListener('click', generatePassword);

        // Generate initial password on load
        generatePassword();