From 42f2fc86a7581e96998ebbd84697f128e344bf0e Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Mon, 10 Feb 2025 09:29:40 +0530
Subject: [PATCH] feat: Add success message to newsletter form

---
 assets/js/script.js | 20 +++++++++++++++++++-
 index.html          | 11 ++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index e565ca6..1aca866 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -60,4 +60,22 @@ const headerActive = function () {
   }
 }
 
-addEventOnElem(window, "scroll", headerActive);
\ No newline at end of file
+addEventOnElem(window, "scroll", headerActive);
+
+document.getElementById('newsletterForm').addEventListener('submit', function (event) {
+  event.preventDefault(); // Prevent the default form submission
+
+  // Simulate form processing (e.g., sending data to a server)
+  setTimeout(function () {
+    // Clear the input field
+    document.querySelector('.email-field').value = '';
+
+    // Show the success message
+    document.getElementById('successMessage').style.display = 'block';
+
+    // Hide the success message after 5 seconds
+    setTimeout(function () {
+      document.getElementById('successMessage').style.display = 'none';
+    }, 5000); // 5000 milliseconds = 5 seconds
+  }, 500); // Simulate a slight delay for processing
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 8dd77e9..60fe827 100644
--- a/index.html
+++ b/index.html
@@ -551,16 +551,17 @@ <h3 class="h3">
 
             <h2 class="h2 section-title">Subscribe newslater get latest updates and deals</h2>
 
-            <form action="" class="newsletter-form">
-              <input type="email" name="email_address" placeholder="Enter your mail" required class="email-field">
-
+            <form action="" class="newsletter-form" id="newsletterForm">
+              <input type="email" name="email_address" placeholder="Enter your email" required class="email-field">
               <button type="submit" class="btn btn-secondary has-before has-after">
                 <span class="span">Subscribe</span>
-
                 <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
               </button>
             </form>
-
+             <!-- Success Message -->
+ <p class="success-message" id="successMessage" style="display: none; color: white; margin-top: 10px; font-size: 14px;">
+                Thank you for subscribing! Stay tuned for the latest updates.
+              </p>
           </div>
 
         </div>