2-11_2주차 끝 & 숙제 설명 (feat. 다키스트아워 팬명록, 온도 api 설정, ajax text 활용)

Ⅰ. 이번 회차 학습 목표 (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 설정 ⭐⭐⭐⭐⭐
  • 이거는 생각 못 했음.