document.addEventListener("DOMContentLoaded", () => {
    const taskForm = document.getElementById("task-form");
    const taskInput = document.getElementById("task-input");
    const taskList = document.getElementById("task-list");

    function loadTasks() {
        fetch("/api/tasks")
            .then(res => res.json())
            .then(tasks => {
                taskList.innerHTML = "";
                tasks.forEach(t => {
                    const li = document.createElement("li");
                    li.textContent = t.task;
                    taskList.appendChild(li);
                });
            });
    }

    taskForm.addEventListener("submit", e => {
        e.preventDefault();
        const task = taskInput.value.trim();
        if (!task) return;

        fetch("/api/tasks", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ task })
        }).then(() => {
            taskInput.value = "";
            loadTasks();
        });
    });

    loadTasks();
});