CHAPTER 26 · PRACTICE WORKSPACE

TODO A：CRUD、render、localStorage

完成可新增、切換與刪除且能保存的本機待辦事項 App

02 Checkpoint 1 1/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

新增並安全顯示待辦事項

修改檔案：script.js

完成後看見：新增唯一 id 項目，輸入只會成為文字節點

TASK-02本階段處理

切換完成狀態

修改檔案：script.js

完成後看見：點擊完成可切換 done 並保存

TASK-03稍後處理

刪除並保存待辦事項

修改檔案：script.js、index.html

完成後看見：刪除後重整頁面不會復活

WORKSPACE

本階段實作區

已完成 TASK-01；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理：切換完成狀態

修改：script.js

完成後：點擊完成可切換 done 並保存

講解時展開：2 個小型比較

完成切換 vs 刪除｜兩種資料操作

比較：toggle 只改 done 狀態，remove 才移除項目；按鈕責任不能混在一起。

現在做：在 Checkpoint 2 清除 course-todos 後新增「第一筆」與「第二筆」，點第一筆的 [data-action=toggle]；確認清單仍有 2 筆、第一筆有 done class，第二筆未被刪除，storage 仍保留 2 筆。

看預期與證據

預期：toggle 只改指定 id 的 done，不移除任何項目；remove 的責任仍是刪除資料。

證據：留下兩筆 id、第一筆 done class、第二筆仍存在與 storage 長度 2 四項證據。

畫面狀態 vs 保存結果｜切換後要重整

比較：點擊後畫面變化只是第一步，還要重新整理確認保存的 done 狀態一致。

現在做：在 Checkpoint 2 新增「要保存的任務」，點完成後先記錄 storage 的 done=true，再重新整理確認同一筆仍有 done class 且 storage 的 id 與文字不變。

看預期與證據

預期：畫面切換與 course-todos 保存結果一致；只有重新整理後仍成立，才算完成。

證據：留下 toggle 前後的 id、done、class 與重新整理後畫面四項證據。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 新增兩筆待辦並重整，確認唯一 id 與文字已保存；接著點完成按鈕，觀察 done 尚未改變。
  2. B｜預測：點擊完成狀態後重新整理，確認 done 狀態由 localStorage 保存。
  3. C｜實作：在 script.js 的 toggleTodo() 完成「切換完成狀態」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 toggleTodo() 與 script.js，最後重跑原操作。
  5. E｜驗收：點擊完成可切換 done 並保存

完成條件：DONE-02：點擊完成可切換 done 並保存

我的待辦事項

    CONTINUE

    繼續完成 TASK-02

    前往 Checkpoint 2，依要求完成「切換完成狀態」。

    前往 Checkpoint 2：完成 TASK-02

    CHAPTER HANDOFF

    從本機 CRUD，交棒到可復原的同步佇列

    接收第 25 章：沿用 owner／guest／unauth 的資料責任觀念；本章不共用 Auth runtime，改把「誰擁有資料」轉成每筆項目的唯一 id 與本機保存。

    交給第 27 章：完成後帶著 create、toggle、remove、safe render、`course-todos` 重整證據；下一章直接加入 queue、mock sender、offline 保留與 retry，不把 localStorage 說成同步。

    前往第 27 章：Mock 同步、失敗復原與 GAS 延伸