From 5b2a7baed07b80b0f1cd16d0e0f063167ba2be4d Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Wed, 5 Feb 2025 08:42:12 +0530
Subject: [PATCH] feat: Add success message to newsletter form

---
 assets/js/script.js | 22 +++++++++++++++++++++-
 index.html          | 13 +++++--------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index 39f3a44..214c673 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -45,4 +45,24 @@ window.addEventListener("scroll", function () {
     goTopBtn.classList.remove("active");
   }
 
-})
\ No newline at end of file
+})
+
+// JavaScript for Success Message
+document.getElementById('newsletterForm').addEventListener('submit', function (event) {
+  event.preventDefault(); 
+
+
+  setTimeout(() => {
+   
+    document.getElementById('newsletterForm').reset();
+
+  
+    const successMessage = document.getElementById('successMessage');
+    successMessage.style.display = 'block';
+
+   
+    setTimeout(() => {
+      successMessage.style.display = 'none';
+    }, 5000);
+  }, 500); 
+});
diff --git a/index.html b/index.html
index 16f2fce..dade7f2 100644
--- a/index.html
+++ b/index.html
@@ -659,25 +659,22 @@ <h3 class="h3 card-title">Gaming mask</h3>
 
         <section class="newsletter">
           <div class="container">
-
             <div class="newsletter-card">
-
               <div class="newsletter-content">
                 <figure class="newsletter-img">
                   <img src="./assets/images/newsletter-img.png" alt="Newsletter image">
                 </figure>
-
                 <h2 class="h2 newsletter-title">Subscribe to our newsletter</h2>
               </div>
-
-              <form action="" class="newsletter-form">
+              <form action="" class="newsletter-form" id="newsletterForm">
                 <input type="email" name="email" required placeholder="Your Email Address" class="input-field">
-
                 <button type="submit" class="btn btn-secondary">Subscribe</button>
               </form>
-
+              <!-- Success Message -->
+              <p class="success-message" id="successMessage" style="color: green; margin-top: 10px; display: none;">
+                Thank you for subscribing! You'll receive our latest updates soon.
+              </p>
             </div>
-
           </div>
         </section>