為面試公司（產品是飯店IP TV的系統）客製作品集，將目前所在地區的天氣顯示在網頁上。
研究後發現3.0版雖然有免費的方案，但是還是要個別訂閱每種呼叫的api比較麻煩，最後改用2.5版的API。
首先註冊，註冊後系統會發確認函到註冊的email，點擊確認函後系統才會activate帳號對應的API ID，但不一定馬上可以使用，等待時間從數小時到一整天不等。
當帳號activate後系統也會自動發送預設的API ID，並且附上官方教學文件。
使用的是axios套件，留意要先引入。
function getWeather(){
axios.get(
'https://api.openweathermap.org/data/2.5/weather?lat=22.63&lon=120.30&units=metric&appid={這裡放API ID}&lang=zh_tw'
)
.then(response => {
let thisData = response.data;
let city = document.querySelector('#city');
let temperature = document.querySelector('#temperature');
let feel = document.querySelector('#feel');
let weather = document.querySelector('#weather');
let icon = document.querySelector('#icon');
let sunrise = document.querySelector('#sunrise');
let sunset = document.querySelector('#sunset');
city.textContent = thisData.name;
temperature.textContent = thisData.main.temp;
feel.textContent = thisData.main.feels_like;
weather.textContent = thisData.weather[0].description;
icon.src = `http://openweathermap.org/img/w/${thisData.weather[0].icon}.png`;
sunrise.textContent = new Date(thisData.sys.sunrise*1000).toLocaleTimeString();
sunset.textContent = new Date(thisData.sys.sunset*1000).toLocaleTimeString();
})
.catch(error => {
console.log(error);
})
};
Megan's Note 