前言

昨天成功把 MySQL 裡的任務顯示到網頁上之後，現在打開 Todo 頁面，已經可以直接看到資料庫裡真正的任務。

但目前還是只能看，不能操作。

如果今天完成了一個任務，我還是得回到 Postman 呼叫：

PUT /tasks/<task_id>/complete

想刪除任務也一樣，要使用：

DELETE /tasks/<task_id>

這樣其實還是不太像真的 Todo。

所以今天就來把前面已經做好的 API 搬到網頁上，替每一個任務加入「完成任務」和「刪除」按鈕。

替任務加入按鈕

修改 index.html

原本每一張任務卡只有顯示資料，今天在下面加入兩個按鈕：

<div class="actions">
    <button class="complete-btn"
            onclick="completeTask({{ task.task_id }})">
        完成任務
    </button>

    <button class="delete-btn"
            onclick="deleteTask({{ task.task_id }})">
        刪除
    </button>
</div>

另外也替每一張任務卡加上自己的 ID：

<div class="task" id="task-{{ task.task_id }}">

這裡使用的是 MySQL 裡每一筆任務自己的 task_id。

例如：

task_id = 5

最後產生的 HTML 就會類似：

之後 JavaScript 才知道使用者按下的是哪一個任務。

加入按鈕樣式

接著稍微幫兩個按鈕加上 CSS

.actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

button {
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.complete-btn {
    background: #222;
    color: white;
}

.delete-btn {
    background: #e5e5e5;
    color: #333;
}

button:hover {
    opacity: 0.8;
}

重新整理網頁後，每一張任務卡下面就會多出：

完成任務　刪除

不過現在這些按鈕還沒有反應，接下來還要讓按鈕真的去呼叫前面寫好的 API。

用 fetch() 完成任務

在 index.html 最下面加入JavaScript：

async function completeTask(taskId) {
    try {
        const response = await fetch(`/tasks/${taskId}/complete`, {
            method: "PUT"
        });

        const data = await response.json();

        if (response.ok) {
            document.getElementById(`task-${taskId}`).remove();
        } else {
            alert(data.error || "完成任務失敗");
        }
    } catch (error) {
        console.error(error);
        alert("發生錯誤");
    }
}

這裡使用：

fetch(`/tasks/${taskId}/complete`, {
    method: "PUT"
});

去呼叫前面已經做過的：

PUT /tasks/<task_id>/complete

而成功之後：

document.getElementById(task-${taskId}).remove();

會直接把這張任務卡從目前的畫面移除。

所以使用者不需要再自己重新整理網頁。

加入刪除任務

接著處理第二個按鈕。

async function deleteTask(taskId) {
    const confirmed = confirm("確定要刪除這個任務嗎？");

    if (!confirmed) {
        return;
    }

    try {
        const response = await fetch(`/tasks/${taskId}`, {
            method: "DELETE"
        });

        const data = await response.json();

        if (response.ok) {
            document.getElementById(`task-${taskId}`).remove();
        } else {
            alert(data.error || "刪除任務失敗");
        }
    } catch (error) {
        console.error(error);
        alert("發生錯誤");
    }
}

刪除任務使用的是前面已經做過的：

DELETE /tasks/<task_id>

不過刪除和完成不太一樣。

完成只是把任務改成 done，資料還存在。

刪除則是真的把資料從資料庫移除，所以我多加了一個：

confirm("確定要刪除這個任務嗎？");

按下刪除後，瀏覽器會先詢問一次。

確定要刪除這個任務嗎？

如果按取消：

if (!confirmed) {
    return;
}

就不會繼續執行刪除。

確定之後才會送出 DELETE Request。

網頁目前樣子

實際測試後，按下「完成任務」，任務會直接從目前的 Todo 清單消失，資料庫裡的 progress 也會變成 100，status 變成 done。

按下「刪除」則會先跳出確認視窗，確定後才會刪除任務。

這樣完成和刪除兩個功能就都可以直接從網頁操作了。

昨天我們解決的是「看得到」，今天則開始解決「用得到」。

原本在 Postman 測試的 PUT 和 DELETE API，現在已經可以透過網頁上的按鈕直接操作。

做到這裡，Todo 頁面已經可以：

顯示任務
完成任務
刪除任務

不過目前新增任務或修改任務還是得回到 Postman 使用：

所以下一篇就繼續把剩下的兩個操作搬進來：

直接在網頁新增任務，也可以修改已經存在的任務。

如果這兩個也完成，前面做過的 CRUD 就真的全部進到 Todo 網頁裡了。