feat: Add success message to subscribe form

assets/js/script.js

@@ -91,4 +91,20 @@ const revealElementOnScroll = function () {
 
 window.addEventListener("scroll", revealElementOnScroll);
 
-window.addEventListener("load", revealElementOnScroll);
+window.addEventListener("load", revealElementOnScroll);
+
+// <!-- JavaScript for Success Message -->
+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);
+});

index.html

@@ -788,19 +788,18 @@ <h3 class="headline-sm card-title">How do binge eating and drinking impact the l
         </ul>
 
         <div class="footer-list" data-reveal="bottom">
-
           <p class="headline-sm footer-list-title">Subscribe</p>
-
-          <form action="" class="footer-form">
-            <input type="email" name="email" placeholder="Email" class="input-field title-lg">
-
+          <form action="" class="footer-form" id="subscribeForm">
+            <input type="email" name="email" placeholder="Email" class="input-field title-lg" required>
             <button type="submit" class="btn has-before title-md">Subscribe</button>
           </form>
-
+          <!-- Success Message -->
+          <p class="success-message text" style="display: none; color: green; margin-top: 10px; font-weight: bold;">
+            Thank you for subscribing! You'll receive the latest updates via email.
+          </p>
           <p class="text">
-            Get the latest updates via email. Any time you may unsubscribe
+            Get the latest updates via email. Any time you may unsubscribe.
           </p>
-
         </div>
 
       </div>