${task.completed ?
``
:
`
`
}
Created on: ${new Date(task.dateCreated).toLocaleDateString()}
`;
return li;
}
/**
* Render the cached task list into the To-Do and Completed columns.
* Applies the current search term (if any) as a case-insensitive
* match on title or description, and toggles per-column empty-state
* messages when nothing matches.
*/
function renderTasks() {
const term = (searchInput?.value || '').trim().toLowerCase();
const filtered = term
? allTasks.filter(t =>
t.title.toLowerCase().includes(term) ||
t.description.toLowerCase().includes(term))
: allTasks;
toDoList.innerHTML = '';
completedList.innerHTML = '';
let activeCount = 0;
let completedCount = 0;
filtered.forEach(task => {
const node = formatTask(task);
if (task.completed) {
completedList.appendChild(node);
completedCount += 1;
} else {
toDoList.appendChild(node);
activeCount += 1;
}
});
toDoEmpty?.classList.toggle('d-none', activeCount > 0);
completedEmpty?.classList.toggle('d-none', completedCount > 0);
}
/**
* Recompute and display the four dashboard stat cards.
*
* Active - tasks that are not yet completed
* Completed - tasks marked done
* Overdue - active tasks whose due date is before today
* Due Today - active tasks whose due date is today
*
* Dates are normalised to midnight so the comparison ignores time
* of day.
*/
function updateStats(tasks) {
const today = new Date();
today.setHours(0, 0, 0, 0);
let active = 0, completed = 0, overdue = 0, dueToday = 0;
tasks.forEach(task => {
const due = new Date(task.dueDate);
due.setHours(0, 0, 0, 0);
if (task.completed) {
completed += 1;
} else {
active += 1;
if (due.getTime() < today.getTime()) {
overdue += 1;
} else if (due.getTime() === today.getTime()) {
dueToday += 1;
}
}
});
const set = (id, value) => {
const el = document.getElementById(id);
if (el) el.textContent = value;
};
set('statActive', active);
set('statCompleted', completed);
set('statOverdue', overdue);
set('statDueToday', dueToday);
}
async function createNewTask() {
const taskDetails = {
title: taskForm.taskName.value.trim(),
description: taskForm.taskDescription.value.trim(),
dueDate: taskForm.dueDate.value
}
if (!taskDetails.title || !taskDetails.description || !taskDetails.dueDate) {
return alert("All fields required!");
}
try {
const response = await fetch(`${url}/api/tasks/todo`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(taskDetails)
});
if (!response.ok) {
throw new Error(`Failed to post task: ${response.status}`);
}
const data = await response.json();
console.log(data);
displayTasks();
} catch (error) {
console.error("Error:", error);
}
}
async function completeTask(taskId) {
try {
const response = await fetch(`${url}/api/tasks/complete/${taskId}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ completed: true })
});
if (!response.ok) {
throw new Error(`Failed to complete task: ${response.status}`);
}
const data = await response.json();
console.log("Task completed:", data);
displayTasks();
}
catch (error) {
console.error("Error:", error);
}
};
async function taskNotCompleted(taskId) {
try {
const response = await fetch(`${url}/api/tasks/notComplete/${taskId}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ completed: false })
});
if (!response.ok) {
throw new Error(`Failed to make task incomplete: ${response.status}`);
}
const data = await response.json();
console.log("Task not complete:", data);
displayTasks();
} catch (error) {
console.error("Error:", error);
}
};
async function deleteTask(taskId) {
try {
const response = await fetch(`${url}/api/tasks/delete/${taskId}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json"
}
});
if (!response.ok) {
throw new Error(`Failed to delete task: ${response.status}`);
}
const data = await response.json();
console.log({ message: "Deleted Task:", Task: data });
displayTasks();
} catch (error) {
console.error("Error:", error);
}
};
async function editTask(taskId) {
const updatedDetails = {
title: document.getElementById('editTaskName').value.trim(),
description: document.getElementById('editTaskDescription').value.trim(),
dueDate: document.getElementById('editDueDate').value
};
if (!updatedDetails.title || !updatedDetails.description || !updatedDetails.dueDate) {
return alert("All fields required!");
}
try {
const response = await fetch(`${url}/api/tasks/update/${taskId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(updatedDetails)
});
if (!response.ok) {
throw new Error(`Failed to edit task: ${response.status}`);
}
const data = await response.json();
console.log("Edited Task:", data);
displayTasks();
} catch (error) {
console.error("Error:", error);
}
};