backend

frontend/js/api.js

@@ -39,21 +39,46 @@ const $taskForm = document.getElementById('taskForm');
 const $toDoList = document.getElementById('toDoList');
 const $completedList = document.getElementById('completedList');
 
+// RESET FORM
+function resetForm() {
+    $taskForm.reset();
+};
+
 // EVENT LISTENERS
 window.addEventListener("DOMContentLoaded", () => {
     displayTasks();
-})
+});
+
+$taskForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    createNewTask();
+});
+
+
+[$toDoList, $completedList].forEach(list => {
+    list.addEventListener("click", (event) => {
+        if (
+            event.target.classList.contains("done") ||
+            event.target.classList.contains("notDone")
+        ) {
+            toggleTaskStatus(event.target.dataset.id);
+        }
+        else if (event.target.classList.contains("delete")) {
+            deleteTask(event.target.dataset.id);
+        }
+    });
+});
 
 // DISPLAY TASKS
 
-function displayTasks(){
+function displayTasks() {
 
-    function formatTask(task){
+    function formatTask(task) {
         const li = document.createElement("li");
 
-        li.classList.add('card','p-3','mt-2');
-        const done = task.completed 
-            ? "text-decoration-line-through opacity-50" 
+        li.classList.add('card', 'p-3', 'mt-2');
+        const done = task.completed
+            ? "text-decoration-line-through opacity-50"
             : "";
         li.innerHTML = `
         <div class="d-flex justify-content-between align-items-start">
@@ -64,14 +89,13 @@ function displayTasks(){
         <p class="${done}"><strong>Due: </strong>${task.dueDate}</p>
             <div class="d-flex justify-content-between align-items-end">
                 <div>
-                    ${
-                        task.completed 
-                            ? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
-                            : `
+                    ${task.completed
+                ? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
+                : `
                                 <button data-id="${task.id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
                                 <button data-id="${task.id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
                             `
-                    }
+            }
                     </div>
                 <p class="m-0 ${done}"><strong>Created on: </strong>${task.dateCreated}</p>
             </div>
@@ -86,8 +110,44 @@ function displayTasks(){
 
     tasks.forEach(task => {
         const formattedTask = formatTask(task);
-        task.completed 
-            ? $completedList.appendChild(formattedTask) 
+        task.completed
+            ? $completedList.appendChild(formattedTask)
             : $toDoList.appendChild(formattedTask)
     })
+    resetForm();
 }
+
+function createNewTask() {
+    const taskDetails = {
+        id: tasks.length + 1,
+        completed: false,
+        title: $taskForm.taskName.value,
+        description: $taskForm.taskDescription.value,
+        dueDate: convertDate($taskForm.dueDate.value),
+        dateCreated: convertDate(Date.now()),
+    }
+    tasks.push(taskDetails);
+    displayTasks();
+};
+
+function toggleTaskStatus(taskId) {
+    const task = tasks.find(task => task.id === Number(taskId));
+
+    if (task) {
+        task.completed = !task.completed;
+        displayTasks();
+    }
+}
+
+function deleteTask(taskId) {
+    const taskIndex = tasks.findIndex(task => task.id == taskId);
+    if (taskIndex !== -1) {
+        tasks.splice(taskIndex, 1);
+    }
+    displayTasks();
+
+}
+
+function convertDate(dateString) {
+    return new Date(dateString).toLocaleDateString("en-AU");
+}