「只有文字的顯示有點單調,今天我們加上天氣圖示。晴天就有太陽、雨天就有雨傘,用圖示讓資訊更直觀,也讓使用者一眼就知道天氣狀況,增加互動樂趣。」
內容重點:
weather[0].icon
http://openweathermap.org/img/wn/10d@2x.png
程式說明:
document.getElementById("result").innerHTML = `
<strong>${data.name}</strong><br>
<img src="http://openweathermap.org/img/wn/${data.icon}@2x.png" alt="weather icon">
🌡️ 溫度: ${data.temp}°C <br>
☁️ 天氣: ${data.description}
`;
icon
:res.json({
name: data.name,
temp: data.main.temp,
description: data.weather[0].description,
icon: data.weather[0].icon
});