코딩과 결혼합니다

Fetch 연습하기 본문

2세/기타

Fetch 연습하기

코딩러버 2023. 5. 7. 23:18
728x90

웹개발 종합반 2주차 - Fetch 연습하기

 

 

 

 

기본 코드

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

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
        }
    </script>
<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">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
</body>

업데이트 버튼을 누르면 q1이라는 함수가 동작하도록 하여

서울시 OpenAPI(실시간 미세먼지 상태) 의 데이터가 쭉 나오게 할 것이다. (▀̿Ĺ̯▀̿ ̿)

 

 

 

 

 

+ 40이 넘어가면 빨간색으로!

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

        .bad{
            color: red;
        }
    </style>
function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                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="bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                   
                    $('#names-q1').append(temp_html)
                })
            })
        }

 

 

 

 

 

 

 

 

'2세 > 기타' 카테고리의 다른 글

코딩테스트연습 - 두 수의 합, 차, 곱, 몫, 나머지  (0) 2023.05.25
Fetch 연습하기 (2주차 숙제)  (0) 2023.05.08
Javascript 문법 연습하기(2) - Fetch  (0) 2023.05.07
Javascript 문법 연습하기(1)  (0) 2023.05.06
javascript(3) 반복문, 조건문  (0) 2023.05.06
'2세/기타' Related Articles more