[스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 2주차 마무리 & 숙제

간단하게 1주 차에 완성한 팬명록에 날씨 정보를 넣어주면 됩니다. 추가로 로딩이 완료되면, 날씨 API을 이용해서 날씨를 표시되도록 만드는 숙제입니다.

 

1주 차에 만들었던 팬명록

2주 차 숙제에서 추가해야 하는 현재 기온

온도를 표기하기 위해 <h1>태그 아래에 <p>태그를 작성했습니다. 온도만 바뀌어야 하기 때문에 온도 부분은<p>태그 안에 <span>태그를 작성하고 id를 설정해 주었습니다.

반응형

관련 소스

<h1>마마무(MAMAMOO) 팬명록</h1>
<p>현재기온 : <span id="current_temp">0.00</span>도</p>

 

그리고 서울시의 온도를 받아와서 화면에 표시되도록 하였습니다. 문제에 로딩이 완료되면 날씨를 표시하라고 했기 때문에 jQuery ready() 함수를 이용합니다.

 

관련 소스

$(document).ready(function () {
            $.ajax({
             type: "GET",
             url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
             data: {},
             success: function (response) {
               let temp = response['temp']
                 console.log(temp)
               $('#current_temp').text(temp)

             }
             })
        });

 

결과

 

2주 차 숙제는 어려운 문제는 아니었지만 앞의 내용을 이용하면 손쉽게 해결할 수 있는 문제였습니다.