2-8. Fetch 연습하기(2)

앞서 한 fetch 연습하기(1)에서 한걸음만 더 나가보려한다.

미세먼지 수치가 40이 넘는 친구들의 글씨를 빨강으로 바꿔주고싶다.

 

우선 모든 글씨를 빨강으로 바꿔주려한다. 그럼 아래와 같이 작성해보자.

먼저 style에 가서 아래 코드를 작성해준뒤,

.bad{

            color : red;

        }

아까 작성한

let temp_html = `<li class ="bad">${gu_name}: ${gu_mise}</li>`

이부분의 li에 위 코드처럼 class로 bad를 가리키면 아래 사진처럼 빨갛게 나온다.

그럼 이번엔 40이 넘으면 빨갛게 하고 그렇지 않으면 냅둬라를 해볼꺼다.

우선 우리가 배웠던 if문을 가지고 아래 코드처럼 작성해준다.

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>`

                    }

이렇게 되면 미세먼지 수가 40이상일땐 class를 먹인 li를 보여주고, 그렇지 않다면 class가 없는 애를 내보여줘라. 가 된다.

그럼 결과는 아래 사진처럼 나온다.

여기까지하고 이번엔 서울 따릉이를 가지고 좀 더 연습해보기로 한다.