2021년 1월 7일 복기 JSON Weather API

JSON 잘 모르겠다. 코드를 복습하기 위해서 올려본다.

let data = {
  "coord": {
    "lon": 126.98,
    "lat": 37.57
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": -3.71,
    "feels_like": -8.6,
    "temp_min": -4,
    "temp_max": -3,
    "pressure": 1032,
    "humidity": 38
  },
  "visibility": 10000,
  "wind": {
    "speed": 2.1,
    "deg": 330
  },
  "clouds": {
    "all": 1
  },
  "dt": 1609813212,
  "sys": {
    "type": 1,
    "id": 8117,
    "country": "KR",
    "sunrise": 1609800433,
    "sunset": 1609835229
  },
  "timezone": 32400,
  "id": 1835848,
  "name": "Seoul",
  "cod": 200
}

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();

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 기본값으로 마진이 있다 */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url("bg2.jpg") no-repeat center/cover;
}

/* 배경화면을  */

#display-contents {
  width: 700px;
  height: 700px;
  border: 1px solid;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(211, 211, 211, 0.4);
}

/* rgba로 바꾸면 4번째의 값이 점점 줄어들면서 투명해진다. */

.search {
  margin-top: 40px;
  display: flex;
}

.inputbox {
  width: 150px;
  height: 2em;
  border: 1px solid #cecece;
  border-radius: 1em;
  outline: none;
  font-size: 1em;
  vertical-align: middle;
}

.inputbox::placeholder {
  text-align: center;
}

.searchbtn {
  width: 70px;
  height: 2em;
  margin-left: 10px;
  border-radius: 1em;
  outline: none;
  font-size: 1em;
}

.searchbtn:hover {
  background-color: #4a4a4a;
  color: white;
  transition: 0.2 ease;
  cursor: pointer;
}

.display {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.city {
  margin-top: 40px;
  font-size: 3em;
  text-shadow: 1px 0px 5px #4a4a4a;
}
/* 우측으로의 이동경로, 아래로의 이동경로, 글자 주위로의 그라데이션 작을수록 density가 높다. */
.weather {
  margin-top: 10px;
  font-size: 1.5em;
  color: #4a4a4a;
  text-shadow: 1px 0px 5px #4a4a4a;
}
/* margin-top 10px로 간격조절 */

.temp {
  margin-top: 10px;
  font-size: 5em;
  text-shadow: 1px 0px 5px #4a4a4a;
}

.icon {
  margin-top: 10px;
  font-size: 10em;
}