자바스크립트로 날씨 구현하기 복습

수업시간 내용 복습 자료입니다.

JS

// API 요청 URL 변수

      var url = 'http://api.openweathermap.org/data/2.5/weather?q=seoul&APPID=e11462160015cffa69954c9f67741b7b';

      // 로딩 이미지 표시

      $('#weather_info .load_img').show();

      $.getJSON(url, function(data){

         // 날씨 데이터 객체

         var sys = data.sys;          // 국가명, 일출/일몰        

         var city = data.name;          // 도시명

         var weather = data.weather;    // 날씨 객체

         var main = data.main;           // 온도 기압 관련 객체

   

         var wmain = weather[0].main;    // 구름 상태(Cloudiness)

         var w_id = weather[0].id;       // 날씨상태 id 코드

         var icon = weather[0].icon;      // 날씨 아이콘 정보

         var country = sys.country;     // 국가명

         var temp = main.temp;          // 현재 온도

         var temp_min = main.temp_min    // 최저 온도

         var temp_max = main.temp_max    // 최고 온도

         // 날씨 아이콘

         var icon_url = 'http://openweathermap.org/img/w/' + icon;

     

         // 날씨 정보 표시

         $('#weather_info > .city').html(city + "/" + country);        

         $('#weather_info  .icon').html("<img src='" + icon_url + ".png'>");

         $('#weather_info .w_id').html(wmain);

         $('#weather_info .temp_min').html(parseInt(temp_min-273.15) + '&deg;' + ' min');

         $('#weather_info .temp_max').html( parseInt(temp_max-273.15) + '&deg;' + ' max');

         $('#weather_info  .temp').html(parseInt(temp-273.15) + '&deg;');

         // 데이터 로딩 후 로딩이미지 제거

         $('#weather_info .load_img').hide();      

      })   // end getJSON()

         .fail(function() {

            // 오류 메시지

               alert( "loding error" );

           });  

CSS

<style>

            * {

                margin: 0;

                font-weight: normal;

            }

            p {

                margin-bottom: 10px;

            }

            body {

                color: #333;

                font-size: 100%;

                font-family: sans-serif;

            }

            #weather_info {

                position: relative;

                width: 100%;

                border: 1px solid #999;

                box-sizing: border-box;

                padding: 10px;

                background: #eee;

                background: url("https://lintvwkbn.files.wordpress.com/2016/03/youngstown-ohio-weather-forecast-cloudy-7.jpg") no-repeat;

                background-size: cover;

                color: white;

            }

            h1 {

                background: #666;

                padding: 10px;

                font-size: 1.8em;

                text-align: center;

                opacity: 0.8;

            }

            section {

                overflow: hidden;

                color: #666;

                text-shadow: 1px 1px 1px #999;

                padding: 10px 20px;

            }

            section > .w_id {

                text-align: left;

                padding-left: 20px;

            }

            section > .temp,

            section > figure {

                float: left;

                width: 33.3%;

            }

            section > figure > img {

                width: 80px;

            }

            section > .temp {

                font-size: 3.4em;

            }

            aside {

                overflow: hidden;

            }

            aside > p {

                font-size: 1.8em;

                text-align: right;

            }

            /* 로딩이미지 */

            #weather_info .load_img {

                position: absolute;

                left: 50%;

                top: 50%;

                display: none;

            }

        </style>

HTML

<div id="weather_info">

            <h1 class="city"></h1>

            <section>

                <p class="w_id"></p>

                <figure class="icon"></figure>

                <p class="temp"></p>

                <aside>

                    <p class="temp_max">max</p>

                    <p class="temp_min">min</p>

                </aside>

            </section>

            <img class="load_img" src="loading.gif" width="50px">

        </div>