From 36ca3962a1fa4e8ff5e4e8b5c33bb5c70f20e68c Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Sun, 2 Feb 2025 11:59:16 +0530
Subject: [PATCH] feat: Add success message to contact form

---
 assets/js/script.js | 17 +++++++++++++++++
 index.html          | 36 +++++-------------------------------
 2 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index f918fe2..2d042ca 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -45,4 +45,21 @@ window.addEventListener("scroll", function () {
     header.classList.remove("active");
     backTopBtn.classList.remove("active");
   }
+});
+
+// Newsletter success message 
+document.getElementById('contactForm').addEventListener('submit', function (event) {
+  event.preventDefault(); 
+
+ 
+  const successMessage = document.querySelector('.success-message');
+  successMessage.style.display = 'block'; 
+
+
+  setTimeout(() => {
+    successMessage.style.display = 'none';
+  }, 5000);
+
+
+  this.reset();
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index 5e98c78..95d221f 100644
--- a/index.html
+++ b/index.html
@@ -407,79 +407,53 @@ <h3 class="skills-title">JavaScript</h3>
 
       <section class="section contact" id="contact">
         <div class="container">
-
           <div class="contact-card">
-
             <p class="card-subtitle">Don't be shy</p>
-
             <h2 class="h2 section-title">Drop Me a Line</h2>
-
             <div class="wrapper">
-
-              <form action="" class="contact-form">
-
+              <form action="" class="contact-form" id="contactForm">
                 <input type="text" name="name" placeholder="Name" required class="contact-input">
-
                 <input type="email" name="email" placeholder="Email" required class="contact-input">
-
                 <textarea name="message" placeholder="Message" required class="contact-input"></textarea>
-
                 <button type="submit" class="btn-submit">Submit Message</button>
-
+                <!-- Success Message -->
+                <p class="success-message" style="display: none; color: green; margin-top: 10px; font-weight: bold;">
+                  Thank you! Your message has been sent successfully.
+                </p>
               </form>
-
               <ul class="contact-list">
-
                 <li class="contact-item">
-
                   <div class="contact-icon">
                     <ion-icon name="location"></ion-icon>
                   </div>
-
                   <div>
                     <h3 class="contact-item-title">Address</h3>
-
                     <address class="contact-item-link">
                       20, London, United Kingdom
                     </address>
                   </div>
-
                 </li>
-
                 <li class="contact-item">
-
                   <div class="contact-icon">
                     <ion-icon name="mail"></ion-icon>
                   </div>
-
                   <div>
                     <h3 class="contact-item-title">Email</h3>
-
                     <a href="mailto:hello@ethan.com" class="contact-item-link">hello@ethan.com</a>
                   </div>
-
                 </li>
-
                 <li class="contact-item">
-
                   <div class="contact-icon">
                     <ion-icon name="call"></ion-icon>
                   </div>
-
                   <div>
                     <h3 class="contact-item-title">Phone</h3>
-
                     <a href="tel:+1234567890" class="contact-item-link">+123 456 7890</a>
                   </div>
-
                 </li>
-
               </ul>
-
             </div>
-
           </div>
-
         </div>
       </section>