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

axios - 將外部資料渲染到網頁上
---
延續 [昨日的每日任務](https://rpg.hexschool.com/training/17/show?embedhm=TOpqNSWsSZqEnpxoIhxN0Q)，今天是將串接回來的資料渲染於網頁畫面的練習。

問題
---
請同學嘗試用 axios 串接這個 [API](https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json)，並依照要求將資料呈現於以下 HTML 模板

1. 請將 JSON 陣列資料的第一筆物件，屬性 name 所對應的值用 textContent 填入 id 為 targetName 的 p 標籤內。
2. 請將 JSON 陣列資料的第一筆物件，屬性 imgUrl 所對應的值用 setAttribute 的方式替 id 為 targetImg 的 img 標籤設定 src 屬性。
3. 請將 JSON 陣列資料的第一筆物件，屬性 area 所對應的值用 textContent 填入 id 為 targetArea 的 p 標籤內。

<p id="targetName"></p>
<img id="targetImg" src="" alt="">
<p id="targetArea"></p>

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


<!-- 解答
let targetName = document.querySelector('#targetName');
let targetImg = document.querySelector('#targetImg');
let targetArea = document.querySelector('#targetArea');

axios.get('https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json')
.then(function (response) {
targetName.textContent = response.data[0].name;
targetImg.setAttribute('src', response.data[0].imgUrl);
targetArea.textContent = response.data[0].area;
});
-->