Password Generator Tool

Password Generator - WebTools Pro * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary: #4361ee; --secondary: #3a0ca3; --success: #2ecc71; --danger: #e74c3c; --warning: #f39c12; --dark: #2c3e50; --light: #ecf0f1; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); width: 100%; max-width: 500px; overflow: hidden; } .header { background: var(--dark); color: white; padding: 30px; text-align: center; } .header h1 { font-size: 2.2rem; margin-bottom: 10px; } .header p { opacity: 0.9; } .body { padding: 30px; } .password-display { background: #f8f9fa; border-radius: 15px; padding: 25px; margin-bottom: 30px; border: 2px solid #eaeaea; position: relative; } .password-field { font-size: 1.8rem; font-weight: 600; color: var(--dark); word-break: break-all; padding-right: 50px; font-family: 'Courier New', monospace; min-height: 60px; } .copy-btn { position: absolute; right: 20px; top: 20px; background: var(--primary); color: white; border: none; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .copy-btn:hover { background: var(--secondary); } .strength-meter { margin-top: 20px; } .strength-label { display: flex; justify-content: space-between; margin-bottom: 8px; } .strength-bar { height: 10px; background: #e0e0e0; border-radius: 5px; overflow: hidden; } .strength-fill { height: 100%; width: 0%; transition: all 0.3s ease; border-radius: 5px; } .options { background: #f8f9fa; padding: 25px; border-radius: 15px; margin-bottom: 30px; } .option-group { margin-bottom: 20px; } .option-group h3 { margin-bottom: 15px; color: var(--dark); } .checkbox-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .checkbox-item { display: flex; align-items: center; gap: 10px; } .checkbox-item input { width: 18px; height: 18px; cursor: pointer; } .checkbox-item label { cursor: pointer; font-weight: 500; } .length-group { display: flex; align-items: center; gap: 15px; } .length-slider { flex: 1; -webkit-appearance: none; height: 8px; background: #ddd; border-radius: 4px; outline: none; } .length-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--primary); border-radius: 50%; cursor: pointer; } .length-value { font-size: 1.2rem; font-weight: 600; color: var(--primary); min-width: 30px; } .btn { display: block; width: 100%; padding: 18px; background: var(--primary); color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 20px; } .btn:hover { background: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .password-history { margin-top: 30px; } .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .history-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: white; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary); } .history-password { font-family: 'Courier New', monospace; font-weight: 600; } .notification { position: fixed; top: 20px; right: 20px; background: var(--success); color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transform: translateX(150%); transition: transform 0.3s ease; z-index: 1000; } .notification.show { transform: translateX(0); } @media (max-width: 480px) { .checkbox-group { grid-template-columns: 1fr; } .password-field { font-size: 1.4rem; } } Password Generator Create strong, secure passwords instantly Click Generate Password Strength: None Password Length 12 Character Types Uppercase (A-Z) Lowercase (a-z) Numbers (0-9) Symbols (!@#$%) Generate Password Recent Passwords Clear No passwords generated yet Password copied to clipboard! // Character sets const characterSets = { uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', lowercase: 'abcdefghijklmnopqrstuvwxyz', numbers: '0123456789', symbols: '!@#$%^&*()_+-=[]{}|;:,.?' }; // Password history let passwordHistory = JSON.parse(localStorage.getItem('passwordHistory')) || []; // Update length display document.getElementById('lengthSlider').addEventListener('input', function() { document.getElementById('lengthValue').textContent = this.value; }); // Generate password document.getElementById('generateBtn').addEventListener('click', generatePassword); // Copy to clipboard document.getElementById('copyBtn').addEventListener('click', copyToClipboard); // Clear history document.getElementById('clearHistoryBtn').addEventListener('click', clearHistory); function generatePassword() { const length = parseInt(document.getElementById('lengthSlider').value); const includeUppercase = document.getElementById('uppercase').checked; const includeLowercase = document.getElementById('lowercase').checked; const includeNumbers = document.getElementById('numbers').checked; const includeSymbols = document.getElementById('symbols').checked; // Validate at least one character type is selected if (!includeUppercase && !includeLowercase && !includeNumbers && !includeSymbols) { showNotification('Please select at least one character type!', 'danger'); return; } // Build character pool let characterPool = ''; if (includeUppercase) characterPool += characterSets.uppercase; if (includeLowercase) characterPool += characterSets.lowercase; if (includeNumbers) characterPool += characterSets.numbers; if (includeSymbols) characterPool += characterSets.symbols; // Generate password let password = ''; const array = new Uint32Array(length); window.crypto.getRandomValues(array); for (let i = 0; i < length; i++) { password += characterPool[array[i] % characterPool.length]; } // Display password document.getElementById('passwordOutput').textContent = password; // Calculate and display strength updateStrengthIndicator(password); // Add to history addToHistory(password); } function updateStrengthIndicator(password) { let strength = 0; const length = password.length; // Length criteria if (length >= 8) strength += 1; if (length >= 12) strength += 1; if (length >= 16) strength += 1; // Character type criteria if (/[A-Z]/.test(password)) strength += 1; if (/[a-z]/.test(password)) strength += 1; if (/[0-9]/.test(password)) strength += 1; if (/[^A-Za-z0-9]/.test(password)) strength += 1; // Update strength bar and text const strengthFill = document.getElementById('strengthFill'); const strengthText = document.getElementById('strengthText'); let strengthPercent = 0; let text = ''; let color = ''; if (strength { historyHTML += ` ${item.password} ${item.timestamp} `; }); historyContainer.innerHTML = historyHTML; // Add event listeners to copy buttons document.querySelectorAll('.copy-history-btn').forEach(button => { button.addEventListener('click', function() { const password = this.getAttribute('data-password'); navigator.clipboard.writeText(password); showNotification('Password copied to clipboard!', 'success'); }); }); } function copyToClipboard() { const password = document.getElementById('passwordOutput').textContent; if (password === 'Click Generate') { showNotification('Generate a password first!', 'warning'); return; } navigator.clipboard.writeText(password); showNotification('Password copied to clipboard!', 'success'); } function clearHistory() { if (confirm('Clear all password history?')) { passwordHistory = []; localStorage.removeItem('passwordHistory'); updateHistoryDisplay(); showNotification('History cleared!', 'success'); } } function showNotification(message, type = 'success') { const notification = document.getElementById('notification'); notification.innerHTML = ` ${message}`; notification.style.background = { 'success': '#2ecc71', 'danger': '#e74c3c', 'warning': '#f39c12' }[type]; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Initialize document.addEventListener('DOMContentLoaded', function() { // Generate initial password generatePassword(); // Load history updateHistoryDisplay(); // Allow Enter key to generate password document.addEventListener('keydown', function(e) { if (e.key === 'Enter') { generatePassword(); } }); });

Password Generator Tool

Password Generator

Password Length

Character Types

Recent Passwords

Tools

Leave a Reply Cancel reply

One swallow does not make the spring

Persuasion is often more effectual than force

Spieth in danger of missing cut

Hibs and Ross County fans on final

Tip of the day: That man again

One swallow does not make the spring

After all is said and done, more is said than done

Knowledge is power

The Future Of Possible

Xbox boss talks Project Scorpio price

Hibs and Ross County fans on final

Password Generator

Password Length

Character Types

Recent Passwords

Subscribe to our mailing list to get the new updates!

Online Stopwatch Tool

Online To-Do List Tool

Related Articles

Leave a Reply Cancel reply

One swallow does not make the spring

After all is said and done, more is said than done

Knowledge is power

The Future Of Possible

Xbox boss talks Project Scorpio price

Hibs and Ross County fans on final