# 🏅 Day 37 - 申請 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)，練習將取得的產品資料呈現於畫面如下：


## 回報流程

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


<!-- 解答：

記得載入 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();

-->

回報區
---
| # | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/poMqeWm) |
| 02 | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/rNXgmqN) |
| 03 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/YzmbVjV) |
| 04 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/xxvNrEd?editors=1011) |
|05|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/ExqzXNZ?editors=1111)|
|06|泊岸|[CodePen](https://codepen.io/qoq77416416/pen/jOgoLqy?editors=1011)|
|07|david1819|[CodePen](https://codepen.io/David-Lin-the-vuer/pen/MWNdore)|
|08|yuyuhunter_0509| [CodePen](https://codepen.io/KRcube/pen/LYwoLrd?editors=0010) |
|09|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/gOVJRLB) |
| 10 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/oNKRdar) |
| 11 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/bGXyKov?editors=1011) |
| 12 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/KKOLGRr?editors=1010) |
| 13 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/zYgQgWa) |
| 14 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/poMmMrP) |
| 15 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/XWvLbor) |
| 16 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/QWeXNKQ?editors=1011) |
| 17 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/YzmoqEW?editors=1010) |
| 18 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/VwoOOVP) |
| 19 | Mike | [CodePen](https://codepen.io/mike2049/pen/dyxEJow?editors=1011) |
| 20 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/jOgjzdO) |
| 21 | 睿睿 | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/jOgjdmZ?editors=1011) |
| 22 | 彭致嘉 | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/oNKREaY?editors=1011) |
| 23 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/zYgVgyj) |
| 24 | 阿鼠 | [CodePen](https://codepen.io/wuasu/pen/MWNNyGq) |
| 25 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/BaXXLyE?editors=0111) |
| 26 | Chun | [CodePen](https://codepen.io/Chun_debbie/pen/abeeLba?editors=0011) |
| 27 | chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/dPbbyYM?editors=1011) |
| 28 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/JoPPjXo?editors=1011) |
| 29 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/RNbbVVb?editors=1111) |
| 30 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/EaYYLOw?editors=0011) |
| 31 | Seris | [CodePen](https://codepen.io/Dale-Chien/pen/EaYYOBP) |
| 32 | Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/YzmmdVj?editors=1010) |
| 33 | charlottelee | [CodePen](https://codepen.io/char849/pen/PwYovxq) |
| 34 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/ByBydgM?editors=1011) |
| 35 | kaka_945 | [CodePen](https://codepen.io/kay945/pen/RNbNZrV) |
| 36 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/bNbdLoP) |
| 37 | 雪粒 | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/ZYzbxWe) |
| 38 | jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/xbKZdqV?editors=1011) |
| 39 | Emma | [CodePen](https://codepen.io/Emma0919/pen/emOWqyo) |

<!-- 可複製下方格式
| | | [CodePen]() |
-->