Added character count field in Contact page

assets/contact/contact.css

@@ -146,3 +146,14 @@ textarea:hover {
     color: rgb(255, 255, 255);
     margin-bottom: 0;
 }
+
+.char-count {
+    text-align: right;
+    font-size: 10px;
+    color: #999;
+    margin-top: -15px;
+    margin-bottom: 10px;
+}
+
+
+

assets/contact/contact.html

@@ -72,7 +72,9 @@ <h2>Contact Us</h2>
                 <input type="email" id="email" name="email" placeholder="Enter Your Email" required oninput="validateEmail('email')">
 
                 <label for="message">Your Message:</label>
-                <textarea id="message" name="message" rows="5" placeholder="Enter Your Message" required></textarea>
+                <textarea id="message" name="message" rows="5" placeholder="Enter Your Message Atleast 50 Characters" required></textarea>
+                <div id="charCount" style="font-size: 1.5em; font-weight: bold; margin-top: 10px;">Message Count: 0/50</div>
+
 
                 <button type="submit">Send Message</button>
             </form>

assets/contact/contact.js

@@ -1,37 +1,38 @@
-function validateName(inputId) {
-    let input = document.getElementById(inputId);
-    let value = input.value;
-    let regex = /^[A-Za-z ]+$/;
-
-    if (!regex.test(value)) {
-        alert("Please enter only characters in the name field.");
-        input.value = value.replace(/[^A-Za-z ]/g, ''); // Remove any non-alphabetic characters
-    }
-}
-
-const ham = document.querySelector(".hamburger");
-const navMe = document.querySelector(".nav-menu");
-
-// Hamburger menu 
-ham.addEventListener("click", mobileMenu);
-function mobileMenu() {
-    ham.classList.toggle("active");
-    navMe.classList.toggle("active");
-}
-
-// text message length not less than 50 chars
 document.addEventListener('DOMContentLoaded', function() {
     const contactForm = document.getElementById('contact-form');
     const messageInput = document.getElementById('message');
+    const charCount = document.getElementById('charCount');
+    const minLength = 50; // Minimum length for the message
+
+    messageInput.addEventListener('input', function() {
+        const currentLength = messageInput.value.length;
+        charCount.textContent = `Message Count: ${currentLength}/${minLength}`;
+        if (currentLength < minLength) {
+            charCount.style.color = 'red';
+        } else {
+            charCount.style.color = 'green';
+        }
+    });
 
     contactForm.addEventListener('submit', function(event) {
-        if (messageInput.value.length < 50) {
+        if (messageInput.value.length < minLength) {
             event.preventDefault();
             alert('Your message must be at least 50 characters long.');
         }
     });
 });
 
+function validateName(inputId) {
+    let input = document.getElementById(inputId);
+    let value = input.value;
+    let regex = /^[A-Za-z ]+$/;
+
+    if (!regex.test(value)) {
+        alert("Please enter only characters in the name field.");
+        input.value = value.replace(/[^A-Za-z ]/g, ''); // Remove any non-alphabetic characters
+    }
+}
+
 function validateEmail(emailFieldId) {
     const emailField = document.getElementById(emailFieldId);
     const emailPattern = /^[a-zA-Z0-9._%+-]+@gmail\.com$/;
@@ -41,3 +42,13 @@ function validateEmail(emailFieldId) {
         emailField.setCustomValidity("");
     }
 }
+
+const ham = document.querySelector(".hamburger");
+const navMe = document.querySelector(".nav-menu");
+
+// Hamburger menu 
+ham.addEventListener("click", mobileMenu);
+function mobileMenu() {
+    ham.classList.toggle("active");
+    navMe.classList.toggle("active");
+}