WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
mot de passe
750
mambetov1237.b
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
1 January 2025
Un code par codex
14 January 2025
Exemple de page Web de portfolio
15 July 2025
Animation de basculement de triangle CSS
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) */