chore: add form submission

Author: ezkemboi

index.html

@@ -77,7 +77,11 @@ <h2>My Skills</h2>
     </section>
     <section class="contact-me">
       <h2>Contact Me</h2>
-      <form action="/submit-contact" method="post">
+      <form 
+        action="/submit-contact" 
+        method="post"
+        id="contactForm"
+      >
         <label for="name">Your Name</label>
         <input 
           type="text" 
@@ -100,7 +104,7 @@ <h2>Contact Me</h2>
           rows="5"
           required
         ></textarea>
-        <button>
+        <button type="submit">
           Submit
         </button>
       </form>

script.js

@@ -9,3 +9,34 @@ function scrollGallery(direction) {
 setInterval(() => {
   scrollGallery(1);
 }, 3000);
+
+const contactForm = document.getElementById('contactForm');
+contactMe(contactForm);
+
+function contactMe(form) {
+  form.addEventListener('submit', (event) => {
+    event.preventDefault(); // prevennt from default submitting
+    const name = form.name.value.trim();
+    const email = form.email.value.trim();
+    const message = form.message.value.trim();
+
+    if(!name || !email || !message) {
+      alert('All fields are required');
+      return;
+    }
+
+    console.log("Form submitted", {
+      name, 
+      email, 
+      message
+    });
+
+    alert(`Thank you for your message, ${name}`);
+    // reset form
+    form.reset();
+    // to submit to actual form, can make use of form.submit()
+    return ;
+  })
+ 
+
+}

style.css

@@ -58,7 +58,7 @@ ul {
 }
 
 .gallery-item {
-  width: 48%;
+  width: 300px;
   display: inline-block;
   cursor: pointer;
   transition: transform 0.3s ease
@@ -81,7 +81,7 @@ ul {
   z-index: 10;
   font-size: 24px;
   padding: 4px 12px;
-  background-color: rgba(0, 128, 128, 0.4);
+  background-color: rgba(0, 128, 128, 0.5);
 }
 
 .scroll-button:hover {