Password Generator Script
<script>
// Configuration
const config = {
chars: {
upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
lower: 'abcdefghijklmnopqrstuvwxyz',
numbers: '0123456789',
symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?'
}
};
// DOM Elements
const slider = document.getElementById('length-slider');
const lengthVal = document.getElementById('length-val');
const output = document.getElementById('password-output');
const copyBtn = document.getElementById('copy-btn');
const copyTooltip = document.getElementById('copy-tooltip');
const generateBtn = document.getElementById('generate-btn');
const options = {
upper: document.getElementById('uppercase'),
lower: document.getElementById('lowercase'),
numbers: document.getElementById('numbers'),
symbols: document.getElementById('symbols')
};
const strengthText = document.getElementById('strength-text');
const bars = [
document.getElementById('bar1'),
document.getElementById('bar2'),
document.getElementById('bar3'),
document.getElementById('bar4')
];
// State
let currentLength = 16;
// Init
function init() {
slider.addEventListener('input', (e) => {
currentLength = e.target.value;
lengthVal.textContent = currentLength;
generatePassword();
});
generateBtn.addEventListener('click', generatePassword);
copyBtn.addEventListener('click', copyToClipboard);
// Add change listeners to checkboxes
Object.values(options).forEach(opt => {
if (!opt.disabled) {
opt.addEventListener('change', generatePassword);
}
});
generatePassword();
}
function generatePassword() {
let charset = config.chars.lower; // Lowercase always required by UI constraint
if (options.upper.checked) charset += config.chars.upper;
if (options.numbers.checked) charset += config.chars.numbers;
if (options.symbols.checked) charset += config.chars.symbols;
let password = '';
const array = new Uint32Array(currentLength);
window.crypto.getRandomValues(array);
for (let i = 0; i < currentLength; i++) {
password += charset[array[i] % charset.length];
}
output.value = password;
evaluateStrength(password);
}
function evaluateStrength(password) {
let score = 0;
// Length points
if (password.length > 8) score++;
if (password.length > 12) score++;
// Complexity points
if (/[A-Z]/.test(password) && options.upper.checked) score++;
if (/[0-9]/.test(password) && options.numbers.checked) score++;
if (/[^A-Za-z0-9]/.test(password) && options.symbols.checked) score++;
// Normalizing score to 0-4 for UI
// Logic: Max potential score is 5 (2 len + 3 complex).
// We map to 4 bars.
let finalLevel = 0; // 0 = very weak, 1 = weak, 2 = medium, 3 = strong
if (score <= 2) finalLevel = 1;
else if (score === 3 || score === 4) finalLevel = 2;
else if (score >= 5) finalLevel = 3;
// Additional check: very short passwords are always weak
if (password.length < 8) finalLevel = 0;
updateStrengthUI(finalLevel);
}
function updateStrengthUI(level) {
// Colors
const colors = ['#ef4444', '#f87171', '#eab308', '#22c55e'];
const labels = ['VERY WEAK', 'WEAK', 'MEDIUM', 'STRONG'];
const activeColor = colors[level];
strengthText.textContent = labels[level];
strengthText.style.color = activeColor;
// Update bars
bars.forEach((bar, index) => {
if (index <= level) {
bar.style.backgroundColor = activeColor;
bar.style.borderColor = activeColor;
} else {
bar.style.backgroundColor = 'rgba(255,255,255,0.1)';
bar.style.borderColor = 'transparent';
}
});
}
function copyToClipboard() {
if (!output.value) return;
navigator.clipboard.writeText(output.value).then(() => {
copyTooltip.classList.add('show');
setTimeout(() => {
copyTooltip.classList.remove('show');
}, 2000);
});
}
init();
</script>
Public Last updated: 2026-08-25 08:54:06 AM