[javaScipt] 날씨 API

• fetch

서버에 네트워크 요청을 보내고 새로운 정보를 받아옴

 

•  navigator.geolocation.getCurrentPosition(success, error, [options]);

  1)success 객체를 유일한 매개변수로 받는 콜백 함수이다.
  2)error 객체를 유일한 매개변수로 받는 콜백 함수이다.
  3)options  다음을 포함하는 객체이다.

 

weather.js (아래 사이트에서 MY API keys 에서 key 사용)

const API_KEY = MY API KEY 사용;

function onGeoOK(position) {
    //console.log(position);
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    //console.log("You live in", lat, lon);
    const API_KEY = "1d8fc99e3addb1ab4a013b38cff4fd3d";
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
    //fetch(url);
    //url의 특정 정보를 얻는 방법
    fetch(url).then((response) => response.json())
    .then((data) =>{
        const weater = document.querySelector("#weather span:first-child");
        const city = document.querySelector("#weather span:last-child");
        city.innerText = data.name;
        weater.innerText =`${data.weather[0].main} / ${data.main.temp}`;
    });
}

function onGeoError() {
    alert("cannot find you, NO weather for you");
}

navigator.geolocation.getCurrentPosition(onGeoOK, onGeoError);

 

 

Current weather data - OpenWeatherMap

 

 

※

airpollution 추가

 

달력 추가 (내용)

 

음성 인식 todo 

 

참조 노마드 코더