appointment scheduling done

public/html/schedule.html

@@ -14,7 +14,7 @@
     <h4 id="place"></h4>
     <p id="description"></p>
 
-    <form id="schedule-form">
+    <div>
         <div class="input-group">
             <label for="email">Email</label>
             <input type="email" id="email" name="email" placeholder="johndoe@example.com" required>
@@ -42,8 +42,10 @@
             <label for="time-span">Time Span</label>
             <input type="text" id="time-span" name="timeSpan" value="10:00 AM to 12:00 PM" readonly>
         </div>
-        <button type="submit" class="btn-submit">Attend</button>
-    </form>
+        <button type="submit" id="attend-btn" class="btn-submit">Attend</button>
+        <p id="appointment-error"></p>
+        <p id="appointment-success"></p>
+    </div>
 </div>
 </body>
 </html>

public/javascripts/schedule.js

@@ -1,6 +1,20 @@
 "use strict";
 
+let appointment;
+const errorParagraph = document.getElementById('appointment-error');
+const successParagraph = document.getElementById('appointment-success');
+
+
 window.onload = async function () {
+    document.getElementById("attend-btn").addEventListener("click", async () => {
+        await attendEvent();
+    })
+    const urlParams = new URLSearchParams(window.location.search);
+    appointment = urlParams.get('appointment');
+    if (!appointment) {
+        window.location.replace("/html/404.html");
+    }
+
     await getAppointment();
 }
 
@@ -19,12 +33,6 @@ function getTimeSpan(start, end) {
 }
 
 async function getAppointment() {
-    const urlParams = new URLSearchParams(window.location.search);
-    const appointment = urlParams.get('appointment');
-    if (!appointment) {
-        window.location.replace("/html/404.html");
-    }
-
     let options = {method: 'GET', headers: {'User-Agent': 'insomnia/10.0.0'}};
 
     const response = await fetch(`/api/schedule?appointmentId=${appointment}`, options)
@@ -65,3 +73,37 @@ function displayAppointmentDetails(appointment) {
     // Set place
     document.getElementById('place').innerText = appointment.place;
 }
+
+async function attendEvent() {
+    const email = document.getElementById('email').value;
+    const firstname = document.getElementById('firstname').value;
+    const lastname = document.getElementById('lastname').value;
+
+    if (!email || !firstname || !lastname) {
+        errorParagraph.innerText = "Fill in all fields.";
+        return;
+    }
+
+    const response = await fetch("/api/schedule/create",
+        {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                appointment: appointment,
+                email: email,
+                firstname: firstname,
+                lastname: lastname
+            })
+        });
+    const js = await response.json();
+
+    if (response.status !== 200) {
+        errorParagraph.innerText = js["message"];
+        successParagraph.innerText = "";
+    } else {
+        errorParagraph.innerText = "";
+        successParagraph.innerText = "Registered successfully.";
+    }
+
+
+}

public/stylesheets/schedule.css

@@ -66,7 +66,9 @@ form {
 }
 
 .btn-submit {
-    padding: 12px 0;
+    margin-top: 10px;
+    padding: 12px;
+    padding-inline: 30px;
     border: none;
     background: #6c63ff;
     color: white;
@@ -79,3 +81,13 @@ form {
 .btn-submit:hover {
     background: #5750d9;
 }
+
+#appointment-error {
+    color: red;
+    margin-top: 10px;
+}
+
+#appointment-success {
+    color: green;
+    margin-top: 10px;
+}