2주차 과제

1주차에 완성했던 영화 페이지에 실시간 서울 날씨 API 적용하기

    <div class="title">
      <h1>내가 애정하는 영화들</h1>
      <div>현재 서울의 날씨 : <span id="temp">20</span>도</div> //추가
      <button onclick="btn()">영화 기록하기</button>
    </div>

1주차에 작성했던 코드를 수정하고, 날씨 API 적용해볼 예정. 그럼 날씨를 작성해줄 div 태그를 만들어서 현재 서울의 날씨라고 작성해 줬다.

    <script>
      $(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            console.log(data);
          });
      });
    </script>

스크립트 부분에 튜터님이 미리 만들어 주신 코드 복붙 .. !

fetch 내에 url 클릭하면 서울 api가 이렇게 두두등장 - ㅎㅎ 이걸 넣어줘야 하나보다 .. ! temp 온도가 3.54인 거 확인 가능. 그러면 이걸 콘솔창에 찍어보자.

      $(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            console.log(data['temp']);
          });
      });

그럼 이렇게 아까 작성했던 현재 서울의 날씨 : 20도랑 console창에 temp가 나오는 것을 볼 수 있다 !

      $(document).ready(function () {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
          .then((res) => res.json())
          .then((data) => {
            let degree = data["temp"];
            $("#temp").text(degree);
          });
      });

degree라는 변수에 data에서 temp 값을 가져오라고 설정해 주고, 아까 body에 붙여넣었던 <div>현재 서울의 날씨 : <span id="temp">20</span>도</div> 여기서 id가 temp니까 $(#temp)에서 text를 붙여넣겠다고 코드를 작성해주면 END !!

이렇게 서울 날씨가 바뀐 것을 확인할 수 있다 ! 서울은 지금 3.67도인가 보다. 실시간으로 변하는 거 너무 신기하고 .. ~ 포항은 서울보단 따듯해서 다행이다 싶기도 하고 .. 다들 감기 조심하세요 ^-^ ;; (갑분 걱정) ..

아무튼 이렇게 2주차 과제까지 완료 !