From 2fc2c782c920b41292756579ebf73f38292f9d9a Mon Sep 17 00:00:00 2001
From: Ishika Gupta <118624573+Ishika-Gupta06@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:05:50 +0000
Subject: [PATCH] Email validation checker while subscribing

---
 contact.html | 45 +++++++++++++++++++++++++++++++++++++++------
 index.html   |  6 +++---
 team.html    | 29 +++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/contact.html b/contact.html
index e7da191..20645da 100644
--- a/contact.html
+++ b/contact.html
@@ -187,6 +187,7 @@
                 /* End at original position */
             }
         }
+
         .map {
             width: 860px;
             height: 400px;
@@ -350,17 +351,50 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h
                     </div>
                 </div>
 
+                <!-- Newsletter Subscription -->
                 <!-- Newsletter Subscription -->
                 <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
-                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our
-                        Newsletter</h3>
-                    <form action="#">
-                        <input type="email" placeholder="Your Email"
+                    <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+                    <form id="newsletter-form" action="#">
+                        <input type="email" id="newsletter-email" placeholder="Your Email"
                             style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
                         <button type="submit"
-                            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
+                            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">
+                            Subscribe
+                        </button>
                     </form>
+                    <div id="subscription-notification" style="display:none; background-color: rgba(212, 237, 218, 0.8); color: #155724; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 600px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);">
+                        Thank you for subscribing to our newsletter!
+                    </div>
+                    
                 </div>
+                <script>
+                    document.querySelector("form").addEventListener("submit", function(event) {
+                        event.preventDefault(); // Prevent form from submitting immediately
+                
+                        // Improved Email validation regex to ensure proper domain like "gmail.com"
+                        const emailInput = document.querySelector("input[type='email']");
+                        const emailRegex = /^[^\s@]+@gmail\.com$/;
+                
+                        if (emailRegex.test(emailInput.value)) {
+                            // Show alert notification with green translucent box
+                            const notification = document.getElementById("subscription-notification");
+                            notification.style.display = "block";
+                
+                            // Hide the message after 3 seconds
+                            setTimeout(function() {
+                                notification.style.display = "none";
+                            }, 3000);
+                
+                            // Reset the form
+                            this.reset();
+                        } else {
+                            alert("Please enter a valid Gmail address.");
+                        }
+                    });
+                </script>
+                
+                
             </div>
         </div>
         <hr>
@@ -431,5 +465,4 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
 
 </body>
 
-
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 4a3c26b..2a3b8aa 100644
--- a/index.html
+++ b/index.html
@@ -602,7 +602,7 @@ <h2>Contact Us</h2>
     </div>
   </div>
 
-  <!-- FAQ section ends here ... --> 
+  <!-- FAQ section ends here ... -->
 
 
   <!-- footer start here -->
@@ -660,7 +660,7 @@ <h2>Follow Us</h2>
 
     </div>
   </footer>
-  
+
 
 
 
@@ -784,7 +784,7 @@ <h2>Follow Us</h2>
 
 
 
-  
+
   <a href="chatbot.html">
     <div class="fixed bottom-0 right-2 chatbot-container">
       <button class="chatbot-button group">
diff --git a/team.html b/team.html
index b3473ba..3bfb33c 100644
--- a/team.html
+++ b/team.html
@@ -473,7 +473,36 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
                     <button type="submit"
                         style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
                 </form>
+                <div id="subscription-notification" style="display:none; background-color: rgba(212, 237, 218, 0.8); color: #155724; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 600px; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);">
+                    Thank you for subscribing to our newsletter!
+                </div>
             </div>
+            <script>
+                document.querySelector("form").addEventListener("submit", function(event) {
+                    event.preventDefault(); // Prevent form from submitting immediately
+            
+                    // Improved Email validation regex to ensure proper domain like "gmail.com"
+                    const emailInput = document.querySelector("input[type='email']");
+                    const emailRegex = /^[^\s@]+@gmail\.com$/;
+            
+                    if (emailRegex.test(emailInput.value)) {
+                        // Show alert notification with green translucent box
+                        const notification = document.getElementById("subscription-notification");
+                        notification.style.display = "block";
+            
+                        // Hide the message after 3 seconds
+                        setTimeout(function() {
+                            notification.style.display = "none";
+                        }, 3000);
+            
+                        // Reset the form
+                        this.reset();
+                    } else {
+                        alert("Please enter a valid Gmail address.");
+                    }
+                });
+            </script>
+            
         </div>
     </footer>
         <script src="preloader.js"></script>