Finish modal for adding tasks v0.0.16

assets/js/user.js

@@ -24,12 +24,23 @@ changeEmailBtn.addEventListener("click", function() {
 addTaskBtn.addEventListener("click", function() {
   const taskModal = document.querySelector('.add-task-modal');
   const closeTaskModalBtn = document.querySelector('.close-task-modal');
+  const submitTaskBtn = document.querySelector('.submit-add-task-btn');
   taskModal.classList.add('visible');
 
   closeTaskModalBtn.addEventListener('click', function() {
     taskModal.classList.remove("visible");
+  });
+
+  submitTaskBtn.addEventListener("click", function() {
+    const taskName = document.querySelector('.add-task-modal-name-input').value;
+    const taskDescription = document.querySelector('.add-task-modal-description-input').value;
+
+    const newTaskPromise = newTask(taskName, taskDescription, token);
+    newTaskPromise.then((res) => res.json()).then((json => {
+      console.log(json);
+    }))
   })
-})
+});
 
 // Check if the user is logged in
 const getCookie = (returnType) => {
@@ -149,4 +160,18 @@ const updateTask = (userToken, taskTitle, taskDescription, completedStatus) => {
   return res;
 }
 
+const newTask = (name, description, userToken) => {
+  const res = fetch(`${url}/user/update-tasks`, {
+    method: "PATCH",
+    headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
+    body: JSON.stringify({
+      name: name,
+      description: description,
+      is_completed: false
+    })
+  });
+
+  return res;
+}
+
 loadUserTasks();

assets/pages/user.html

@@ -94,12 +94,12 @@
         </div>
         <div class="modal-content">
           <label for="modal-name-input">Name</label>
-          <input id="modal-name-input" class="modal-name-input" />
-          <label for="modal-description-input">Description</label>
-          <input id="modal-description-input" class="modal-description-input" />
+          <input id="add-task-modal-name-input" class="add-task-modal-name-input" placeholder="Finish work" />
+          <label for="add-task-modal-description-input">Description</label>
+          <input id="modal-description-input" class="add-task-modal-description-input" placeholder="Finish work by 5pm" />
         </div>
 
-        <button class="submit-task-btn">Save Changes</button>
+        <button class="submit-add-task-btn">Save Changes</button>
       </div>
     </section>