From b5a57e324c85fbc7460d55b1fe17217d047b0426 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Sat, 8 Feb 2025 08:18:45 +0530
Subject: [PATCH] feat: Add success message to newsletter form

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

diff --git a/assets/js/script.js b/assets/js/script.js
index 4b9f033..9d4acdf 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -73,4 +73,21 @@ const accordionAction = document.querySelectorAll("[data-accordion-action]");
 
 const toggleAccordion = function () { this.classList.toggle("active"); }
 
-addEventOnElem(accordionAction, "click", toggleAccordion);
\ No newline at end of file
+addEventOnElem(accordionAction, "click", toggleAccordion);
+
+document.getElementById('newsletterForm').addEventListener('submit', function (event) {
+  event.preventDefault(); 
+ 
+  setTimeout(function () {
+
+    document.querySelector('.email-field').value = '';
+
+   
+    document.getElementById('successMessage').style.display = 'block';
+
+
+    setTimeout(function () {
+      document.getElementById('successMessage').style.display = 'none';
+    }, 5000); 
+  }, 500); 
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 126b54b..bb66c5d 100644
--- a/index.html
+++ b/index.html
@@ -657,14 +657,17 @@ <h3 class="h3 card-title">
             Lorem ipsum dolor sit amet consecte tur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
           </p>
 
-          <form action="" class="newsletter-form">
+          <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="form-btn">
               <ion-icon name="paper-plane" aria-hidden="true"></ion-icon>
             </button>
+            <!-- Success Message -->
+           
           </form>
-
+ <p class="success-message" id="successMessage" style="display: none; color: green; margin-top: 10px; font-size: 14px;">
+              Thank you for subscribing! Stay tuned for the latest updates.
+            </p>
         </div>
 
         <ul class="footer-list">