Password Generator Source Code

HTML STRUCTURE

<div class="container">
    <h1>Password Generator</h1>
    
    <div class="input-section">
        <label>Password Length: <input type="range" id="passwordLength" min="8" max="32" value="12"></label>
        <span id="lengthDisplay">12</span>
    </div>
    
    <div class="options">
        <label><input type="checkbox" id="uppercase" checked> Uppercase (A-Z)</label>
        <label><input type="checkbox" id="lowercase" checked> Lowercase (a-z)</label>
        <label><input type="checkbox" id="numbers" checked> Numbers (0-9)</label>
        <label><input type="checkbox" id="symbols" checked> Symbols (!@#$...)</label>
    </div>
    
    <button id="generateBtn">Generate Password</button>
    <button id="copyBtn">Copy to Clipboard</button>
    
    <div id="passwordOutput" class="password-box">Click Generate</div>
    <div id="strengthDiv" class="strength">Strength: -</div>
</div>

JAVASCRIPT CODE

// Character Sets
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const numberChars = '0123456789';
const symbolChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';

// Generate Password Function
function generatePassword() {
    let chars = '';
    
    if (uppercase.checked) chars += uppercaseChars;
    if (lowercase.checked) chars += lowercaseChars;
    if (numbers.checked) chars += numberChars;
    if (symbols.checked) chars += symbolChars;
    
    if (chars === '') {
        alert('Please select at least one option');
        return;
    }
    
    let password = '';
    const length = parseInt(passwordLength.value);
    
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        password += chars[randomIndex];
    }
    
    passwordOutput.textContent = password;
    updateStrength(password);
}

// Password Strength Checker
function updateStrength(password) {
    let strength = 'Weak';
    let strengthClass = 'weak';
    
    if (password.length >= 12) {
        strength = 'Medium';
        strengthClass = 'medium';
    }
    
    if (password.length >= 16 && 
        /[a-z]/.test(password) && 
        /[A-Z]/.test(password) && 
        /[0-9]/.test(password) && 
        /[!@#$%^&*...]/.test(password)) {
        strength = 'Strong';
        strengthClass = 'strong';
    }
    
    strengthDiv.textContent = 'Strength: ' + strength;
    strengthDiv.className = 'strength ' + strengthClass;
}

// Copy to Clipboard Function
function copyPassword() {
    const password = passwordOutput.textContent;
    if (password === 'Click Generate') return;
    
    navigator.clipboard.writeText(password).then(() => {
        const originalText = copyBtn.textContent;
        copyBtn.textContent = 'Copied!';
        setTimeout(() => {
            copyBtn.textContent = originalText;
        }, 2000);
    });
}
← Back to Password Generator Project