Added Success Message to Footer Newsletter Form

assets/js/script.js

@@ -83,4 +83,21 @@ const filter = function () {
   filterBox.setAttribute("data-filter", this.dataset.filterBtn)
 }
 
-addEventOnElem(filterBtns, "click", filter);
+addEventOnElem(filterBtns, "click", filter);
+
+// Footer newsletter subscribe section
+document.addEventListener("DOMContentLoaded", function () {
+  const footerForm = document.getElementById("footer-newsletter-form");
+  const footerSuccessMessage = document.getElementById("footer-success-message");
+
+  footerForm.addEventListener("submit", function (event) {
+    event.preventDefault(); // Prevent form submission
+
+    footerSuccessMessage.style.display = "block"; // Show success message
+    footerForm.reset(); // Clear input field
+
+    setTimeout(() => {
+      footerSuccessMessage.style.display = "none"; // Hide message after 4 seconds
+    }, 4000);
+  });
+});

index.html

@@ -1544,26 +1544,27 @@ <h2 class="h2 section-title">Our Newsletter</h2>
         </ul>
 
         <div class="footer-list">
-
           <p class="footer-list-title">Newsletter</p>
-
-          <form action="" class="footer-form">
+        
+          <form action="" class="footer-form" id="footer-newsletter-form">
             <input type="email" name="email_address" placeholder="Your email address" required class="email-field">
-
+            
             <button type="submit" class="footer-form-btn">
               <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
             </button>
           </form>
-
+
+          <p id="footer-success-message" class="success-message" style="display: none; color: green; margin-top: 10px;">
+            Thank you for subscribing! 🎉
+          </p>
+
           <div class="wrapper">
-
             <a href="#" class="footer-link">Term & Condition</a>
             <a href="#" class="footer-link">Policy</a>
             <a href="#" class="footer-link">Map</a>
-
           </div>
-
         </div>
+
 
       </div>