Added password strength indicator on signup page

signup/signup.css

@@ -124,4 +124,28 @@ a{
 }
 input:focus{
     outline: none;
+}
+
+#password-requirements p {
+    /* margin: 0; */
+    font-size: 0.8em;
+    color: grey;
+}
+
+#password-requirements .met {
+    color: green;
+}
+
+
+
+#password.weak {
+    border-color: red;
+}
+
+#password.medium {
+    border-color: orange;
+}
+
+#password.strong {
+    border-color: green;
 }

signup/signup.html

@@ -21,10 +21,17 @@ <h2>Create an Account</h2>
                     <label>Email</label>
                 </div>
                 <div class="input-group">
-                    <input type="password" required>
+                    <input type="password" id="password" required>
                     <label>Password</label>
+                    <div id="password-strength"></div>
+                    <div id="password-requirements">
+                        <p id="length-requirement">✔️ At least 6 characters</p>
+                        <p id="uppercase-requirement">✔️ At least one uppercase letter</p>
+                        <p id="number-requirement">✔️ At least one number</p>
+                        <p id="special-requirement">✔️ At least one special character</p>
+                    </div>
                 </div>
-                <button class="signup-btn" type="submit">Sign Up</button>
+                <button class="signup-btn" type="submit" disabled>Sign Up</button>
                 <div class="extra-links">
                     <button class="home-btn"><i class="fas fa-home"></i><a href="../index.html">Home</a></button>
                     <button class="login-btn"><i class="fas fa-sign-in-alt"></i><a href="../login/login.html">Login</a></button>

signup/signup.js

@@ -34,7 +34,6 @@ card.addEventListener("mouseleave", function () {
   card.style.transform = "perspective(1000px)";
 });
 
-
 document.querySelector(".signup-form").addEventListener("submit", function (e) {
   e.preventDefault(); // Prevent form submission
 
@@ -76,3 +75,51 @@ document.querySelector(".signup-form").addEventListener("submit", function (e) {
   document.querySelector(".signup-form").reset(); // Clear the form fields
 });
 
+document.getElementById('password').addEventListener('input', function() {
+  const password = this.value;
+  const strengthDiv = document.getElementById('password-strength');
+  const lengthRequirement = document.getElementById('length-requirement');
+  const uppercaseRequirement = document.getElementById('uppercase-requirement');
+  const numberRequirement = document.getElementById('number-requirement');
+  const specialRequirement = document.getElementById('special-requirement');
+  const signupButton = document.querySelector('.signup-btn');
+  let strength = '';
+  let strengthClass = '';
+
+  // Check each requirement
+  const lengthMet = password.length >= 6;
+  const uppercaseMet = /[A-Z]/.test(password);
+  const numberMet = /[0-9]/.test(password);
+  const specialMet = /[!@#$%^&*]/.test(password);
+
+  // Update requirement styles
+  lengthRequirement.classList.toggle('met', lengthMet);
+  uppercaseRequirement.classList.toggle('met', uppercaseMet);
+  numberRequirement.classList.toggle('met', numberMet);
+  specialRequirement.classList.toggle('met', specialMet);
+
+  // Determine strength
+  if (lengthMet) {
+      if (uppercaseMet && numberMet && specialMet) {
+          strength = 'Strong';
+          strengthClass = 'strong';
+      } else if (uppercaseMet || numberMet || specialMet) {
+          strength = 'Medium';
+          strengthClass = 'medium';
+      } else {
+          strength = 'Weak';
+          strengthClass = 'weak';
+      }
+  } else {
+      strength = 'Too short';
+      strengthClass = 'weak';
+  }
+
+  // Update strength message and input box color
+  strengthDiv.textContent = strength;
+  strengthDiv.className = strengthClass;
+  this.className = strengthClass;
+
+  // Enable/disable signup button
+  signupButton.disabled = strength !== 'Strong';
+});