JavaScript Password Strength Checker

JavaScript Password Strength Checker

 document.addEventListener("DOMContentLoaded", function () {
    const passwordInput = document.getElementById("password");
    const strengthContainer = document.getElementById("oneid-password-strength-container");

    passwordInput.addEventListener("input", function () {
        const strength = checkPasswordStrength(passwordInput.value);
        strengthContainer.textContent = `Strength: ${strength}`;
        updateStrengthColor(strengthContainer, strength);
    });

    function checkPasswordStrength(password) {
        let strength = 0;
        if (password.length >= 8) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[\W_]/.test(password)) strength++;

        if (strength <= 2) return "Weak";
        if (strength <= 4) return "Medium";
        return "Strong";
    }

    function updateStrengthColor(container, strength) {
        const colors = {
            Weak: "red",
            Medium: "orange",
            Strong: "green"
        };
        container.style.color = colors[strength] || "black";
    }
});

---------------------------------------------------------------

HTML Example

<input type="password" id="password" placeholder="Enter Password">
<div id="oneid-password-strength-container"></div>