CHAPTER 16 · PRACTICE WORKSPACE

判斷、陣列、迴圈與 localStorage

可顯示作品清單並記住訪客名字的小功能

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

TASK STATUS

三項任務目前狀態

TASK-01已完成

用判斷產生正確歡迎訊息

修改檔案:script.js

完成後看見:空白時提醒輸入,有名字時顯示歡迎

TASK-02已完成

用陣列與迴圈渲染作品

修改檔案:script.js

完成後看見:三項作品從資料產生為清單

TASK-03已完成

把名字存入並讀回 localStorage

修改檔案:script.js

完成後看見:重新整理後能讀回名字;清空並儲存後舊名字不會復活

WORKSPACE

本階段實作區

已完成 TASK-03;請操作完整作品,逐項核對三項 Task 的可見結果。

DATA & MEMORY

作品清單與訪客名字

尚未儲存名字。

作品清單

    CHAPTER HANDOFF

    把第 15 章的 DOM 事件接成資料流程

    接收:上一章已驗收的具名函數、輸入事件更新 DOM、空白 fallback 與 class 狀態切換。

    本章交棒:空白/有效輸入判斷、works 陣列由迴圈交給 renderWorks() 產生清單,以及 portfolio-visitor 的 localStorage 保存與清除;第 17 章會在獨立輪播頁重用「資料陣列 → render → DOM」責任模式,不共用本頁檔案。

    CONTINUE

    把完成品帶進本章創作挑戰

    三項固定任務都已完成;下一步請改造需求、留下成果證據,不要停在照抄 Solution。

    前往本章創作挑戰