From 8cf6965d079b8d39206f99b10497b6cb47ee590f Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Tue, 4 Feb 2025 08:12:42 +0530
Subject: [PATCH] feat: Add success message to subscribe form

---
 assets/js/script.js | 18 +++++++++++++++++-
 index.html          | 12 +++++++-----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index c1b075e..53f0d68 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -87,4 +87,20 @@ const filter = function () {
   }
 }
 
-addEventOnElem(filterBtns, "click", filter);
\ No newline at end of file
+addEventOnElem(filterBtns, "click", filter);
+
+document.getElementById('subscribeForm').addEventListener('submit', function (event) {
+  event.preventDefault(); 
+
+
+  const successMessage = document.querySelector('.success-message');
+  successMessage.style.display = 'block'; 
+
+
+  this.reset();
+
+
+setTimeout(() => {
+  successMessage.style.display = 'none';
+}, 5000);
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 93b2ffd..888c1db 100644
--- a/index.html
+++ b/index.html
@@ -819,17 +819,19 @@ <h2 class="h2 section-title">Make Appointment</h2>
             <span class="span">Hair Salon</span>
           </a>
 
-          <form action="" class="input-wrapper">
-
+          <form action="" class="input-wrapper" id="subscribeForm">
             <input type="email" name="email_address" placeholder="Enter Your Email" required class="email-field">
-
             <button type="submit" class="btn has-before">
               <span class="span">Subscribe Now</span>
-
               <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
             </button>
-
+          
+            <!-- Success Message -->
+            <p class="success-message" style="display: none; color: green; margin-top: 10px;">
+              Thank you for subscribing! You'll receive the latest updates via email.
+            </p>
           </form>
+          
 
         </div>