STEP GUIDE · Checkpoint 1

這個步驟要做什麼、改哪裡、怎麼看結果

這一步聚焦 TASK-01；下方只比較「Starter → Checkpoint 1」的真實異動。

01

三項 Task 進度

TASK-01本步驟處理

顯示 loading 狀態

預計修改：script.js

完成後：按下載入後立即顯示讀取中

TASK-02稍後處理

讀取並解析 JSON

預計修改：script.js

完成後：成功取得兩筆遠端格式資料

TASK-03稍後處理

呈現 loading、success、empty、error 四態

預計修改：script.js

完成後：loading 立即出現，成功安全顯示卡片，空資料與失敗各有明確訊息

02

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案：index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
CSS本步驟無異動

檔案：style.css

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
JavaScript本步驟有異動

檔案：script.js

修改前

  setStatus("尚未完成載入流程");

修改後

  setStatus("讀取中…", "loading");
README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
03

怎麼看到結果

  1. 準備

    先開啟 DevTools 的 Network 與 Console 面板。

  2. 操作

    按下「成功載入」或「模擬失敗」，確認畫面會立即顯示「讀取中…」；這一步尚未真的發出請求。

  3. 預期

    按下載入後立即顯示讀取中
Checkpoint 1 TASK-01

顯示 loading 狀態

完成後可見：按下載入後立即顯示讀取中

內建 JSON 練習

推薦閱讀

尚未載入