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

請同學修改 [Day 37 的每日任務](https://hackmd.io/qpMD84apT1KmGmTtLxhcxA) ，串接「加入購物車、取得購物車列表」的 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 / 答案 |
|:----------:|:-------------------------------------------------------:|
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/yLEKxGx?editors=0011) |
YC#2522 | [CodePen](https://codepen.io/YCLu/pen/qBKxRqM) |
Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/GRGxYov?editors=0010) |
| 薯餅#3581 | [codepen](https://codepen.io/ColdingPoTaTo/pen/JjZLago) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/QWxmZmo?editors=1010) |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/zYaWmxg) |
| Kimi #9564 | [CodePen](https://codepen.io/kimihu91/pen/ZERRPRQ) |
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/oNyEZqx) |
| yawun#0042 | [CodePen](https://codepen.io/monicalin/pen/bGKvQVP) |
| 柔柔#1716 | [Codepen](https://codepen.io/rouchen/pen/eYKMQzB?editors=1010) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/MWXVPbd) |
| shinyhung#3825 | [CodePen](https://codepen.io/sean_1215/pen/dyKmqrG?editors=1111) |
| Ruby Chen#7452 | [CodePen](https://codepen.io/ruby92429/pen/rNKdQwm) |
| azami#5986 | [Codepen](https://codepen.io/azami/pen/KKeorPK) |
| 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/wvXmRVp?editors=1111) |
| Potatolee#7749 | [Codepen](https://codepen.io/potatoleee/pen/ExREdEK?editors=1111) |
| 軟綿綿 (๑•ᴗ•๑) ♡#3627 | [CodePen](https://codepen.io/Connie-Chien/pen/bGKvmzz?editors=0010) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/abKYRNz) |
| mandylai#4055 | [Codepen](https://codepen.io/mandy-lai-2/pen/JjZLmrK) |
| Peng#9811 | [CodePen](https://codepen.io/peng-027/pen/LYrdMEq) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/vYrRPYj) |
| William Lai#0196 | [CodePen](https://codepen.io/WILL_Wu/pen/vYrRPYj) |
| amy芳#1385 | [CodePen](https://codepen.io/amy-chieng/pen/RwJMmRV) |
| Hironaka#7367 | [CodePen](https://codepen.io/Hironaka0815/pen/abKYgmw?editors=0010) |
| Yuna Huang#2692 | [CodePen](https://codepen.io/Yuna1002/pen/wvXydBE?editors=0010) |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/xxzWNxx?editors=1011) |
| 圈圈#4060 | [codepen](https://codepen.io/wjejfczn-the-bold/pen/vYrRzMX) |
| SASIMI#5099 | [Codepen](https://codepen.io/sashimi1327/pen/MWXVRwO) |
| albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/rNKdZXb?editors=0011) |
| yumy#1940 | [CodePen](https://codepen.io/yumyyang/pen/bGKvxXL) |
| PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/wvXjajE) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/yLEKxWR) |
| hannahTW#2224 | [CodePen](https://codepen.io/hangineer/pen/zYajrQX?editors=1011) |
| Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/jOKxOdM?editors=1011) |
| LHchien33#6232 | [codepen](https://codepen.io/lin_chien/pen/GRGxYrO?editors=0010) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/OJEvBbQ) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/LYrdgGN?editors=0011) |
| Mylène#2481 | [Codepen](https://codepen.io/hamajibashi/pen/jOKzdKR) |
| 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/qBKYNZP) |
| beta lin#1445 | [CodePen](https://codepen.io/linbeta/pen/poKVEEr) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/VwdXOeK) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/PoaRXpz) |
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/GRGdWVr) |
| Powei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/jOKxwPg?editors=1111) |
| kuku#3118 | [Codepen](https://codepen.io/mengting-ku/pen/RwJyLop?editors=1010) |
| Iris_#8462 | [Codepen](https://codepen.io/irissamy/pen/ZERoKJN?editors=1011) |
| KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/VwdxpXZ) |
| yoyo#1003 | [Codepen](https://codepen.io/pen/mdKLBjq) |
| YI#0863 | [Codepen](https://codepen.io/YI0305/pen/MWXGrwv?editors=1111) |
| Paul#7426 | [CodePen](https://codepen.io/paul-1997/pen/poKVdNv?editors=1011) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/JjZvBzL?editors=1011) |
| 我是泇吟#5189 | [CodePen](https://codepen.io/kljuqbxs/pen/abKGGKP) |
| Jill#5577 | [CodePen](https://codepen.io/Jillkate/pen/oNydZxm) |
| masterYan#2480 | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/jOKxXPM?editors=1010) |
| Tuhacrt#0008 | [codepen](https://codepen.io/Tuhacrt/pen/rNKvEdW) |
| Rr#2215 | [Codepen](https://codepen.io/rufangcheng/pen/YzvLKgY) |
| Kevin#6131 | [codepen](https://codepen.io/xlqjezvc-the-encoder/pen/KKeRvLR?editors=1011) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/WNyJdRR) |
|banazita#5143|[CodePene](https://codepen.io/banazita/pen/gOKvmmm?editors=1111)|
|WEI_RIO#9342|[codepen](https://codepen.io/wei_wu/pen/poKVwdg?editors=1011)|
|粉蒸肉#6214|[codepen](https://codepen.io/wrightyu/pen/eYKMXvg?editors=1010)|
|jimmyFang#9575|[codepen](https://codepen.io/pohxiqqo/pen/GRGBROd)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/MWXBpGo)|
|予予#9627|[CodePen](https://codepen.io/kiqzcraa/pen/eYKjZrb)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/GRGGEVe?editors=1011) |
| yoshidc#0455 | [CodePen](https://codepen.io/yoshiyyc/pen/XWYByMW) |
| Cliff#4606 |[Codepen](https://codepen.io/Cliff_hex/pen/zYaJKWd?editors=1010)|
| Cynthia1111#1822 |[Codepen](https://codepen.io/Cynthia1111/pen/mdKGZPO)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/abKKoMd?editors=1011)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/LYrrvRr)|
|Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/WNyayrQ)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/zYaJKWd)|
|charlottelee849#0366|[Codepen](https://codepen.io/char849/pen/abKRxzv?editors=0011)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/XWYyjvp?editors=1010)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/qBKJeXr?editors=1011)|
|Yishan#4902|[Codepen](https://codepen.io/gdjrehhw-the-animator/pen/VwdgzPe?editors=1111)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/jOKjWpy)|
|蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/WNKeZBO?editors=1011)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/ZEjEQLz?editors=1011)|
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/YzjzwdL?editors=1011)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/vYzVErJ?editors=1111)|