---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 39 - 購物車 API

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



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


## 回報流程

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


<!-- 解答：

請記得填入自己的 API 名稱

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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
|Celine 510|[CodePen](https://codepen.io/Celine-510/pen/yLZxwmO)|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/wvNEOXO)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/YzBObPz)|
| kuanju27 |[CodePen](https://codepen.io/Eero-Chiao/pen/zYeJXoP)|
| xin |[CodePen](https://codepen.io/Estherrrrrr999/pen/xxMJyRx)|
| 依依 |[CodePen](https://codepen.io/Rita-Yang/pen/wvNEZBV?editors=1011)|
| Uli |[CodePen](https://codepen.io/uli1313/pen/MWLqRJp?editors=1011)|
| pinyi_9 |[CodePen](https://codepen.io/Wpypy/pen/MWLqLqL?editors=1011)|
| kawa |[CodePen](https://codepen.io/z83xji6/pen/QWYVYmr?editors=0110)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/xxMaMJx)|
| Ching |[CodePen](https://codepen.io/tzuchingg/pen/ExrdYwJ)|
| Winnie |[CodePen](https://codepen.io/codepen-io-winnie/pen/VwgGONm?editors=1010)|
| ann6212 |[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/KKJGwLv?editors=1011)|
| jamesli_92837 |[CodePen](https://codepen.io/kfovdlln-the-reactor/pen/dyagoWP?editors=1011)|
|Eden|[Codepen](https://codepen.io/iseden/pen/poGOYJB)|
| yuan! |[CodePen](https://codepen.io/townyuan/pen/vYbVLGQ)|
| yu.t_liu |[CodePen](https://codepen.io/YuT200053/pen/JjxmGKp?editors=1010)|
| 楓仔 |[CodePen](https://codepen.io/maplestartend/pen/WNPgWVj?editors=0010)|
| dora |[CodePen](https://codepen.io/dorayu/pen/oNmPKKR?editors=1011)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/PoVyNqN) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/KKJGMME?editors=0010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/NWoyBVy) |
| shuuu |[CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/dyagpga?editors=1011)|
| lychee_kk |[CodePen](https://codepen.io/kakakala/pen/rNPqWxr?editors=1010)|
| tanuki5863 |[CodePen](https://codepen.io/tanuki320/pen/YzBjoJO?editors=1010)|
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/OJdBywa)|
| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/RwvevWb?editors=1011)|
| cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/ExreMxj)|
| ⭐️小正 |[CodePen](https://codepen.io/colorgolden/pen/jOdvdde?editors=1011)|
| Rogan |[CodePen](https://codepen.io/RoganHsu/pen/eYxPNZj?editors=1011)|
| skypassion5000 |[CodePen](https://codepen.io/skypassion5000/pen/ZEwmezG?editors=0010)|
| 奔跑吧(GTR150) |[CodePen](https://codepen.io/Wer-Qwe/pen/XWOyOKZ?editors=1011)|
| macihuang |[CodePen](https://codepen.io/macy1215/pen/gOqZMZo)|
| hsu0921 |[CodePen](https://codepen.io/HSUANIN0327/pen/eYxxgBj)|
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/XWOOwRR)|
|小夏|[Codepen](https://codepen.io/michaelhsia/pen/oNmmrzR)|
| NathanJames |[CodePen](https://codepen.io/ufo060204/pen/KKJEzoz)|
| Oria |[CodePen](https://codepen.io/kajing/pen/vYbPGPP?editors=0011)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/abXMyGd) |
| Yijing |[CodePen](https://codepen.io/Yi-Jing-71080635/pen/JjxzVJd?editors=1010)|
| ChrsiSQR |[CodePen](https://codepen.io/ChrisSQR/pen/VwgNQxX)|
| 歐陽龍龍#1061 |[CodePen](https://codepen.io/dizzydog-rgb/pen/MWxgXeV)|
| Daylily |[CodePen](https://codepen.io/daylily/pen/yLwMdNK)|

<!--
| xxx |[CodePen](xxx)|
-->