# 🏅 DAY37 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

注意事項
---
請先 [申請 API](https://livejs-api.hexschool.io/)，並參照 [API 文件](https://hexschool.github.io/hexschoolliveswagger/) 進行練習。

問題
---
請練習串接以下 API 取得產品列表:


並透過此 [CodePen 模板](https://codepen.io/znlcgmgk/pen/rNjmprp?editors=1011)，練習將取得的產品資料呈現於畫面如下:


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


<!-- 解答 (JS)

let baseUrl = "https://hexschoollivejs.herokuapp.com";
let api_path = "填入你的 API 名稱";
let productList = document.querySelector('.productList');

function getProduct() {
let url = `${baseUrl}/api/livejs/v1/customer/${api_path}/products`;
axios.get(url)
.then(function (res) {
let product = res.data.products
render(product);
})
.catch(function (error) {
console.log(error);
})
}
function render(product) {
let str = '';
product.forEach((item) => {
str += `
<div class="col-6 mb-3">
<div class="card">
<img src="${item.images}" class="card-img-top productImg" alt="${item.title}">
<div class="card-body">
<h5 class="card-title"><strong>標題:</strong> ${item.title}</h5>
<p class="card-text"><strong>種類:</strong> ${item.category}</p>
<p class="card-text"><strong>原始價格:</strong> ${item.origin_price}</p>
<p class="card-text"><strong>售價:</strong> ${item.price}</p>
<p class="card-text"><strong>描述:</strong> ${item.description}</p>
</div>
</div>
</div>
`
})
productList.innerHTML = str;
}
getProduct();

-->

| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/full/RwLNJvG |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/YzrzrzP|
| Sam | https://codepen.io/sam-hsu/pen/MWEWEwX |
| Iris Huang | https://codepen.io/ythuang/pen/dyVyVYy |
|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/JjrjrGq?editors=1111|
| POPEYE | https://codepen.io/popeye_ux/pen/NWaWajw |
|Aaron Tu|https://codepen.io/aarontu/pen/MWEWEmP|
| Yunei | https://codepen.io/Yunei/pen/wvrvrrr |
| 傅劍軒 | https://codepen.io/seonkuraito/pen/vYeYeEO?editors=0011 |
| Tim Lin | https://codepen.io/TimmyLin/pen/QWqWqJV?editors=1011 |
| 連小艾 | https://codepen.io/bolaslien/pen/OJxJxdz?editors=1010 |
|kk|https://codepen.io/potatokaka/pen/xxXxXJb?editors=0010|
| Bella Shya | https://codepen.io/BellaXie/pen/PoJoJEj?editors=1010 |
| YC | https://codepen.io/YCLu/pen/abLbVbd |
|Genos|https://codepen.io/pb220416/pen/ExwxbNK|
|lumei|https://codepen.io/l_umei/pen/MWEWObg|
|Cheng pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
|張喆|https://codepen.io/wow767t/pen/RwLwjyJ|
| Elaine Liu | https://codepen.io/elaine7598/pen/jOGOayo?editors=1011 |
| Jun Ting Lin | https://codepen.io/jake1155/pen/mdBdBYM |
|Jasper|https://codepen.io/li-jasper/pen/poWoazp|
|Calon|https://codepen.io/Calon0118/pen/ZEXErBM|
|Gill|https://codepen.io/Gill-Chin/pen/QWqWOdP?editors=0011|
|雪莉|https://codepen.io/utshang216/pen/dyVydpP|
| 小K | https://codepen.io/kelen1995/pen/gOGOvzR |
|AKI|https://codepen.io/akichen27/pen/XWeWZLr|
|陳暐中|https://codepen.io/wei-z/pen/LYzYdZx?editors=1111|
|Arista|https://codepen.io/arista-hsieh/pen/xxXxjpJ|
|有廖先生(Rain)|https://codepen.io/billpop741/pen/bGoGvaZ|
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=0011 |
| 米米 | https://codepen.io/Jameshsu0407/pen/JjrjZzY?editors=0010 |
| Louis | https://codepen.io/Louis164156/pen/yLzLPRY?editors=1111 |
| Trista | https://codepen.io/trista6140/pen/Jjrjmvj|
| Fleur | https://codepen.io/swwlee/pen/KKXKGZe |
|Jocelyn|https://codepen.io/enjoyful/pen/WNZNLZw?editors=0111|
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/xxXxMqN?editors=1111|
|Steven Chan | https://codepen.io/Steven1220/pen/oNGNmXr?editors=1011 |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/GRMRezY |
|yunyi | https://codepen.io/yunyi12374/pen/GRMRLzg?editors=1011 |
|艾瑞克|https://codepen.io/ericla/pen/NWaWeJb|
|Bonnie|https://codepen.io/bonnieli1414/pen/oNGNojZ |
|吉兒| https://codepen.io/Jillkate/pen/ZEXEZRX |
|tingyu|https://codepen.io/dgltu/pen/YzrzMeg?editors=1010|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/dyVPpKw?editors=1010 |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/yLzygGy |
| Yashien Lin | https://codepen.io/YashienLin/pen/zYExZpP?editors=0010 |
| Riley | https://codepen.io/jjpxbprd/pen/zYExWWr |
|乃萱|https://codepen.io/nainaikuo/pen/PoJwaJG?editors=1010|
| YuriT | https://codepen.io/wenfisht/pen/qBPEemp |
|鄭安志|https://codepen.io/lwmtsgek/pen/yLzNLVZ?editors=1011|
| Lai | https://codepen.io/co_lai/pen/zYEGOBa?editors=0011 |
paul|https://codepen.io/printfootya/pen/mdBJPRd?editors=0011|
| 劉維倫 | https://codepen.io/lun0223/pen/GRMJXrX?editors=1001 |
| Sylvia-H | https://codepen.io/Cosmosheart/pen/dyVoQrv?editors=0010 |
|阿和|https://codepen.io/shnny/pen/OJxyQPe?editors=0010|
|Sandy|https://codepen.io/Sandy_L/pen/eYGpVVe?editors=1011|
|Sihle Huang|https://codepen.io/bugbug777/pen/ExwVGjj|
| ZOE WU | https://codepen.io/Zoechiueh/pen/OJxyKbE?editors=1010 |
|Jasper|https://codepen.io/li-jasper/pen/jOGWyma|
|phi|https://codepen.io/aiya861202/pen/wvraVVv?editors=1010|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/MWEKMPB?editors=0010|
|kailun|https://codepen.io/Kailun/pen/gOGrrpd|
|Alvin|https://codepen.io/Alvin20201116/pen/gOGMGLK?editors=1011|
|danny123|https://codepen.io/binlandz123/pen/eYGzVgN?editors=0011 |
|LTL|https://codepen.io/ltlin93/pen/jOGrgEL |
|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/MWEjjbG?editors=1111 |
|Zooey Cheng|https://codepen.io/noraneko0430/pen/BawRJbB?editors=0011|
|Hamaji|https://codepen.io/hamajibashi/pen/BawRYBy |
|ZY Hsu|https://codepen.io/zihyin/pen/zYEzjzB?editors=0011 |