Enhancement: Display Success Message After Subscription

assets/js/script.js

@@ -110,4 +110,20 @@ window.addEventListener("resize", function () {
   totalSlidableItems = sliderContainer.childElementCount - totalSliderVisibleItems;
 
   moveSliderItem();
+});
+
+document.getElementById("subscribeBtn").addEventListener("click", function(event) {
+  event.preventDefault(); // Prevent page reload
+  const emailInput = document.getElementById("emailInput");
+  const successMessage = document.getElementById("successMessage");
+
+  if (emailInput.value.trim() !== "") {
+    successMessage.style.display = "block"; // Show success message
+    emailInput.value = ""; // Clear input field
+
+    // Hide success message after 5 seconds
+    setTimeout(() => {
+      successMessage.style.display = "none";
+    }, 5000);
+  }
 });

index.html

@@ -177,17 +177,20 @@ <h1 class="headline headline-1 section-title">
             </p>
 
             <div class="input-wrapper">
-
-              <input type="email" name="email_address" placeholder="Type your email address" required
+              <input type="email" id="emailInput" name="email_address" placeholder="Type your email address" required
                 class="input-field" autocomplete="off">
-
-              <button class="btn btn-primary">
+              
+              <button class="btn btn-primary" id="subscribeBtn">
                 <span class="span">Subscribe</span>
-
                 <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
               </button>
-
             </div>
+
+            <!-- Success message -->
+            <div id="successMessage" class="success-message" style="display: none; color: green; margin-top: 10px;">
+              ✅ Subscription successful! Check your inbox for updates.
+            </div>
+
 
           </div>