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