본문 바로가기
스파르타/웹개발

22.01.24 Java Script & Ajax Quiz

by h.단디 2022. 1. 25.

 

quiz 1. 따릉이 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;
        }
    </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 (i = 0; i < rows.length; i++) {
                        let name = rows[i]["stationName"]
                        let rack = rows[i]["rackTotCnt"]
                        let bike = rows[i]["parkingBikeTotCnt"]

                        let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</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>

1-2) 5개 미만인 곳 빨갛게 표시하기

   a. 먼저 전체를 빨갛게 해본다 (class 먹이기)

   b. 비어있는 temp_html을 만들고

   c. if 문을 활용한다

 

<!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;
        }

        .urgent{
            color : red;
        }

    </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 (i = 0; i < rows.length; i++) {
                        let name = rows[i]["stationName"]
                        let rack = rows[i]["rackTotCnt"]
                        let bike = rows[i]["parkingBikeTotCnt"]

                        let temp_html = ``

                        if (bike <5){
                            temp_html = `<tr class = urgent>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                          </tr>`

                        } else {
                            temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</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>

 

 

 

 

 

 

 

quiz2. 고양이 사진 API 활용하기

💡img url 바꾸는 jquery    ->    $("#id_img").attr("src", "이미지 경로");

<!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;
        }

        div.question-box > div {
            margin-top: 30px;
        }

    </style>

    <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    let imgurl = response[0]["url"]
                    $("#img-cat").attr("src", imgurl)
                }
            })
        }
    </script>

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

<hr/>

<div class="question-box">
    <h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
    <p>예쁜 고양이 사진을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">고양이를 보자</button>
    <div>
        <img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    </div>
</div>
</body>
</html>

 

 

 

2주차 숙제 해야하는데 스파르타 코딩 API가 접속이 안 된다 ㅠㅠ...

접속되는대로 해 보고 수정할거임

'스파르타 > 웹개발' 카테고리의 다른 글

2주차 개발일지  (0) 2022.01.27
22.01.26 2주차 과제 <원페이지 쇼핑몰에 환율 계산기 달기>  (0) 2022.01.27
22.01.22 JQuery적용하기 <나만의 메모장>, JQuery Quiz  (0) 2022.01.23
22.01.21 Javascript 복습, JQuery 다뤄보기  (0) 2022.01.21
1주차 개발일지  (0) 2022.01.21

관련글

티스토리툴바