Javascript Password Strength

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="container">
  <div class="header">
    <div class="icon-wrapper">
      <ion-icon name="shield-checkmark-outline"></ion-icon>
    </div>
    <h1>Password Strength</h1>
    <p class="subtitle">Create a secure password for your account</p>
  </div>

  <div class="form-group">
    <label for="password">Enter Password</label>
    <div class="password-input-wrapper">
      <input type="password" id="password" placeholder="Enter your password">
      <button type="button" class="toggle-password" id="togglePassword">
        <ion-icon name="eye-outline" id="eyeIcon"></ion-icon>
      </button>
    </div>

    <div class="strength-meter" id="strengthMeter" style="display: none;">
      <div class="strength-bars">
        <div class="strength-bar" id="bar1"></div>
        <div class="strength-bar" id="bar2"></div>
        <div class="strength-bar" id="bar3"></div>
        <div class="strength-bar" id="bar4"></div>
      </div>
      <div class="strength-text" id="strengthText">
        <ion-icon name="alert-circle-outline"></ion-icon>
        <span>Enter a password</span>
      </div>
    </div>
  </div>

  <div class="requirements">
    <div class="requirements-title">Password Requirements</div>
    <div class="requirement" id="reqLength">
      <ion-icon name="checkmark-circle-outline"></ion-icon>
      <span>At least 8 characters</span>
    </div>
    <div class="requirement" id="reqUppercase">
      <ion-icon name="checkmark-circle-outline"></ion-icon>
      <span>Contains uppercase letter</span>
    </div>
    <div class="requirement" id="reqLowercase">
      <ion-icon name="checkmark-circle-outline"></ion-icon>
      <span>Contains lowercase letter</span>
    </div>
    <div class="requirement" id="reqNumber">
      <ion-icon name="checkmark-circle-outline"></ion-icon>
      <span>Contains number</span>
    </div>
    <div class="requirement" id="reqSpecial">
      <ion-icon name="checkmark-circle-outline"></ion-icon>
      <span>Contains special character (!@#$%^&*)</span>
    </div>
  </div>

  <div class="tips">
    <div class="tips-title">
      <ion-icon name="bulb-outline"></ion-icon>
      <span>Tips for a strong password</span>
    </div>
    <div class="tips-content">
      Use a mix of letters, numbers, and symbols. Avoid common words or personal information. Consider using a passphrase with random words.
    </div>
  </div>

  <button class="button" id="submitBtn" disabled>
    <ion-icon name="lock-closed-outline"></ion-icon>
    <span>Create Password</span>
  </button>
</div>  

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: #e5e7eb;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            max-width: 500px;
            width: 100%;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 40px;
        }

        .header {
            text-align: center;
            margin-bottom: 32px;
        }

        .icon-wrapper {
            width: 64px;
            height: 64px;
            background: #f3f4f6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .icon-wrapper ion-icon {
            font-size: 32px;
            color: #6b7280;
        }

        h1 {
            font-size: 28px;
            color: #111827;
            margin-bottom: 8px;
        }

        .subtitle {
            color: #6b7280;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 24px;
        }

        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }

        .password-input-wrapper {
            position: relative;
        }

        input[type="password"],
        input[type="text"] {
            width: 100%;
            padding: 12px 45px 12px 16px;
            border: 2px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
            background: #f9fafb;
        }

        input:focus {
            outline: none;
            border-color: #6b7280;
            background: white;
        }

        .toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #6b7280;
            font-size: 20px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s;
        }

        .toggle-password:hover {
            color: #374151;
        }

        .strength-meter {
            margin-top: 12px;
        }

        .strength-bars {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }

        .strength-bar {
            flex: 1;
            height: 6px;
            background: #e5e7eb;
            border-radius: 3px;
            transition: all 0.3s;
        }

        .strength-bar.active {
            background: #9ca3af;
        }

        .strength-bar.weak {
            background: #ef4444;
        }

        .strength-bar.fair {
            background: #f59e0b;
        }

        .strength-bar.good {
            background: #3b82f6;
        }

        .strength-bar.strong {
            background: #10b981;
        }

        .strength-text {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #6b7280;
        }

        .strength-text ion-icon {
            font-size: 18px;
        }

        .strength-text.weak {
            color: #ef4444;
        }

        .strength-text.fair {
            color: #f59e0b;
        }

        .strength-text.good {
            color: #3b82f6;
        }

        .strength-text.strong {
            color: #10b981;
        }

        .requirements {
            background: #f9fafb;
            border-radius: 8px;
            padding: 16px;
            margin-top: 20px;
        }

        .requirements-title {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 12px;
        }

        .requirement {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            font-size: 14px;
            color: #6b7280;
            transition: color 0.3s;
        }

        .requirement ion-icon {
            font-size: 18px;
            color: #d1d5db;
            transition: color 0.3s;
        }

        .requirement.met {
            color: #10b981;
        }

        .requirement.met ion-icon {
            color: #10b981;
        }

        .tips {
            margin-top: 24px;
            padding: 16px;
            background: #f3f4f6;
            border-radius: 8px;
            border-left: 4px solid #6b7280;
        }

        .tips-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }

        .tips-title ion-icon {
            font-size: 18px;
        }

        .tips-content {
            font-size: 13px;
            color: #6b7280;
            line-height: 1.6;
        }

        .button {
            width: 100%;
            padding: 14px;
            background: #374151;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .button:hover {
            background: #1f2937;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .button:disabled {
            background: #d1d5db;
            cursor: not-allowed;
            transform: none;
        }

        @media (max-width: 768px) {
            .container {
                padding: 30px 20px;
            }

            h1 {
                font-size: 24px;
            }
        }

  const passwordInput = document.getElementById('password');
        const togglePassword = document.getElementById('togglePassword');
        const eyeIcon = document.getElementById('eyeIcon');
        const strengthMeter = document.getElementById('strengthMeter');
        const strengthText = document.getElementById('strengthText');
        const submitBtn = document.getElementById('submitBtn');

        const bars = [
            document.getElementById('bar1'),
            document.getElementById('bar2'),
            document.getElementById('bar3'),
            document.getElementById('bar4')
        ];

        const requirements = {
            length: document.getElementById('reqLength'),
            uppercase: document.getElementById('reqUppercase'),
            lowercase: document.getElementById('reqLowercase'),
            number: document.getElementById('reqNumber'),
            special: document.getElementById('reqSpecial')
        };

        // Toggle password visibility
        togglePassword.addEventListener('click', () => {
            const type = passwordInput.type === 'password' ? 'text' : 'password';
            passwordInput.type = type;
            eyeIcon.name = type === 'password' ? 'eye-outline' : 'eye-off-outline';
        });

        // Check password strength
        passwordInput.addEventListener('input', (e) => {
            const password = e.target.value;

            if (password.length === 0) {
                strengthMeter.style.display = 'none';
                resetBars();
                resetRequirements();
                submitBtn.disabled = true;
                return;
            }

            strengthMeter.style.display = 'block';

            // Check requirements
            const checks = {
                length: password.length >= 8,
                uppercase: /[A-Z]/.test(password),
                lowercase: /[a-z]/.test(password),
                number: /[0-9]/.test(password),
                special: /[!@#$%^&*(),.?":{}|<>]/.test(password)
            };

            // Update requirement indicators
            Object.keys(checks).forEach(key => {
                if (checks[key]) {
                    requirements[key].classList.add('met');
                } else {
                    requirements[key].classList.remove('met');
                }
            });

            // Calculate strength
            const metRequirements = Object.values(checks).filter(Boolean).length;
            let strength = 0;
            let strengthLabel = '';
            let strengthIcon = '';
            let strengthClass = '';

            if (metRequirements <= 2) {
                strength = 1;
                strengthLabel = 'Weak';
                strengthIcon = 'close-circle-outline';
                strengthClass = 'weak';
            } else if (metRequirements === 3) {
                strength = 2;
                strengthLabel = 'Fair';
                strengthIcon = 'alert-circle-outline';
                strengthClass = 'fair';
            } else if (metRequirements === 4) {
                strength = 3;
                strengthLabel = 'Good';
                strengthIcon = 'checkmark-circle-outline';
                strengthClass = 'good';
            } else {
                strength = 4;
                strengthLabel = 'Strong';
                strengthIcon = 'shield-checkmark-outline';
                strengthClass = 'strong';
            }

            // Update strength bars
            resetBars();
            for (let i = 0; i < strength; i++) {
                bars[i].classList.add('active', strengthClass);
            }

            // Update strength text
            strengthText.className = `strength-text ${strengthClass}`;
            strengthText.innerHTML = `
                <ion-icon name="${strengthIcon}"></ion-icon>
                <span>${strengthLabel} password</span>
            `;

            // Enable submit button if all requirements are met
            submitBtn.disabled = metRequirements < 5;
        });

        function resetBars() {
            bars.forEach(bar => {
                bar.classList.remove('active', 'weak', 'fair', 'good', 'strong');
            });
        }

        function resetRequirements() {
            Object.values(requirements).forEach(req => {
                req.classList.remove('met');
            });
        }

        submitBtn.addEventListener('click', () => {
            if (!submitBtn.disabled) {
                alert('Password created successfully! ✓');
                passwordInput.value = '';
                strengthMeter.style.display = 'none';
                resetBars();
                resetRequirements();
                submitBtn.disabled = true;
            }
        });