Implemented the AJAX contact form

assets/contact/contact.css

@@ -134,6 +134,16 @@ textarea {
     color: #4a90e2;
 }
 
+#error {
+    color: #e74c3c;
+    font-size: 21px;
+}
+
+#success {
+    color: #4a90e2;
+    font-size: 21px;
+}
+
 /* Footer Css*/
 
 footer {
@@ -168,4 +178,4 @@ footer {
     footer {
         font-size: 0.9em;
     }
-}
+}

assets/contact/contact.html

@@ -94,6 +94,7 @@ <h1>CONTACT US</h1>
         <i class="fas fa-chevron-up"></i>
     </a>
 
+    <script src="contact.js"></script>
     <script src="../../script.js"></script>
 </body>
 

assets/contact/contact.js

@@ -0,0 +1,24 @@
+const submitAjaxForm = event => {
+    event.preventDefault()
+
+    let form = event.target
+    const formData = new FormData(form)
+
+    fetch("/", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams(formData).toString()
+    })
+        .then(response => {
+            if (!response.ok) {
+                form.innerHTML = `<h1 id='error'>Oops! We encountered an error. <br>Please try again later.</h1>`
+            } else {
+                form.innerHTML = `<h1 id='success'>Thanks for reaching out! <br>I will get back to you shortly.</h1>`
+            }
+        })
+        .catch(error => {
+            form.innerHTML = `<h1 id='error'>Oops! We encountered an error. <br>Please try again later.</h1>`
+        })
+}
+
+document.querySelector("form").addEventListener("submit", submitAjaxForm);