스파르타 웹개발 종합반 2주차 - Ajax 연습

2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기
   모든 위치의 따릉이 현황을 보여주기
   업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 하며.
   현재 거치된 따릉이 수가 5대보다 작으면 해당 행의 글씨를 빨간색으로 나오게 출력한다.

※ 서울시 실시간 따릉이 Open API 링크

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

<head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }

        .bad{
            color: red;
            font-weight: bold;
        }

    </style>

    <script>
        function q1() {
            $('#names-q1').empty();
            // 여기에 코드를 입력하세요
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let st_name = rows[i]['stationName']
                        let ract_cnt = rows[i]['rackTotCnt']
                        let bike_cnt = rows[i]['parkingBikeTotCnt']


                        let temp_html = ``;

                        if (bike_cnt < 5) {
                            temp_html = `<tr class="bad" >
                            <td>${st_name}</td>
                            <td>${ract_cnt}</td>
                            <td>${bike_cnt}</td>
                            </tr>`;
                        } else {
                             temp_html = `<tr class>
                            <td>${st_name}</td>
                            <td>${ract_cnt}</td>
                            <td>${bike_cnt}</td>
                            </tr>`;
                        }

                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

</head>

<body>
<h1>jQuery + Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
    <p>모든 위치의 따릉이 현황을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <table>
        <thead>
        <tr>
            <td>거치대 위치</td>
            <td>거치대 수</td>
            <td>현재 거치된 따릉이 수</td>
        </tr>
        </thead>
        <tbody id="names-q1">
       
        </tbody>
    </table>
</div>
</body>

</html>

결과 화면