今天開始做進階功能，讓待辦事項可以依照類別分組，例如「作業」「生活」「鐵人賽」。

今天做的事
在 todos 資料表裡新增一個 category 欄位，預設值是「未分類」：

db.run(`
  CREATE TABLE IF NOT EXISTS todos (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    done INTEGER DEFAULT 0,
    category TEXT DEFAULT '未分類'
  )
`);

前端新增一個下拉選單，讓使用者新增時可以選分類，後端 POST 路由也跟著接收並存入 category。清單畫面上每筆待辦事項前面會顯示 [分類] 標籤。

卡關
今天改程式碼時，把第11天跟第12天的新增按鈕邏輯疊在一起了，複製貼上改寫的時候，忘記刪掉原本的那一段，結果裡同時存在兩份fetch('/api/todos', {...})，多出來的那段殘留在最下面，完全沒包在任何函式或事件裡，網頁一載入就直接被執行。
打開Console一看，跳出Uncaught ReferenceError: title is not defined。因為那段多餘的程式碼裡用到的title變數，其實只存在於新增按鈕事件的函式範圍內，這段殘留程式碼跑在外面，根本抓不到title是什麼。更麻煩的是，JavaScript遇到這個錯誤後，後面的程式碼就整個停止執行，導致我一度以為是分類標籤的功能寫錯了，實際上問題出在完全不相干的地方。
後來逐段檢查的內容，才發現同一段邏輯被重複貼了兩次，刪掉多餘的那段之後，功能才正常。這次的教訓是：改寫舊程式碼時，要連同舊的那份一起刪乾淨，而不是在旁邊貼一份新的，不然很容易留下這種看起來不相關、但其實會讓整個網頁掛掉的殘留程式碼。

心得
今天也是第一次切身感受到資料庫砍掉重建在真實專案裡其實是有代價的——因為目前都是測試資料，刪掉重建沒有任何損失；但如果這是正式上線、已經有真實使用者資料的系統，絕對不能用這種方式處理，這也讓我第一次意識到資料庫結構異動是需要更謹慎規劃的事情，不像前端改個CSS顏色那樣隨便改隨便看效果。