2021년 1월 5일 복기

API

https://injunech.tistory.com/178#recentComments

날씨별로 유효성 검사를 하는 것이다

let API_URL_OpenWeatherMap = 'http://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}';


const city = document.querySelector(".city");
const weather = document.querySelector(".weather");
const temp = document.querySelector(".temp");

const icon = document.querySelector(".icon");
const searchbtn = document.querySelector(".searchbtn");
const inputbox = document.querySelector(".inputbox");

const tempIcon = document.querySelector('#tempIcon');
const API_KEY = `cfdb34ca8764cc2570adfa4d6d544ea4`;


searchbtn.addEventListener('click',getData)


function renderWeatherData() {

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=${API_KEY}&units=metric`)
  .then(function(resp) {
    return resp.json()
  })
  .then(function(json) {

    city.textContent = json.name;
    weather.textContent =json.weather[0].main;
    temp.textContent = `${(json.main.temp).toFixed(1)}°C`;

    const i = document.createElement('i');
    icon.append(i);

    if(json.weather[0].main === 'Clear') {
      i.classList.add("fas","fa-sun");
    }
    else if(json.weather[0].main === 'Clouds') {
      i.classList.add("fas","fa-cloud");
    }
    else if(json.weather[0].main === 'Drizzle') {
      i.classList.add("fas","fa-cloud-rain");
    }
    else if(json.weather[0].main === 'Rain') {
      i.classList.add("fas","fa-umbrella");
    }
    else if(json.weather[0].main === 'Thunderstorm') {
      i.classList.add("fas","fa-bolt");
    }
    else if(json.weather[0].main === 'Snow') {
      i.classList.add("fas","fa-snowflake");
    }
    else if(json.weather[0].main === 'Atmosphere') {
      i.classList.add("fas","fa-water");
    }
  });
}




function getData() {
  let cityInput = inputbox.value;

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityInput}&appid=${API_KEY}&units=metric`)
  .then(function(resp) {
    return resp.json()
  })
  .then(function(json) {

    city.textContent = json.name;
    weather.textContent =json.weather[0].main;
    temp.textContent = `${(json.main.temp).toFixed(1)}°C`;


    while (icon.firstChild) {
      icon.removeChild(icon.firstChild);
    }
    const i = document.createElement('i');
    icon.append(i);

    if(json.weather[0].main === 'Clear') {
      i.classList.add("fas","fa-sun");
    }
    else if(json.weather[0].main === 'Clouds') {
      i.classList.add("fas","fa-cloud");
    }
    else if(json.weather[0].main === 'Drizzle') {
      i.classList.add("fas","fa-cloud-rain");
    }
    else if(json.weather[0].main === 'Rain') {
      i.classList.add("fas","fa-umbrella");
    }
    else if(json.weather[0].main === 'Thunderstorm') {
      i.classList.add("fas","fa-bolt");
    }
    else if(json.weather[0].main === 'Snow') {
      i.classList.add("fas","fa-snowflake");
    }
    else if(json.weather[0].main === 'Atmosphere') {
      i.classList.add("fas","fa-water");
    }
  });
  
}



renderWeatherData();