사전캠프 17일차

Fetch 연습 2

이때까지 클릭을 하면 fetch하고 alert 사용

prac3
<style>
.bad {
            color: red;     
        }
</style>
<script>
        function q1() {
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair'
            $('#names-q1').empty(); //빈칸을 두는 이유는 모두 선택해야해서 
        //미세먼지 좋음이 계속 늘어나서 쌓이기 전에 한번 버리고 쌓고 해야된다.
            fetch(url).then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                console.log(data['RealtimeCityAir']['row'])
                rows.forEach(a => {
                    let gu_name = a['MSRSTE_NM'];
                    let gu_mise = a['IDEX_MVL']; 
                // 미세먼지 색깔변하는 조건    
                    let temp_html= ``; // 이미 있는 변수라서let 보다 temp_html를 쓸 것 
                    if (gu_mise> 40) {
   /*날씨가안좋음을 표현*/ temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`// 아닐경우 
                    }   // 이거 이해 전혀 안됨...temp_html을 어떻게 쓰는 지도 모르겠고 append 도 잘 모르겠음
                    $('#names-q1').append(temp_html); 
                }); 
            })

미세먼지가 안좋을 때 색깔을 바꾸기 위해서
미세먼지 좋음과 나쁨을 확인할 때는 클릭이 아닌 페이지 준비가 되면 자동으로 fetch에 콜을 해서 붙여주는 것을 해야한다.

자동으로 실행할 수 있는 코드

documentready 자동으로 실행시키는 코드
$(document).ready(function () {
	alert('안녕!');
})

p 태그 쓰면 현재 서울의 미세먼지 한번 더 써야해서 span 태그를 사용하는 게 좋음
span 태그는 p태그 안에서의 글자들을 묶을 때 쓰는태그
특정지정할 때 사용

새로고침 했을 때 미묘하게 fetch 로딩되는 동안 처음에 넣은 숫자가 남아 있다가 바뀌는 걸 볼 수 있다.
저 숫자가 보기 싫을 때

<li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="wther">20.00</span>도</a></li>
에서 20.00만 빼면 된다.
///
<li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="wther"></span>도</a></li> 

새로고침하면 숫자가 없다가 생긴다.

스타르타픽스 오늘 수정 된 것
<script>
        $(document).ready(function () {
            let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(url).then(res => res.json()).then(data => {
                let temp = data['temp'];//data는 필수로 넣어야 함
                $('#wther').text(temp);// 새로고침하면 온도 보여주는 것
            })
        })
<li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="wther"></span>도</a></li> //현재 기온 에  id=wther  값을 줌 

나만의 앨범 수정된 것 
<script>
        $(document).ready(function () {
            let url = "http://spartacodingclub.shop/sparta_api/seoulair";
            fetch(url).then(res => res.json()).then(data => {
                let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'] 
                $('#msg').text(mise)
            })   
  <div class="mytitle"> 
        <h1>나만의 추억앨범</h1> 
        <p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p> //나쁨으로 적어도 현재 서울 미세먼지가 좋아서 좋음으로 나타남 

숙제는 다음에...