CHAPTER 22 · PRACTICE WORKSPACE

產品列表、資料渲染與分頁

完成可前後翻頁的產品列表

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

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

依關鍵字與價格查找產品

修改檔案:script.js

完成後看見:可以關鍵字、價格或兩者查找產品

TASK-02稍後處理

分頁並渲染查找結果

修改檔案:script.js

完成後看見:查找結果每頁最多三筆,卡片與頁碼同步

TASK-03稍後處理

限制上一頁與下一頁邊界

修改檔案:script.js

完成後看見:首末頁按鈕正確停用,無查找結果時顯示 0 / 0 且兩鍵停用

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼,再從 TASK-01 開始修改。

PRODUCT LIST

產品列表控制台

把一批產品資料,逐步變成可查找、可翻頁、守住邊界的列表。

查找產品

關鍵字與價格條件會一路保留;每一階段只新增一個責任。

操作後請回頭看右側卡片與頁碼,確認畫面是否跟著狀態一起改變。

RESULTS

產品清單

7 筆資料

CONTINUE

開始 TASK-01

前往 Checkpoint 1,依要求完成「依關鍵字與價格查找產品」。

前往 Checkpoint 1:完成 TASK-01