날씨 api 추가 - container2에 넣었음

@@ -8,6 +8,34 @@
     <script src="jquery.js"></script>
     <script src="jquery.js"></script>
     <script>
     <script>
 
 
+       //openWeatherapi
+
+       
+    var apiURI = "http://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=afea3779ccf698668f89764635ac580f";
+        $.ajax({
+            url: apiURI,
+            dataType: "json",
+            type: "GET",
+            async: "false",
+            success: function(resp) {
+                console.log(resp);
+                console.log("현재온도 : "+ (resp.main.temp- 273.15) );
+                $("#w3").append( (resp.main.temp- 273.15) + " ℃" );
+                console.log("현재습도 : "+ resp.main.humidity);
+                console.log("날씨 : "+ resp.weather[0].main );
+                $("#w2").append( resp.weather[0].main );
+                console.log("상세날씨설명 : "+ resp.weather[0].description );
+                $("#w4").append( resp.weather[0].description );
+                //console.log("날씨 이미지 : "+ resp.weather[0].icon );
+                console.log("바람   : "+ resp.wind.speed + "m/s");
+                $("#w5").append( resp.wind.speed + "m/s" );
+                console.log("나라   : "+ resp.sys.country );
+                console.log("도시이름  : "+ resp.name );
+                $("#w1").append( resp.name );
+                console.log("구름  : "+ (resp.clouds.all) +"%" );
+                $("#w6").append( (resp.clouds.all) +"%" );                 
+            }
+        })
     
     
     
     
     </script>
     </script>
@@ -47,20 +75,23 @@
        float: left;
        float: left;
        border: 1px solid white;
        border: 1px solid white;
        width: 100%;
        width: 100%;
-       height: 45%;
+       height: 120%;
    }
    }
    #container2{
    #container2{
        float: left;       
        float: left;       
        border: 1px solid white;
        border: 1px solid white;
+       background-color: rgb(102, 219, 180);
+       font-weight: bold;
        width: 100%;
        width: 100%;
-       height: 45%;
+       height: 120%;
    }
    }
    #container3{
    #container3{
        float: right;
        float: right;
        border: 1px solid white;
        border: 1px solid white;
        margin-right:5%;
        margin-right:5%;
        width: 40%;
        width: 40%;
-       height: 90%;
+       height: 200%;
+      
    }
    }
 
 
     
     
@@ -79,7 +110,16 @@
         <div id="container1">container1</div>
         <div id="container1">container1</div>
         <br><br><br>
         <br><br><br>
 
 
-        <div id="container2">container2</div>
+        <div id="container2" >
+            <p style="margin-left: 10%">"Weather NOW"</p>
+                <p id="w1" style="margin-left: 10%">도시 = </p>
+                <p id="w3" style="margin-left: 10%">현재온도 = </p>
+                <span id="w2" style="margin-left: 10%">현재날씨 = </span>
+                <span id="w4" style="margin-left: 10%">날씨상세 = </span>    
+                <br><br>                            
+                <span id="w5" style="margin-left: 10%">바람 = </span>
+                <span id="w6" style="margin-left: 10%">구름 = </span>
+        </div>
     </div>
     </div>
 
 
     <div id="container3">container3</div>
     <div id="container3">container3</div>