☑️ weather merge

opensourcessu · Nov 19, 2021 · e1b0d1f · e1b0d1f
1 parent d487b7f
commit e1b0d1f
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 0 deletions.
diff --git a/weather/openweather.html b/weather/openweather.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+        <link rel="icon" href="/favicon.ico" type="image/x-icon">
+    <meta charset='utf-8'>
+    <meta name = "viewport" content = "width=device-width,initial-scale=1.0">
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Page Title</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <script src='openweather.js'></script>
+    <script src = "https://kit.fontawesome.com/096073a2a8.js" crossorigin="anonymous" ></script>
+</head>
+<body>
+
+    <header>
+    </header>
+    <section class = "weather-container">
+        <div class = "weather-data">
+            <h1 class = "location"><class clss = "fas fa-city"></class></h1>
+            <h1 class="current-time"></h1>
+        </div>
+        <div class="weather-temp">
+            <div class = "current-temp">현재 온도 </div>
+            <div class = "icon"></div>
+            <div class="feels-like">체감 온도 </div>
+            <div class="max-temp">최고 온도 </div>
+            <div class="min-temp">최저 온도 </div>
+        </div>
+    </section>
+
+</body>
+</html>
diff --git a/weather/openweather.js 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 = '<img src = http://openweathermap.org/img/wn/${weatherIcon}.png>';
+
+    currentTime.append(month+'월'+ day + '일 '+hours +':' +minutes);
+
+}