Password Strength Checker
Home
Snippets
Password Strength Checker
HTML
CSS
JS
<div class="card"> <h2>Password Strength</h2> <input type="password" id="password" placeholder="Enter password"> <div class="strength" id="result">Waiting for input</div> </div>
body { font-family: system-ui, sans-serif; background: #0f172a; color: white; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .card { background: #1e293b; padding: 25px; border-radius: 12px; width: 320px; } input { width: 100%; padding: 10px; border-radius: 6px; border: none; margin-top: 10px; font-size: 14px; box-sizing: border-box; } .strength { margin-top: 15px; font-weight: bold; } .weak { color: #ef4444; } .medium { color: #facc15; } .strong { color: #22c55e; }
const input = document.getElementById("password"); const result = document.getElementById("result"); input.addEventListener("input", () => { const val = input.value; let score = 0; if (val.length >= 8) score++; if (/[A-Z]/.test(val)) score++; if (/[0-9]/.test(val)) score++; if (/[^A-Za-z0-9]/.test(val)) score++; if (!val) { result.textContent = "Waiting for input"; result.className = "strength"; } else if (score <= 1) { result.textContent = "Weak password"; result.className = "strength weak"; } else if (score <= 3) { result.textContent = "Medium strength"; result.className = "strength medium"; } else { result.textContent = "Strong password"; result.className = "strength strong"; } });
Ad #1
Ad #2
Scroll to Top