From 0bff8e3a725f83a0933ee4fc674261f21dbf2e6e Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Wed, 29 Jan 2025 11:41:25 +0530
Subject: [PATCH] Added success message for newsletter subscription with
 auto-dismiss functionality

---
 assets/js/script.js | 17 ++++++++++++++++-
 index.html          | 20 ++++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index b6e279d..4ea6b96 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -23,4 +23,19 @@ const goTopBtn = document.querySelector("[data-go-top]");
 window.addEventListener("scroll", function () {
   window.scrollY >= 500 ? goTopBtn.classList.add("active")
     : goTopBtn.classList.remove("active");
-});
\ No newline at end of file
+});
+
+function handleFormSubmit(event) {
+  event.preventDefault(); // Prevents the form from reloading the page
+
+  // Display the success message
+  document.getElementById('successMessage').style.display = 'block';
+
+  // Clear the input field after submission
+  document.getElementById('emailInput').value = '';
+
+  // Clear the success message after 4 seconds
+  setTimeout(function() {
+    document.getElementById('successMessage').style.display = 'none';
+  }, 4000); // 4000 milliseconds = 4 seconds
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7e496ae..1c27f2f 100644
--- a/index.html
+++ b/index.html
@@ -761,7 +761,7 @@ <h3 class="card-title">
 
         </ul>
 
-        <div class="footer-list">
+        <!-- <div class="footer-list">
 
           <p class="footer-list-title">Get a newsletter</p>
 
@@ -775,7 +775,23 @@ <h3 class="card-title">
             <button type="submit" class="btn btn-primary">Subscribe</button>
           </form>
 
-        </div>
+        </div> -->
+
+        <div class="footer-list">
+          <p class="footer-list-title">Get a newsletter</p>
+          <p class="newsletter-text">
+            For the latest deals and tips, travel no further than your inbox
+          </p>
+        
+          <form action="" class="newsletter-form" id="newsletterForm" onsubmit="handleFormSubmit(event)">
+            <input type="email" name="email" required placeholder="Email address" class="newsletter-input" id="emailInput">
+        
+            <button type="submit" class="btn btn-primary">Subscribe</button>
+          </form>
+        
+          <!-- Success message hidden by default -->
+          <p id="successMessage" style="display: none; color: green; margin-top: 10px;">Thank you for subscribing! Check your inbox for the latest updates.</p>
+        </div>     
 
       </div>