Added character count field in Contact page (#1705)

assets/contact/contact.css

@@ -109,6 +109,12 @@ textarea:hover {
     box-shadow: 5px 5px 10px black;
 }
 
+.contact-container #charCount {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
 .contact-container button {
     font-size: 20px;
     font-weight: 700;

assets/contact/contact.html

@@ -95,6 +95,7 @@ <h2>Contact Us</h2>
 
                 <label for="message">Your Message:</label>
                 <textarea id="message" name="message" rows="5" placeholder="Enter Your Message" required></textarea>
+                <div id="charCount">Message Count: 0/50</div>
 
                 <button type="submit">Send Message</button>
             </form>

assets/contact/contact.js

@@ -33,9 +33,21 @@ function mobileMenu() {
 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 = '#00F260';
+        }
+    });
 
     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.');
         }