Password Strength Meter

<!DOCTYPE html>
<title>My Example</title>

/* -- Strength Meter Styles -- */
.password-strength-meter {
    margin-top: 10px;
}
.strength-bar {
    height: 8px;
    width: 100%;
    background-color: #eee;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.strength-indicator {
    height: 100%;
    width: 0%; /* Starts at 0 */
    background-color: #dc3545; /* Default weak color */
    border-radius: 4px;
    transition: width 0.3s, background-color 0.3s;
}
/* Strength level styles */
.strength-indicator.weak { width: 25%; background-color: #dc3545; }
.strength-indicator.medium { width: 50%; background-color: #ffc107; }
.strength-indicator.strong { width: 75%; background-color: #28a745; }
.strength-indicator.very-strong { width: 100%; background-color: #28a745; }

.strength-text {
    margin-top: 5px;
    font-size: 0.85rem;
    color: #666;
    text-align: right;
    min-height: 1em; /* Prevents layout shift */
}
</style>

<div class="strength-meter-container">
    <form id="strengthForm" action="#" method="post">
        <div class="form-group">
            <label for="password-input">Create a Password</label>
            <input type="password" id="password-input" name="password" required>
            
            <div class="password-strength-meter">
                <div class="strength-bar">
                    <div class="strength-indicator" id="strength-indicator"></div>
                </div>
                <p class="strength-text" id="strength-text"></p>
            </div>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

if (passwordInput) {
    passwordInput.addEventListener('input', () => {
        const password = passwordInput.value;
        const result = checkPasswordStrength(password);
        
        // Remove all previous strength classes
        strengthIndicator.className = 'strength-indicator';
        
        if (result.strength) {
            strengthIndicator.classList.add(result.strength);
        }
        strengthText.textContent = result.text;
    });
}

function checkPasswordStrength(password) {
    let score = 0;
    const feedback = {
        strength: '',
        text: ''
    };
    
    if (password.length > 0) score++;
    if (password.length >= 8) score++;
    if (password.match(/[a-z]/)) score++;
    if (password.match(/[A-Z]/)) score++;
    if (password.match(/[0-9]/)) score++;
    if (password.match(/[^a-zA-Z0-9]/)) score++; // Special characters

switch(score) {
        case 0:
        case 1:
        case 2:
            feedback.strength = 'weak';
            feedback.text = 'Weak';
            break;
        case 3:
        case 4:
            feedback.strength = 'medium';
            feedback.text = 'Medium';
            break;
        case 5:
            feedback.strength = 'strong';
            feedback.text = 'Strong';
            break;
        case 6:
            feedback.strength = 'very-strong';
            feedback.text = 'Very Strong';
            break;
        default:
             feedback.strength = '';
             feedback.text = '';
    }
    
    return feedback;
}
</script>