From 3f1d04a8512b8b6164e6c3063f885d334d578939 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Fri, 31 Jan 2025 09:44:33 +0530
Subject: [PATCH] Added success message to footer newsletter form

---
 assets/js/script.js | 19 ++++++++++++++++++-
 index.html          | 17 +++++++++--------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index 1393d5e..d2dab70 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -83,4 +83,21 @@ const filter = function () {
   filterBox.setAttribute("data-filter", this.dataset.filterBtn)
 }
 
-addEventOnElem(filterBtns, "click", filter);
\ No newline at end of file
+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);
+  });
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index f75dd1c..34f46ba 100644
--- a/index.html
+++ b/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>