diff --git a/assets/contact/contact.css b/assets/contact/contact.css index dc8ca2465..1234861ff 100644 --- a/assets/contact/contact.css +++ b/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; diff --git a/assets/contact/contact.html b/assets/contact/contact.html index 6efe48974..fba9655e7 100644 --- a/assets/contact/contact.html +++ b/assets/contact/contact.html @@ -95,6 +95,7 @@

Contact Us

+
Message Count: 0/50
diff --git a/assets/contact/contact.js b/assets/contact/contact.js index 77c7ed52e..8b067ceee 100644 --- a/assets/contact/contact.js +++ b/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.'); }