Password Strength Checker
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
input[type="password"] {
width: 300px;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
#strength-meter {
margin-top: 20px;
width: 300px;
height: 20px;
border-radius: 5px;
background-color: #eee;
}
#strength-meter div {
height: 100%;
border-radius: 5px;
transition: width 0.3s ease;
}
#strength-meter .weak {
background-color: #ff6666;
}
#strength-meter .medium {
background-color: #ffd966;
}
#strength-meter .strong {
background-color: #66ff66;
}
// scripts.js
const passwordInput = document.getElementById('password');
const strengthMeter = document.getElementById('strength-meter');
passwordInput.addEventListener('input', () => {
const password = passwordInput.value;
const strength = calculatePasswordStrength(password);
updateStrengthMeter(strength);
});
function calculatePasswordStrength(password) {
let score = 0;
if (password.length < 8) {
return score;
}
score += password.length * 4;
score += countUppercaseLetters(password) * 2;
score += countNumbers(password) * 4;
score += countSymbols(password) * 6;
score += bonusPoints(password);
return Math.min(Math.floor(score / 100), 10);
}
function countUppercaseLetters(password) {
return password.replace(/[^A-Z]/g, '').length;
}
function countNumbers(password) {
return password.replace(/[^0-9]/g, '').length;
}
function countSymbols(password) {
return password.replace(/[A-Za-z0-9]/g, '').length;
}
function bonusPoints(password) {
let bonus = 0;
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
bonus += 10;
}
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) {
bonus += 15;
}
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/)) {
bonus += 20;
}
return bonus;
}
function updateStrengthMeter(strength) {
const meter = strengthMeter.querySelector('div');
meter.style.width = `${strength * 10}%`;
meter.className = '';
if (strength < 4) {
meter.classList.add('weak');
} else if (strength < 7) {
meter.classList.add('medium');
} else {
meter.classList.add('strong');
}
}
