WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
password
747
mambetov1237.b
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
22 January 2025
password di accesso semplice
23 August 2025
Modulo di accesso HTML con attivazione/disattivazione della password
5 July 2025
Pannello di accesso moderno con bordo animato e reimpostazione della password di TheDoc
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) */