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

axios - 將外部資料渲染到網頁上
---
延續 [昨日的每日任務](https://hackmd.io/QJsnVAhuTim19aS78CKGHw)，今天是將串接回來的資料渲染於網頁畫面的練習。

問題
---
請同學嘗試用 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;
});
-->

| Slack | CodePen |
|:-----------:|:----------------------------------------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/ZEJqdJQ |
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=1011 |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/oNeJZQQ|
|Aaron Tu|https://codepen.io/aarontu/pen/porqeKR|
| Iris Huang | https://codepen.io/ythuang/pen/ExvGWGL |
| 傅劍軒 | https://codepen.io/seonkuraito/pen/zYdyZmR?editors=0010 |
|lumei|https://codepen.io/l_umei/pen/LYjMWvM|
|Cheng pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
|有廖先生(Rain)|https://codepen.io/billpop741/pen/NWvepJr|
|Genos|https://codepen.io/pb220416/pen/QWMzvpM|
|Arista|https://codepen.io/arista-hsieh/pen/zYdywGL|
| Sam | https://codepen.io/sam-hsu/pen/jOLXmrL |
| Louis | https://codepen.io/Louis164156/pen/xxLmqJj |
| 劉維倫 | https://codepen.io/lun0223/pen/WNELjpO |
| Sunny | https://codepen.io/shihchinghuang/pen/rNzomjr?editors=1111 |
| 連小艾 | https://codepen.io/bolaslien/pen/vYJvmWN?editors=1010 |
| Elaine Liu | https://codepen.io/elaine7598/pen/LYjMyWK?editors=1010 |
|大衛|https://codepen.io/exnsrpjc/pen/abyPWpP?editors=1010 |
|Gill|https://codepen.io/Gill-Chin/pen/MWvZmzP?editors=1011 |
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/vYJvmMX?editors=1011|
| Andy Huang | https://codepen.io/HsuHuaHuang/pen/eYEbWPb |
| Yunei | https://codepen.io/Yunei/pen/JjywJNK |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/NWvegOJ?editors=1111 |
|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/ZEJVywb?editors=1111|
| Lai | https://codepen.io/co_lai/pen/MWvZoXg?editors=1011 |
| YC | https://codepen.io/YCLu/pen/porqwGz |
|Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/BadGroV?editors=1111 |
|Pei Ying | https://codepen.io/Pei-Ying/pen/oNeJevp?editors=1011 |
| BeanHuang | https://codepen.io/Beanhuang/pen/bGrOrwX?editors=1010 |
|Anna|https://codepen.io/kycrleao/pen/KKvbvNd?editors=1011|
|張喆|https://codepen.io/wow767t/pen/porqrWb|
| Jun Ting Lin | https://codepen.io/jake1155/pen/xxLmLmz |
|kk|https://codepen.io/potatokaka/pen/OJjrjdP?editors=0011 |
|Yashien Lin|https://codepen.io/YashienLin/pen/MWvZvqm?editors=1010 |
|Phil |https://codepen.io/ctkeftjp-the-animator/pen/jOLXLgB?editors=1111 |
|jojoy|https://codepen.io/jojoy/pen/PoKXOPO|
| Bella Shya | https://codepen.io/BellaXie/pen/YzxdEjE |
| 陳暐中 | https://codepen.io/wei-z/pen/vYJvdgY?editors=1111 |
| YuriT | https://codepen.io/wenfisht/pen/qBXLxpz |
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/MWvZXKr?editors=1010 |
|phi|https://codepen.io/aiya861202/pen/eYEmVjR|
|鉦勝|https://codepen.io/atckmax823/pen/ExvGRKe?editors=1011|
|Bonnie|https://codepen.io/bonnieli1414/pen/LYjMJEz?editors=0010|
|POPEYE | https://codepen.io/popeye_ux/pen/QWMzZrO |
|Steven Chan |https://codepen.io/Steven1220/pen/porqQaB?editors=1010 |
|阿和|https://codepen.io/shnny/pen/jOLXXPN?editors=1011|
|yunyi|https://codepen.io/yunyi12374/pen/ZEJbKVW|
|乃萱|https://codepen.io/nainaikuo/pen/eYEbXza?editors=1011|
|tingyu|https://codepen.io/dgltu/pen/zYdMXba?editors=1111|
Tim Lin|https://codepen.io/TimmyLin/pen/PoKVZJL?editors=1011|
| Riley | https://codepen.io/jjpxbprd/pen/MWvLKQj |
|Jasper|https://codepen.io/li-jasper/pen/MWvLjKw
|吉兒| https://codepen.io/Jillkate/pen/bGrzpLq |
|Gui|https://codepen.io/guitimliu/pen/abyXwQd|
| Yof | https://codepen.io/yangyof/pen/ExvrwxQ?editors=1011 |
| ZOE WU | https://codepen.io/Zoechiueh/pen/eYExRwm?editors=1011 |
|Alvin|https://codepen.io/Alvin20201116/pen/NWvoyOj?editors=1011|
|Calon|https://codepen.io/Calon0118/pen/YzxBvqg|
|Jocelyn| https://codepen.io/enjoyful/pen/JjyzjqK?editors=0001|
|鄭安志|https://codepen.io/lwmtsgek/pen/bGrZNgz?editors=1011|
|蔣秉彣|https://codepen.io/the-pierre/pen/VwzRLEo?editors=1010|
| Sylvia-H | https://codepen.io/Cosmosheart/pen/xxLBwJG |
| ZY Hsu | https://codepen.io/zihyin/pen/zYdbZyZ?editors=1011 |
|AKI|https://codepen.io/akichen27/pen/OJjqaMb|
|雪莉|https://codepen.io/utshang216/pen/zYdbVOJ|
|danny123|https://codepen.io/binlandz123/pen/VwzNaVR?editors=1010 |
|debby yeh|https://codepen.io/bhliyoup/pen/porBegG?editors=1011|
|kevinhes|https://codepen.io/kevinhes/pen/vYJMaoX?editors=1011|
|Sandy|https://codepen.io/Sandy_L/pen/yLormNQ?editors=1011|
|LTL|https://codepen.io/ltlin93/pen/BadeQGB|
|kailun|https://codepen.io/Kailun/pen/PoKvWdG|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/pormOMX?editors=1010|
|小K|https://codepen.io/kelen1995/pen/MWvMEoW|
|傑瑞|https://codepen.io/auatwood909815/pen/GRvbwRz|
|艾瑞克|https://codepen.io/ericla/pen/QWMejdj?editors=0010|
|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/gOxVJKe|
| Juno Li | https://codepen.io/Juno026/pen/bGobERB?editors=1011 |
paul|https://codepen.io/printfootya/pen/mdBbYQB?editors=1111|
| Hamaji | https://codepen.io/hamajibashi/pen/yLzyMMa |
|Jie Du|https://codepen.io/qgqonost-the-flexboxer/pen/ExwamoM?editors=1012 |
| YOYO | https://codepen.io/lumedkle/pen/MWEYMVM?editors=1011 |
|Joey|https://codepen.io/Joey-Chen/pen/zYExgdz|
|Jeff|https://codepen.io/jeff-cheng/pen/PoJPLyK?editors=1010|
|Clara|https://codepen.io/ClaraChen/pen/qBPZQMw?editors=1111|
| Aya | https://codepen.io/NoNameNote/pen/MWEeEXK |
|Zooey Cheng|https://codepen.io/noraneko0430/pen/VwMKzYJ?editors=1011|
|ShinyChen | https://codepen.io/shinychen/pen/eYGjero |