고다경 / Open_Source_project

Go to a project
Toggle navigation Toggle navigation pinning
고다경
10ca64a1 1 parent 59ac269b

날씨 api 추가 - container2에 넣었음

Inline Side-by-side
Showing 1 changed file with 44 additions and 4 deletions
......@@ -8,7 +8,35 @@
<script src="jquery.js"></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>
<style>
......@@ -47,20 +75,23 @@
float: left;
border: 1px solid white;
width: 100%;
height: 45%;
height: 120%;
}
#container2{
float: left;
border: 1px solid white;
background-color: rgb(102, 219, 180);
font-weight: bold;
width: 100%;
height: 45%;
height: 120%;
}
#container3{
float: right;
border: 1px solid white;
margin-right:5%;
width: 40%;
height: 90%;
height: 200%;
}
......@@ -79,7 +110,16 @@
<div id="container1">container1</div>
<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 id="container3">container3</div>
......