Links

Getting the Weather part One Geolocation

Getting the Weather part One Geolocation

const API_KEY = "키값 넣으주면됨 ";
const WEATHER_API = "https://api.openweathermap.org/data/2.5/weather?";
const weather = document.querySelector(".js-weather .weather__text");
function getWeather(coords) {
fetch(
`${WEATHER_API}lat=${coords.lat}&lon=${
coords.lng
}&appid=${API_KEY}&units=metric`
)
.then(response => response.json())
.then(json => { // then을 사용한 이유는 fetch가 완료되길 기다려야하기때문이다.
const name = json.name;
const temperature = json.main.temp;
weather.innerHTML = `${Math.floor(temperature)}° @ ${name}`;
});
}
function handleGeoSuccess(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
const coords = {
lat, // key 와 value값이 같으면 생략 가능하다.
lng
};
localStorage.setItem("coords", JSON.stringify(coords));
getWeather(coords);
}
function handleGeoFailure() {
console.log("no location");
}
function loadWeather() {
const currentCoords = localStorage.getItem("coords");
if (currentCoords !== null) {
const parsedCoords = JSON.parse(currentCoords);
getWeather(parsedCoords);
return;
} else {
navigator.geolocation.getCurrentPosition(
handleGeoSuccess,
handleGeoFailure
);
}
}
function init() {
loadWeather();
}
init();

API

API는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된것이다.