diploma_todoapp/frontend/js/api.js

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');
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 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();
}

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");
}