HTML, CSS, JS

harshitgupta028 · Jan 14, 2024 · 762e868 · 762e868
1 parent 7dfc10f
commit 762e868
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 68 deletions.
diff --git a/app.js → public/app.js b/app.js → public/app.js
@@ -158,74 +158,66 @@ themeButton.addEventListener('click', () => {
 
 // Form - Send Email
 
-// document.getElementById("access-key").setAttribute('value', accessKey);
+const name = document.getElementById('sender-name');
+const email = document.getElementById('sender-email');
+const subject = document.getElementById('subject');
+const message = document.getElementById('message');
+
+function sendData(formData){
+
+  const showMsg = document.getElementById('info');
+  showMsg.innerHTML = "Sending email..."
+
+  fetch('/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({data: formData})
+  })
+    .then(response => response.json())
+    .then(data => {
+      console.log("Success:", data);
+      showMsg.innerHTML = "Email sent succesfully..."
+
+      name.value = "",
+      email.value = "",
+      subject.value = "",
+      message.value = ""
+
+      setTimeout(() => {
+        showMsg.innerHTML = ""
+      }, 3000)
+
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+      showMsg.innerHTML = "Could not send email."
 
-// function ValidateEmail() {
+      setTimeout(() => {
+        showMsg.innerHTML = ""
+      }, 3000)
+    })
+}
 
-//   var validRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
-//   const email = document.getElementById("email").value
+const button = document.getElementById('contact-form');
 
-//   if (email.match(validRegex)) {
-//     return true;
-//   } else { 
-//     return false;
-//   }
-// }
+button.addEventListener('submit', (event) => {
 
-// const form = document.getElementById('form');
-// const result = document.getElementById('form-validator');
-// const emailValidator = document.getElementById('email-validator');
+  event.preventDefault();
 
+  // make object
 
-// form.addEventListener('submit', function(e) {
-//   e.preventDefault();
-  // const formData = new FormData(form);
-  // const object = Object.fromEntries(formData);
-  // const json = JSON.stringify(object);
+  let formData = {
+    name: name.value,
+    email: email.value,
+    subject: subject.value,
+    message: message.value
+  }
 
-  // result.innerHTML = "Thanks for contacting for will not submit due to expired token you can use the email mentioned to send email"
-
+  // console.log(formData);
 
-  // if(ValidateEmail()){
+  sendData(formData);
 
-  //   result.innerHTML = "Please wait..."
-
-  //   fetch('https://api.web3forms.com/submit', {
-  //           method: 'POST',
-  //           headers: {
-  //               'Content-Type': 'application/json',
-  //               'Accept': 'application/json'
-  //           },
-  //           body: json
-  //       })
-  //       .then(async (response) => {
-  //           let json = await response.json();
-  //           if (response.status == 200) {
-  //               result.classList.add("form__validator-success")
-  //               result.innerHTML = json.message;
-  //           } else {
-  //               console.log(response);
-  //               result.classList.add("form__validator-warning")
-  //               result.innerHTML = json.message;
-  //           }
-  //       })
-  //       .catch(error => {
-  //           console.log(error);
-  //           result.classList.add("form__validator-failed")
-  //           result.innerHTML = "Something went wrong!";
-  //       })
-  //       .then(function() {
-  //           form.reset();
-  //           setTimeout(() => {
-  //               result.classList.add("validator__msg-hide")
-  //           }, 3000);
-  //       });
-
-  // }else{
-  //       emailValidator.innerHTML = "Please enter valid email!"
-  //       emailValidator.classList.add("validator__msg-show")
-  //       setTimeout(() => {
-  //         emailValidator.classList.remove("validator__msg-show")
-  //       }, 2000)
-  // }
-// });
+
+})
diff --git a/css/styles.css → public/css/styles.css b/css/styles.css → public/css/styles.css
diff --git a/index.html → public/index.html b/index.html → public/index.html
@@ -430,9 +430,7 @@ <h3 class="contact__title">Email Me</h3>
 
         </div>
 
-        <form method="POST" class="contact__form grid" id="form">
-
-          <input type="hidden" name="access_key" id="access-key" value="">
+        <form method="POST" class="contact__form grid" id="contact-form">
 
           <div class="contact__inputs grid">
             <div class="contact__content">
@@ -441,7 +439,7 @@ <h3 class="contact__title">Email Me</h3>
             </div>
             <div class="contact__content">
               <label for="" class="contact__label">Email</label>
-              <input type="email" class="contact__input" id="email" name="email" required>
+              <input type="email" class="contact__input" id="sender-email" name="email" required>
             </div>
             <div id="email-validator" class="validator__msg-hide email__validator"></div>
           </div>
@@ -455,11 +453,12 @@ <h3 class="contact__title">Email Me</h3>
           </div>
 
           <div>
-            <button class="button button--flex form-submit-button" disabled type="submit" id="submit-btn">
+            <button class="button button--flex form-submit-button" type="submit" id="submit-contact-form">
               Send Message <i class="uil uil-message button__icon"></i>
             </button>
           </div>
-          <div id="form-validator" class="form__msg"></div>
+
+          <div id="info" class="form__msg"></div>
         </form>
       </div>
     </section>