WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
पासवर्ड
380
mambetov1237.b
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
21 October 2024
पासवर्ड नियम + वेब घटक टॉगल करें
9 September 2024
पासवर्ड जनरेटर
21 December 2024
लॉगिन पासवर्ड
HTML
Copy
Document
Password Strength Checker
Strength:
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #121212; color: #ffff; } .container { text-align: center; background-color: #333; padding: 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); max-width: 400px; width: 100%; } h1 { font-size: 24px; margin-bottom: 20px; color: #fff; } input { width: 100%; padding: 12px; margin-bottom: 20px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; background-color: #222; color: #fff; } .Strength-bar-container { width: 100%; height: 10px; background-color: #444; border-radius: 5px; margin-top: 10px; } .Strength-bar { height: 100%; width: 0; border-radius: 5px; transition: width 0.3s ease; } .strength-message { font-weight: bold; margin-top: 10px; } .strength-weak { color: red; } .strength-medium { color: yellow; } .strength-strong { color: green; } .strength-none { color: white; }<!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
const passwordInput = document.getElementById("passwordInput"); const strengthMessage = document.getElementById("strength"); const strengthBar = document.getElementById("strengthBar"); passwordInput.addEventListener("input", () => { const password = passwordInput.value; let strength = "weak"; let color = "#ff4d4d"; let width = "30%"; if ( password.length > 8 && /[A-Z]/.test(password) && /[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password) ) { strength = "strong"; color = "#32cd32"; width = "1005"; } else if ( password.length > 5 && (/[A-Z]/.test(password) || /[^A-Za-z0-9]/.test(password)) ) { strength = "Medium"; color = "#ffa500"; width = "60%"; } strengthMessage.textContent = `Strength $(strength)`; strengthMessage.style.color = color; strengthBar.style.width = width; strengthBar.style.backgroundColor = color; });/* Replace with your JS Code (Leave empty if not needed) */