From e1b0d1f28175f13f85ee2c8d23daffe133674743 Mon Sep 17 00:00:00 2001 From: seungyeonnnnnni Date: Fri, 19 Nov 2021 10:38:33 +0900 Subject: [PATCH] =?UTF-8?q?=E2=98=91=EF=B8=8F=20weather=20merge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- weather/openweather.html | 34 +++++++++++++++++++++ weather/openweather.js | 66 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 weather/openweather.html create mode 100644 weather/openweather.js diff --git a/weather/openweather.html b/weather/openweather.html new file mode 100644 index 0000000..4119900 --- /dev/null +++ b/weather/openweather.html @@ -0,0 +1,34 @@ + + + + + + + + + + Page Title + + + + + + +
+
+
+
+

+

+
+
+
현재 온도
+
+
체감 온도
+
최고 온도
+
최저 온도
+
+
+ + + \ No newline at end of file diff --git a/weather/openweather.js b/weather/openweather.js new file mode 100644 index 0000000..890d440 --- /dev/null +++ b/weather/openweather.js @@ -0,0 +1,66 @@ + +const getJson = function(url,callback) { + const xhr = new XMLHttpRequest(); + xhr.open('GET',url,true); + xhr.responseType = 'json'; + xhr.onload = function(){ + const status = xhr.status; + if(status == 200){ + console.log(xhr.response); + + loadWeather(xhr.response); + + }else{ + console.log(xhr.response); + } + }; + xhr.send(); + + +}; + + + + + +getJson('http://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=49f2a44ba633f02db2d706240b4c42d4&units=metric'), +function(err,data){ + if(err!== null){ + alert('sorry,'); + }else{ + + console.log(data); + // loadWeather(data); + } +} + +function loadWeather(data){ + + let location = document.querySelector('.location'); + let currentTime = document.querySelector('.current-time'); + let currentTemp = document.querySelector('.current-temp'); + let feelsLike = document.querySelector('.feels-like'); + let minTemp = document.querySelector('.min-temp'); + let maxTemp = document.querySelector('.max-temp'); + let icon = document.querySelector('.icon'); + let weatherIcon = data.weather[0].icon; + + let date = new Date(); + let month = date.getMonth() + 1; + let day = date.getDate(); + let hours = date.getHours(); + let minutes = date.getMinutes(); + + + + location.append(data.name); + currentTemp.append(data.main.temp); + feelsLike.append(data.main.feels_like); + maxTemp.append(data.main.temp_max); + minTemp.append(data.main.temp_min); + + // icon.innerHTML = ''; + + currentTime.append(month+'월'+ day + '일 '+hours +':' +minutes); + +} \ No newline at end of file