Getting Weather

5. 날씨 정보 얻기 : Weather API에서 유저의 해당 지역과 온도를 출력

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Something</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="js-clock">
        <h1 class="js-title">00:00</h1>
    </div>
    <form class="js-form form">
        <input type="text" placeholder="What is your name?" />
    </form>
    <h4 class="js-greetings greetings"></h4>
    <form class="js-toDoForm">
        <input type="text" placeholder="Write a to do" />
    </form>
    <ul class="js-toDoList">
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
    <script src="todo.js"></script>
    <script src="bg.js"></script>
    <script src="weather.js"></script>
</body>
</html>

const weather = document.querySelector(".js-weather");
const API_KEY = "450f72e78bda69d216bf82a702bb51b2";
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){
        const temperature = json.main.temp;
        const place = json.name;
        weather.innerText = `${temperature} @ ${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);
    getWeather(latitude, longitude);
}

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 {
        //getWeather
        const parsedCoords = JSON.parse(loadedCoords);
        getWeather(parsedCoords.latitude, parsedCoords.longitude);
    }
}

function init(){
    loadCoords();
}

init();

fetch() 안에는 가져올 데이터가 들어감

ex) `https://~`

*주의 : 따옴표가 아닌 backtick(`)을 사용할 것!

navigator geolocation 메서드를 사용해 latitude(위도), longitude(경도)를 불러올 수 있음
fetch API를 호출할 수 있음
then 기본적으로 함수를 호출하는 것이지만 데이터가 완전히 들어온 다음 호출하는 특징이 있음

PreviousImage Background Next자바스크립트 기초 강의 (ES5+)

Last updated 3 years ago

Was this helpful?