Added newsletter subscription form in the footer

PriyaGhosal · Oct 17, 2024 · 90e7729 · 90e7729
1 parent 727c200
commit 90e7729
Showing 1 changed file with 34 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -165,6 +165,7 @@
       }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
   </head>
   <body class="light-mode">
 
@@ -1668,6 +1669,15 @@ <h3>Follow Us</h3>
                   <a href="https://www.linkedin.com/in/priya-ghosal-785771286/"><i class="fab fa-linkedin-in"></i></a>
               </div>
           </div>
+          <!-- Newsletter Form -->
+    <div class="newsletter" id="newsletter">
+      <form id="newsletter-form">
+        <h3>Newsletter Form</h3>
+        <input type="email" id="email" placeholder="Enter your email" required />
+        <button type="submit">Subscribe</button>
+      </form>
+      <p id="subscription-message"></p>
+    </div>
 
 
     </div>
@@ -1676,6 +1686,7 @@ <h3>Follow Us</h3>
       <p>&copy; 2024 Buddy Trail. All rights reserved.</p>
     </div>
   </footer>
+
   <!-- Deals and Offers Popup
   <div id="dealsPopup" class="popup">
     <div class="popup-content">
@@ -1862,7 +1873,29 @@ <h2>Exclusive Deals and Offers!</h2>
   }
     </style>
   </script>
-
+  <script src="script.js">
+document.getElementById('newsletter-form').addEventListener('submit', function (e) {
+    e.preventDefault(); // Prevent the default form submission
+
+    const email = document.getElementById('email').value.trim(); // Get the email value
+    const messageElement = document.getElementById('subscription-message'); // Get the message display element
+
+    // Regular expression to validate email format
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (emailPattern.test(email)) {
+        // Simulate a successful subscription
+        messageElement.textContent = 'Subscribed successfully!'; // Show success message
+        messageElement.style.color = 'green'; // Change message color to green
+
+        // Clear the input field after successful submission
+        document.getElementById('email').value = '';
+    } else {
+        messageElement.textContent = 'Please enter a valid email address.'; // Show error message
+        messageElement.style.color = 'red'; // Change message color to red
+    }
+});
+    </script>    
 </body>
 
 </html>