2-11_2주차 끝 & 숙제 설명

Ⅰ. 이번 회차 학습 목표 (goal)

---

1. 배우고자 하는 것

• 현재 기온 몇 도! 를 api 로 받아와서 체크하게 하기
• 

Ⅱ. 날씨 api 살펴보기

---

1. 해봐

• 날씨 api 링크

  http://spartacodingclub.shop/sparta_api/weather/seoul

• api 사진

2. 1주차 homework 에 p 태그, span 태그, id 추가

• 수정한 code

<div class="mytitle">
    <h1> 다키스트아워 팬명록 ⚔ </h1>

    <p> 현재 기온🌡 : <span id="temp"> 00.0 </span>도</p>

</div>

• 중요한 부분
  
  <span id="temp"> 00.0 </span> : 1) span태그 으로 00.0 을 찍어주고 2) 해당 부분에 temp id 설정 ⭐⭐⭐⭐⭐

3. 로딩이 완료되면 -> alert 뜨게 하기

• 필요한 이유
  • 클릭하면 -> 뜨게 하는게 아님
  • 그냥, 로딩 되면 -> 뜨게 하는것! 이기 때문에

• 검색하는 팁
  

• 로딩 되면 -> alert 뜨게하는 코드 #javascript_로딩되면_alert뜨는예제코드

  <script>
    $(document).ready(function () {
        alert('다 로딩됐다!')
    });
  </script>

4. ajax 활용해서, api 에서 가져온 response 가 잘 찍히는지 확인

• 우선 잘 찍히고 있는 코드
  • 로딩 되면 바로 찍힘

    <script>
    $(document).ready(function () {
      $.ajax({
      type: "GET",
      // api 주소 ✅ 
      url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
      data: {},
      success: function (response) {
          alert(response['city'])
      }
    })
    });
    </script>

5. text 활용해서 -> 텍스트 바꿔치기

• 우선 작동하는 코드

  <script>
    $(document).ready(function () {
        $.ajax({
        type: "GET",
        // api 주소 ✅ 
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
  
            let temp = response['temp']
  
            $('#temp').text(temp)
  
        }
    })
    });
  </script>

• response 중 temp 를 받아오고 -> 이걸 id 붙인 곳의 text 로 활용!

• 결과물
  • 로딩하면 -> 온도가 바로 표시됨.
    

💭 What i learned

---

• <span id="temp"> 00.0 </span> : 1) span태그 으로 00.0 을 찍어주고 2) 해당 부분에 temp id 설정 ⭐⭐⭐⭐⭐
  • 이거는 생각 못 했음.