내일배움단 2주차 과제+퀴즈 응용편

후기는 5주차에 뵙는걸로 하겠음.

---

퀴즈 응용편-따릉이 API

일단 본인은 따릉이를 매우 좋아해서 겨울 빼면 장기 이용권(월단위) 사서 풀스로틀 밟는다. 샌들신고 풀스로틀 어제이씨 따릉이 안쪽에서 빼는데 그거 뻔히 보고도 길막하더라. 옆에는 공공킥보드도 있어서 진짜 쌍욕하면서 자전거 뺐음… 아무튼. 이번 퀴즈의 내용은

1. Ajax를 이용해서 따릉이 API(정류장명/거치대수/지금 몇대?)를 가져와서
2. 5대 미만 있으면 빨간색으로 표시한다

였는데…

그 자전거 정류장이 한두개가 아니그등요… 경복궁 막 이런데 본인 군자동 살잖아… 내가 망원동까지 갈 일이 없어요… 그래서!

정규식씨를 불렀다.

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++) {
                bike_station = rows[i]['stationName']
                bike_count = rows[i]['parkingBikeTotCnt']
                bike_rack = rows[1]['rackTotCnt']
                if (bike_station.match('광진|군자|세종대학교|건국대학교')) {
                    let temp_html = ''
                    if (bike_count < 5) {
                        temp_html = `<tr class="nobike">
                                <td>${bike_station}</td>
                                <td>${bike_rack}</td>
                                <td>${bike_count}</td>
                            </tr>`
                    } else {
                        temp_html = `<tr>
                                <td>${bike_station}</td>
                                <td>${bike_rack}</td>
                                <td>${bike_count}</td>
                            </tr>`
                    }
                    $('#names-q1').append(temp_html)
                }
            }
        }
    })
}

여기서

(bike_station.match('광진|군자|세종대학교|건국대학교'))

이 부분이 정규식이 들어간 부분. 그냥 집 근처에 있는건 다 OR로 묶어버렸다. 그럼 어떻게 되느냐…

이렇게 정류장명에 광진/군자/세종대학교/건국대학교가 들어가는 것만 나온다. (글자색만 바꾸고 싶으면 테이블 td에 border 색깔 속성을 주면 된다)

이번주 과제

Ajax로 원-달러 환율을 넣는 문제였는데 이게… 페이지가 로딩이 되자마자 표시해야 한다. 지금까지 했던 게 버튼을 눌러야 갱신이 되는것과는 다른 문제.

function current() {
    $('#current').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rate",
        data: {},
        success: function (response) {
            KRW_dollar = response['rate']
            let temp_html = `<p>달러-원 환율: ${KRW_dollar}</p>`
            $('#current').append(temp_html)
        }
    })
}

일단 짜고

$(document).ready(function () {
    current()
});

이걸 쓰면 된다.