# 🏅 4/6 (二) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

注意事項
---
請先 [申請 API](https://hexschoollivejs.herokuapp.com/dashboard)，並參照 [API 文件](https://hexschoollivejs.herokuapp.com/api-docs/) 進行練習。

問題
---
請練習串接以下 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();

-->