고다경

날씨 api 추가 - container2에 넣었음

...@@ -8,6 +8,34 @@ ...@@ -8,6 +8,34 @@
8 <script src="jquery.js"></script> 8 <script src="jquery.js"></script>
9 <script> 9 <script>
10 10
11 + //openWeatherapi
12 +
13 +
14 + var apiURI = "http://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=afea3779ccf698668f89764635ac580f";
15 + $.ajax({
16 + url: apiURI,
17 + dataType: "json",
18 + type: "GET",
19 + async: "false",
20 + success: function(resp) {
21 + console.log(resp);
22 + console.log("현재온도 : "+ (resp.main.temp- 273.15) );
23 + $("#w3").append( (resp.main.temp- 273.15) + " ℃" );
24 + console.log("현재습도 : "+ resp.main.humidity);
25 + console.log("날씨 : "+ resp.weather[0].main );
26 + $("#w2").append( resp.weather[0].main );
27 + console.log("상세날씨설명 : "+ resp.weather[0].description );
28 + $("#w4").append( resp.weather[0].description );
29 + //console.log("날씨 이미지 : "+ resp.weather[0].icon );
30 + console.log("바람 : "+ resp.wind.speed + "m/s");
31 + $("#w5").append( resp.wind.speed + "m/s" );
32 + console.log("나라 : "+ resp.sys.country );
33 + console.log("도시이름 : "+ resp.name );
34 + $("#w1").append( resp.name );
35 + console.log("구름 : "+ (resp.clouds.all) +"%" );
36 + $("#w6").append( (resp.clouds.all) +"%" );
37 + }
38 + })
11 39
12 40
13 </script> 41 </script>
...@@ -47,20 +75,23 @@ ...@@ -47,20 +75,23 @@
47 float: left; 75 float: left;
48 border: 1px solid white; 76 border: 1px solid white;
49 width: 100%; 77 width: 100%;
50 - height: 45%; 78 + height: 120%;
51 } 79 }
52 #container2{ 80 #container2{
53 float: left; 81 float: left;
54 border: 1px solid white; 82 border: 1px solid white;
83 + background-color: rgb(102, 219, 180);
84 + font-weight: bold;
55 width: 100%; 85 width: 100%;
56 - height: 45%; 86 + height: 120%;
57 } 87 }
58 #container3{ 88 #container3{
59 float: right; 89 float: right;
60 border: 1px solid white; 90 border: 1px solid white;
61 margin-right:5%; 91 margin-right:5%;
62 width: 40%; 92 width: 40%;
63 - height: 90%; 93 + height: 200%;
94 +
64 } 95 }
65 96
66 97
...@@ -79,7 +110,16 @@ ...@@ -79,7 +110,16 @@
79 <div id="container1">container1</div> 110 <div id="container1">container1</div>
80 <br><br><br> 111 <br><br><br>
81 112
82 - <div id="container2">container2</div> 113 + <div id="container2" >
114 + <p style="margin-left: 10%">"Weather NOW"</p>
115 + <p id="w1" style="margin-left: 10%">도시 = </p>
116 + <p id="w3" style="margin-left: 10%">현재온도 = </p>
117 + <span id="w2" style="margin-left: 10%">현재날씨 = </span>
118 + <span id="w4" style="margin-left: 10%">날씨상세 = </span>
119 + <br><br>
120 + <span id="w5" style="margin-left: 10%">바람 = </span>
121 + <span id="w6" style="margin-left: 10%">구름 = </span>
122 + </div>
83 </div> 123 </div>
84 124
85 <div id="container3">container3</div> 125 <div id="container3">container3</div>
......