# 🏅 Day 30 - 申請 API

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

> [API 簡易串接教學文件](https://chalk-freedom-ec6.notion.site/API-8b5b74eb052b451faf28013d76811fac)

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


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


<!-- 解答：

記得載入 axios CDN，並填入自己的 API 名稱

const baseUrl = "https://livejs-api.hexschool.io";
const api_path = "填入你的 API 名稱";
const 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();

-->