2주차 끝 숙제

우리가 만들었던 스파르타피디아에 온도를 붙여넣어주는거다. 스파르타피디아는 처음에 만들었던 index.html인 영화기록하기가 있는 html이다.

우선 추가 수정을 해보자

 

<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>

 

위 코드를 <h1>내생애 최고의 영화들!</h1> 과 <button> 영화 기록하기</button> 사이에 아래 처럼 붙여 넣어준다.

<div class="mytitle">

        <h1>내 생애 최고의 영화들!</h1>

        <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>

        <button onclick="hey()">영화 기록하기</button>

    </div>

 

그리고 script부분에 쓴 코드들을 다 지워주고 아래 코드를 붙여넣어준다

$(document).ready(function () {

            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {

                console.log(data)

            })

        })

실행해보면 아래 사진처럼 나오게 된다.

여기서 위에를 보면 우리가 배웠던건 버튼을 눌렀을 시 fetch가 활성화가 됬었다.

하지만 이번엔 바로 fetch가 활성화가 돼서 위 사진처럼 온도가 출력이 됐다. 이건 아래 코드를 보면 된다.

$(document).ready(function () { })

이걸 쓰게되면 로딩을 하지 않아도 자동으로 출력이 된다.

 

이제 온도를 출력해보자.

 

난 아래 처럼 코드를 수정했다.

$(document).ready(function () {

            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {

               

                $('#temp').empty()

               

                let number = data['temp']

                let c_number = `<div>현재 서울의 날씨 : <span id="temp">${number}</span>도</div>`

                $('#temp').append(number)

            })

        })

그랬더니 아래 사진처럼 새로고침하면 바로 현재 온도가 찍혔다.