Username Generator - Code Explanation

HTML STRUCTURE

<div class="settings">
    <input type="text" id="userName" placeholder="Enter your name">
    
    <div class="checkbox-group">
        <input type="checkbox" id="includeNumbers" checked>
        <input type="checkbox" id="includeSymbols">
        <input type="checkbox" id="mixedCase" checked>
    </div>
    
    <select id="style">
        <option value="cool">Cool Names</option>
        <option value="professional">Professional</option>
        <option value="gaming">Gaming</option>
        <option value="creative">Creative</option>
    </select>
    
    <button onclick="generateUsernames()">Generate Usernames</button>
</div>

JAVASCRIPT CODE

const adjectives = ['Cool', 'Swift', 'Bright', 'Smart', 'Quick', 'Bold', 'Clever', 'Mighty', 'Happy', 'Sunny'];
const nouns = ['Tiger', 'Phoenix', 'Dragon', 'Eagle', 'Wolf', 'Lion', 'Fox', 'Shark', 'Ninja', 'Knight'];
const symbols = ['_', '-', '.', '~', '|'];

function generateUsernames() {
    const name = document.getElementById('userName').value.trim();
    if (!name) {
        alert('Please enter your name');
        return;
    }
    
    const style = document.getElementById('style').value;
    const includeNumbers = document.getElementById('includeNumbers').checked;
    const includeSymbols = document.getElementById('includeSymbols').checked;
    const mixedCase = document.getElementById('mixedCase').checked;
    
    const usernames = [];
    
    for (let i = 0; i < 5; i++) {
        let username = '';
        
        if (style === 'cool') {
            const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
            const noun = nouns[Math.floor(Math.random() * nouns.length)];
            username = adj + noun;
        } else if (style === 'professional') {
            username = name + (Math.floor(Math.random() * 9999) + 1000);
        } else if (style === 'gaming') {
            username = name + '_' + String.fromCharCode(88 + Math.floor(Math.random() * 26));
        }
        
        if (includeNumbers) {
            username += Math.floor(Math.random() * 10);
        }
        
        if (includeSymbols) {
            username += symbols[Math.floor(Math.random() * symbols.length)];
        }
        
        if (mixedCase && Math.random() > 0.5) {
            username = username.toUpperCase();
        }
        
        usernames.push(username);
    }
    
    displayUsernames(usernames);
}

function displayUsernames(usernames) {
    const list = document.getElementById('usernamesList');
    list.innerHTML = '';
    usernames.forEach(username => {
        const item = document.createElement('div');
        item.className = 'username-item';
        item.innerHTML = `
            <div class="username-text">${username}</div>
            <button onclick="copyToClipboard('${username}')">Copy</button>
        `;
        list.appendChild(item);
    });
}

KEY FEATURES

✓ Multiple Username Styles (Cool, Professional, Gaming, Creative)
✓ Optional Numbers & Symbols
✓ Mixed Case Toggle
✓ 5 Username Suggestions per Generation
✓ Copy to Clipboard Functionality
✓ Input Validation
✓ Checkbox & Select Options

LEARNING CONCEPTS

• Array Random Selection (Math.floor & Math.random)
• String Concatenation & Methods
• Checkbox/Select Value Reading
• Conditional Logic for Username Generation
• String Methods (toUpperCase, substring)
• Math.random() for Randomization
• Template Literals
• Clipboard API (navigator.clipboard.writeText)

← Back to Project