---
# System prepended metadata

title: "\U0001F3C5 Day 39 - 購物車 API"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 39 - 購物車 API

請同學修改 Day 37 的內容，串接「加入購物車、取得購物車列表」的 API（如圖），完成任務需求
> 可以使用此 [CodePen 模板](https://codepen.io/hexschool/pen/eYKByqq?editors=1010)

![](https://i.imgur.com/P7n6C04.png)


![](https://i.imgur.com/pl5j3gE.png)



任務要求條列如下：
> 1. 請同學在商品列表新增「加入購物車」按鈕，點擊按鈕可以新增一筆購物車項目（預設數量為 1）
> 2. 新增的購物車項目可以及時的渲染於上方列表，如下圖：

![](https://i.imgur.com/HT8eHzR.png)





## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

請記得填入自己的 API 名稱

https://codepen.io/hexschool/pen/eYKBVJY?editors=1010
-->




回報區
---
| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
|  01 | voke  | [CodePen](https://codepen.io/FiSi-the-lessful/pen/xxvmqBq) | 
| 02 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/MWNMQaG) | 
| 03 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/MWNMrGE)|
| 04 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/VwoJxaE)|
|  05   |   Ariel    | [CodePen](https://codepen.io/ariel0510/pen/XWvLEVd?editors=1010) |
| 06 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/MWNMGEm?editors=0010) | 
| 07  |陳小廷 | [CodePen](https://codepen.io/ting1124/pen/jOgjzdO) | 
| 08  | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/BaXgGmq?editors=1011) |
| 09  | Sonia | [CodePen](https://codepen.io/YUJOU/pen/ZEgdrOj?editors=1010) | 
| 10  | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/bGXPmro) | 
| 11 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/KKOjewy) | 
| 12 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/BaXXNdW) | 
|13|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/VwoJGQg) |
|  14   |   chris    | [CodePen](https://codepen.io/chris-chen-the-selector/pen/gbYYojE) |
| 15 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/GgKKpyO?editors=1011) | 
| 16 | 睿睿 | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/QWeXoLZ?editors=0011) | 
| 17 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/poMMNEp) | 
| 18 | Mike | [CodePen](https://codepen.io/mike2049/pen/VYZZWOz?editors=0011) |
| 19 | Seris | [CodePen](https://codepen.io/Dale-Chien/pen/ZYzEEdg) |
| 20 | charlottelee | [CodePen](https://codepen.io/char849/pen/KwPKjQR) |
|  21   |   610    | [CodePen](https://codepen.io/YI-LING-LIU/pen/WNVVwRE) |
|  22   |  .tsz_ying   | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/RNbNaqz?editors=0011) |
|  23  |   雪粒    | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/ZYzbxWe) | 
|  24  |   Joannehu    | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/YzmmdVj?editors=1111) | 
|  25  |   Jack   | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/GgKqbzY?editors=1011) | 

<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->