사용자의 위치 정보를 받아서 날씨를 안내한다. 유튜브 노마드 코더의 영상 (https://youtu.be/5fAMu2ORvDA) 을 정리했다. OpenWeather의 API를 이용하기 위해서는 가입해야 한다. https://openweathermap.org/ 홈페이지 방문해 가입한다. https://home.openweathermap.org/api_keys 에서 API 키를 확인해 JS 파일의 API_KEY 변수에 저장한다.
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<span class="js-weather"></span>
<script src="weather.js"></script>
</body>
</html>
const weather = document.querySelector(".js-weather");
const API_KEY = "12345678901234567891234567891234";
const COORDS = "coords";
function getWeather(lat, lng) {
fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
)
.then(function(response) {
return response.json();
})
.then(function(json) {
// console.log(json);
const temperature = json.main.temp;
const place = json.name;
weather.innerText = `${temperature}°C @ ${place}`;
});
}
function saveCoords(coordsObj) {
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}
function handleGeoSuccess(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude
};
saveCoords(coordsObj);
}
function handleGeoError() {
console.log('Cant access geo location');
}
function askForCoords() {
navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError);
}
function loadCoords() {
const loadedCoords = localStorage.getItem(COORDS);
if (loadedCoords === null) {
askForCoords();
}
else {
const parseCoords = JSON.parse(loadedCoords);
getWeather(parseCoords.latitude, parseCoords.longitude);
}
}
function init() {
loadCoords();
}
init();
'개발 > JS' 카테고리의 다른 글
| 논리 연산자(&&, ||), 삼항연산자를 사용한 단축 평가 (0) | 2022.01.11 |
|---|---|
| JWT 토큰 쿠키에 저장/삭제 (0) | 2022.01.04 |
| dotenv 환경변수 관리 (0) | 2021.12.30 |
| [JS] 무작위로 배열 속 내용 추출하기 (0) | 2021.05.21 |
| nodejs 재시작 없이 변경 내용 적용하기, supervisor 패키지 (0) | 2021.04.12 |
| 리액트 앱 만들어주는 앱 (0) | 2020.10.15 |
