2-11강 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

2-11강

undefined주차

이*은

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

강의에서 알려준 방법대로 하면 잘 나오긴 한데 다른 방법으로 해봤을 때 안되는 이유를 알고 싶어서 질문합니다.

2-11강에 미세먼지가 40보다 높을때 빨간색 글자가 뜨도록 CSS 부분을 설정해주는 부분에서 다른 방법을 사용했습니담

<아래 코드가 수업대로 했을 때 정상적으로 나왔던 코드>

이거는 if 문에서 미세먼지가 40보다 높은 temp_html 부분을 변수로 따로 선언해서 <style> 부분에서 CSS를 설정해주었고

<!doctype html>
<html lang="ko">


<head><meta charset="UTF-8"><title>미세먼지 API로Fetch 연습하고 가기!</title>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }


        .warn {
            color: red;
        }
    </style>


    <script>function q1() {
            $('#names-q1').empty();
            // 여기에 코드를 입력하세요fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM'];
                    let gu_mise = a['IDEX_MVL'];
                    let temp_html = ``if (gu_mise > 40) {
                        temp_html = `<li class="warn">${gu_name} : ${gu_mise}</li>`// $('#warn').css('color', 'red')//    ㄴ 궁금해서 해봤는데 안되었던 부분
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html);
                })
            })
        }
    </script>


</head>


<body><h1>Fetch 연습하자!</h1>


    <hr />


    <div class="question-box"><h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2><p>모든 구의 미세먼지를 표기해주세요</p><p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p><button onclick="q1()">업데이트</button><ul id="names-q1"></ul></div>
</body>


</html>

<아래가 궁금한 방식으로 했을 때 결과가 위 코드로 해서 나온 결과와 같을 것이라고 생각했는데 결과가 제대로 나오지 않은 코드>

이거는 if 문에서 미세먼지가 40보다 높은 temp_html 부분을 변수로 따로 선언해서 jquery를 이용해서 CSS부분을 설정해주었습니담..
제가 생각했을 때는 미세먼지 40 넘는 부분은 빨간색으로 나올 줄 알았는데 안나오는 이유가 뭔가욤? 하나만 빨간색으로 표시가 되더라구요

<!doctype html>
<html lang="ko">


<head><meta charset="UTF-8"><title>미세먼지 API로Fetch 연습하고 가기!</title>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }


        /* .warn {
            color: red;
        } */</style>


    <script>function q1() {
            $('#names-q1').empty();
            // 여기에 코드를 입력하세요fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM'];
                    let gu_mise = a['IDEX_MVL'];
                    let temp_html = ``if (gu_mise > 40) {
                        temp_html = `<li id="warn">${gu_name} : ${gu_mise}</li>`
                        $('#warn').css('color', 'red')
                        //    ㄴ 궁금해서 해봤는데 안되었던 부분
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html);
                })
            })
        }
    </script>


</head>


<body><h1>Fetch 연습하자!</h1>


    <hr />


    <div class="question-box"><h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2><p>모든 구의 미세먼지를 표기해주세요</p><p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p><button onclick="q1()">업데이트</button><ul id="names-q1"></ul></div>
</body>


</html>

댓글 알림