11코딩완주챌린지 [2주차] 5일차

1. 학습내용

✔ Ajax 함께 연습하기
[기본골격]

$.ajax({
          type: "GET",
          url: "url입력",
          data: {},
          success: function (response) {
            console.log(response)
          }
        })
      }

[서울시 API]
-업데이트 누를 때마다 지웠다 새로 씌어져야 하는 루틴

function q1() {
            $.ajax({
              type: "GET",
              url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
              data: {},
              success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                console.log(rows[i])        

새로고침 후 업데이트 누른 후 콘솔창 확인!

function q1() {
            $.ajax({
              type: "GET",
              url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
              data: {},
              success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM']
                    let gu_mise = rows[i]['IDEX_MVL']
                    console.log(gu_name,gu_mise)
                }

새로고침 후 업데이트 누른 후 콘솔창 확인!

function q1() {
            $.ajax({
              type: "GET",
              url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
              data: {},
              success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM']
                    let gu_mise = rows[i]['IDEX_MVL']

                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`    <- 하단에서 <li>은평구 : 82</li> 가져옴.
                    console.log(temp_html)
                }

새로고침 후 업데이트 누른 후 콘솔창 확인!

function q1() {
            $.ajax({
              type: "GET",
              url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
              data: {},
              success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM']
                    let gu_mise = rows[i]['IDEX_MVL']

                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)       <-하단에서 id값인 'names-q1' 가져옴.
                }

function q1() {
            $('#names-q1').empty()       <- Ajax 앞에 지웠다 새로 씌어지는 방법!
            $.ajax({
              type: "GET",
              url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
              data: {},
              success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM']
                    let gu_mise = rows[i]['IDEX_MVL']

                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html)
                }
              }
})
        }

++ 미세먼지 수치가 70이상인 걸 빨갛게 만드는 루틴

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

    <script>
        function q1() {
            $('#names-q1').empty()
            $.ajax({
              type: "GET",
              url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
              data: {},
              success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM']
                    let gu_mise = rows[i]['IDEX_MVL']

                    let temp_html=``
                    if (gu_mise > 70) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                }
              }
})
        }

[서울시 따릉이]

.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 (let 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)

                    }
                }
            })
        }

[고양이API]

function q1() {
        $.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function (response) {
            let imgurl = response[0]['url']  <-콘솔창에서 0번째 url임을 확인할 것!
            $('#img-cat').attr('src',imgurl)
          }
        })
      }

2주차 과제 루틴

<p class="rate">달러-원 환율: 1219.15</p>

로딩 후 실행하기 [기본골격]

$(document).ready(function () {
            alert('로딩이 완료되었습니다!')
        });

$(document).ready(function () {
            get_rate();
        });
        function get_rate(){
            alert('로딩이 완료되었습니다!')
        }

$(document).ready(function () {
            get_rate();
        });
        function get_rate(){
            $.ajax({
          type: "GET",
          url: "https://api.manana.kr/exchange/rate.json",
          data: {},
          success: function (response) {
              console.log(response)[1]['rate']
          }
       })
    }

콘솔창에서 확인!

<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>

span태그를 넣어줘서 id값을 부여한다.

$(document).ready(function () {
            get_rate();
        });
        function get_rate(){
            $.ajax({
          type: "GET",
          url: "https://api.manana.kr/exchange/rate.json",
          data: {},
          success: function (response) {
              let now_rate = response['rate'];
              $('#now-rate').text(now_rate);
          }
       })
     }

--------완성본--------

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .item-img {
            width: 500px;
            height: 300px;

            background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAyMDNfMjYz%2FMDAxNjEyMzM2NDAzOTk2.52e32yWdGvP-K-YFPqN4zUyQAB04LnSL2t_d0N5xWYcg.buuAsWLurzvigKPdpY7BC4OyCC5Hmhh6DNuoeGfe_Dog.JPEG.vortexrho98%2F%25C1%25FC%25BA%25BC7.jpg&type=sc960_832");
            background-position: center;
            background-size: cover;
        }

        .price {
            font-size: 20px;
        }

        .item-desc {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .item-order {
            width: 500px;
        }

        .btn-order {
            margin: auto;
            width: 100px;
            display: block;
        }
        .wrap {
            width: 500px;
            margin: auto;
        }
        .rate {
            color: blue;
        }
    </style>

    <script>
        $(document).ready(function () {
            get_rate();
        });

        function get_rate() {
            $.ajax({
                type: "GET",
                url: "https://api.manana.kr/exchange/rate.json",
                data: {},
                success: function (response) {
                    let now_rate = response[1]['rate'];
                    $('#now-rate').text(now_rate);
                }
            })
        }

        function order() {
            alert('주문이 완료되었습니다!');
        }
    </script>
</head>

<body>
<div class="wrap">
    <div class="item-img"></div>
    <div class="item-desc">
        <h1>짐볼을 팝니다 <span class="price">가격:17,900원/개</span></h1>
        <p>스트라이프 타입, 마사지 타입, 멀티 타입 3가지 타입으로 다양한 운동이 가능합니다.</p>
        <p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
    </div>
    <div class="item-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>-- 수량을 선택하세요 --</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
    </div>
</div>
</body>

</html>

2주차 과제 중 오타와 띄어쓰기 조심 그리고 코드쓰임 놓치지 않고 짜기!

✔ Ajax 연습 겸 복습하기
[나홀로메모장에 OpenAPI 넣기]

<script>
        $(document).ready(function () {
            listing();
        });

        function listing() {
            $('#cards-box').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/post",
                data: {},
                success: function (response) {
                    let rows = response['articles']
                    for (let i = 0; i < rows.length; i++) {
                        let comment = rows[i]['comment']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let title = rows[i]['title']
                        let url = rows[i]['url']

                        let temp_html = `<div class="card">
                                            <img class="card-img-top"
                                                 src="${image}"
                                                 alt="Card image cap">
                                              <div class="card-body">
                                                   <a href="${url}" class="card-text"> ${title}</a>
                                                   <p class="card-text">${desc}</p>
                                                   <p class="card-text comment">${comment}</p>
                                              </div>
                                           </div>  `
                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }

2. 학습소감

Ajax를 이용해서 OpenAPI 하게끔 연습했는데, 점차 눈에 익숙해진다.
점점 코드가 많아진다 ㅎㄷㄷ
순서루틴을 꼼꼼히 기억해야되겠다!!!
코드 안에 추가할 팁들을 적어두고 있는 중~

ps. 가끔 컴퓨터 크롬브라우저에서 새탭을 열때 잘 작동되지 않아 연습할 때 버겁다....
그래서 껐다 켰다를 하지만, 이 현상이 요새 잘 나타나서
이 방법을 해결하려고 구글링을 시도했는데. 여러가지 방법이 있긴 하나, 매번 껐다 켰다를 반복하기엔 무리가 있고, 이 현상을 잘 해결해야겠다.