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

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

本步驟不需修改此語言。

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

本步驟不需修改此語言。

  return products;
  list.textContent = "尚未完成渲染";

  const start = (page - 1) * pageSize;
  return getFilteredProducts().slice(start, start + pageSize);
function createProductCard(product) {
  const card = document.createElement("article");
  card.className = "product-card";
  const title = document.createElement("h2");
  title.textContent = product.name;
  const price = document.createElement("p");
  price.textContent = `$${product.price}`;
  card.append(title, price);
  return card;
}
  if (getFilteredProducts().length === 0) {
    const emptyMessage = document.createElement("p");
    emptyMessage.className = "empty-state";
    emptyMessage.textContent = "找不到符合條件的產品。";
    list.replaceChildren(emptyMessage);
    info.textContent = "第 0 / 0 頁";
    updateControls();
    return;
  }
  list.replaceChildren(...getPageItems().map(createProductCard));
  info.textContent = `第 ${page} 頁`;
  updateControls();

本練習沒有這個檔案。

本步驟不需修改此語言。

1. 準備

   先重新整理本階段頁面，記住目前畫面，再開始操作。

2. 操作

   先設定一組有多筆結果的查找條件，再切換頁碼，比對卡片內容與頁碼是否同步。

3. 預期

   查找結果每頁最多三筆，卡片與頁碼同步