Fixed the null message input in contact form

assets/contact/contact.css

@@ -103,6 +103,13 @@ button:hover {
     background: #ff6984;
 }
 
+button:disabled{
+    cursor: not-allowed;
+    pointer-events: none;
+    transition: none;
+
+}
+
 /*----------------------------------------------- Updated Footer Styling ---------------------------------------*/
 .footer-basic {
     padding: 40px 0;

assets/contact/contact.html

@@ -74,7 +74,7 @@ <h2>Contact Us</h2>
                 <label for="message">Your Message:</label>
                 <textarea id="message" name="message" rows="5" placeholder="Enter Your Message" required></textarea>
 
-                <button type="submit">Send Message</button>
+                <button type="submit" id="button" disabled>Send Message</button>
             </form>
         </section>
     </div>

assets/contact/contact.js

@@ -9,6 +9,17 @@ function validateName(inputId) {
     }
 }
 
+const message=document.querySelector("#message");
+const btn=document.querySelector("#button");
+message.addEventListener("input",validate);
+function validate(){
+    if (message.value===""){
+        btn.setAttribute("disabled","disabled");
+    } else {
+      btn.removeAttribute("disabled");  
+    }
+}
+
 const ham = document.querySelector(".hamburger");
 const navMe = document.querySelector(".nav-menu");