# 🏅 Day 18 - 搶救空蕩蕩的 3C 店：讓網頁「活」過來

校長開了一個大副業，他買進了很多產品，也設計了一個網頁要顯示他的 3C 商品，但網頁上只寫著「倉庫連線中...」。 現在你必須扮演 **「資料庫管理員」**，依照程式碼規定的格式，將商品上架！

今天的任務核心：**你不需要修改網頁的程式碼（HTML/JS），只需要依照格式，提供「資料 (Data)」即可。**

可先觀看[範例網址](https://codepen.io/liao/pen/VYazgBd)，裡面的產品資料，是有連結 Google Sheet 的

---

## 第一步：建立你的商品倉庫

### 1\. 任務主軸：自行填寫 (Blank Template)

1. 請先觀看這份 **[3C 商品庫存表 (空白範本)](https://docs.google.com/spreadsheets/d/1wiQJvbEj65ORHbY68CM-PZqnIhy7ZdI5Ci-KFZfiiDU/edit?gid=1023600832#gid=1023600832)** 到你的雲端硬碟，填入你自己的商品資料，目前裡面也已經有幾個範例資料了
2. 請您也依照規格新增 1~2 筆檔案
3. 點選左上角 「檔案」 → 「建立副本」 到你的雲端硬碟。

### 2\. 發布資料 (取得 API 連結)
- 點選 Google Sheet **「檔案」** → **「共用」** → **「發布到網路」**。
- 格式請選擇 **「逗號分隔值 (.csv)」**，複製那串網址。

觀看前 1 分半影片，瞭解如何操作
{%youtube BYT1S5WleYE %}
---

## 第三步：啟動網頁

1. 開啟 [CodePen 範本](https://codepen.io/liao/pen/VYazgBd) ，並複製到你的 Codepen 或 GitHub Pages。
2. 找到程式碼中 182 行的 `const CSV_URL = "..."`。
3. 把你在上一步驟複製的 CSV 網址貼進去。
4. **畫面會立即顯示你設定的商品！**

---

## 題目

1. 請使用 Vibe 或 CodePen 實作，並完成資料串接。您可以任意改主題跟商品資訊，調整自己喜歡的樣子都沒問題~
2. **請至少加入一筆「價格破十萬」的夢幻逸品**，並給予一個吸引人的 `tag`。
3. 驗證網頁能正確顯示所有商品、圖片和價格。

## 回報格式

1. **你的 CodePen / GitHub Pages 網址**。
2. **截圖**：請截圖你的網頁畫面，證明你已成功讓商品上架。