timmybee/diploma_todoapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Tim Basten
2026-03-31 19:32:41 +08:00
parent c0e035a4bd
commit 2f3ea44a5c
9 changed files with 470 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
frontend/js/api.js
View File

@@ -1,38 +1,3 @@
const tasks = [
{
id: 1,
completed: false,
title: "Buy groceries for the week",
description: "Pick up vegetables, fruits, milk, eggs, and bread from the supermarket.",
dueDate: "14/03/2026",
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
},
{
id: 2,
completed: false,
title: "Clean the apartment",
description: "Vacuum the floors, wipe kitchen surfaces, and take out the trash.",
dueDate: "16/03/2026",
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
},
{
id: 3,
completed: false,
title: "Call the dentist for appointment",
description: "Book a routine checkup and confirm available time slots for next week.",
dueDate: "17/03/2026",
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
},
{
id: 4,
completed: true,
title: "Do laundry and fold clothes",
description: "Wash dark and light loads separately, then fold and organize clean clothes.",
dueDate: "21/03/2026",
dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
}
];
// GLOBALS
const $taskForm = document.getElementById('taskForm');
@@ -68,66 +33,117 @@ $taskForm.addEventListener("submit", (event) => {
}
});
});
// DISPLAY TASKS
function displayTasks() {
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.innerHTML = `
<div class="d-flex justify-content-between align-items-start">
<h4 class="${done} col-11">${task.title}</h4>
<button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
</div>
<p class="${done}">${task.description}</p>
<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>`
: `
<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>
`;
return li;
}
$toDoList.innerHTML = "";
$completedList.innerHTML = "";
tasks.forEach(task => {
const formattedTask = formatTask(task);
task.completed
? $completedList.appendChild(formattedTask)
: $toDoList.appendChild(formattedTask)
})
resetForm();
// EXAMPLE API
async function exampleAPI() {
const response = await fetch("http://localhost:3001/test");
const data = await response.text();
console.log(data);
}
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()),
exampleAPI();
// DISPLAY TASKS
async function displayTasks() {
const response = await fetch("http://localhost:3001/api/tasks")
if (!response.ok) {
throw new Error(`Failed to get tasks: ${response.status}`);
}
tasks.push(taskDetails);
displayTasks();
const data = await response.json();
try {
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.innerHTML = `
<div class="d-flex justify-content-between align-items-start">
<h4 class="${done} col-11">${task.title}</h4>
<button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
</div>
<p class="${done}">${task.description}</p>
<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>`
: `
<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>
`;
return li;
}
$toDoList.innerHTML = "";
$completedList.innerHTML = "";
const tasks = Array.isArray(data) ? data : [];
if (!Array.isArray(data)) {
console.error("ERROR: Expected an array of tasks from /api/tasks", data);
}
tasks.forEach(task => {
const formattedTask = formatTask(task);
task.completed
? $completedList.appendChild(formattedTask)
: $toDoList.appendChild(formattedTask)
})
resetForm();
} catch (error) {
console.error(`ERROR: ${error}`);
}
}
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) {
alert("Please fill in all fields");
return;
}
try {
const response = await fetch("http://localhost:3001/api/tasks/todo", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(taskDetails)
});
if (!response.ok) {
throw new Error(`Failed to create task: ${response.status}`);
}
const data = await response.json();
console.log("Task created:", data);
displayTasks();
}
catch (error) {
console.error(`ERROR: ${error}`);
}
};
function toggleTaskStatus(taskId) {