[스.코] 웹개발 종합반 2주차-3

Jessie H·2021년 12월 8일
2주차마코의공부일지스파르타코딩클럽웹개발종합반코딩공부
0

스파르타코딩클럽 웹개발종합반

목록 보기
5/13

웹개발 종합반 2주차 개발일지

ajax 입문

jquery와 ajax를 활용하기

<!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;
        }
        .bad {
            color: red;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                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 > 110) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        }else{
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }

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

</head>

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

    <hr/>

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
        </ul>
    </div>
</body>

</html>

새로 배운 html

<li></li> 목록 만들기
<p></p> 문단

ajax 활용 2

현재 서울시 따릉이 대여소 자전거 현황

<!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 (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 < 20) {
                            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>

*let temp_html = `` 쓰는거 잊지 말자(''가 아님)

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

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

        </style>

        <script>
            function q1() {
                $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rtan",
                data: {},
                success: function (response){
                    let url = response['url']
                    let msg = response['msg']

                    $('#img-rtan').attr("src",url);
                    $('#text-rtan').text(msg);
                        }
                })
            }
        </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-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
                <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
            </div>
        </div>
    </body>
</html>

이건 다른 것도 다시 만들어보고 싶은데 이미지 api 받을 곳이 없어서 연습할 방법이...마땅치 않은 느낌이다 흑...

과제 <팬명록에 실시간 서울 날씨 올리기>

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

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

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

    <title>허광한 팬명록</title>

    <style>
       @font-face {
        font-family: 'Amsterdam';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_01@1.0/Amsterdam.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        }
        @font-face {
            font-family: 'Cafe24Oneprettynight';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        .mytitle {
            font-family: 'Cafe24Oneprettynight';
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDAyMTZfMTI1%2FMDAxNTgxODYyMDY0Mzcz.eT3jfREbrjg_iEyXfM1SrlgfE-FphDhB83G0Ij4zOd0g.aWcpioWF6sPhXul9Pigifu3iiulUmibRIKYi_zXgBcog.JPEG.debedebedep%2FIMG_1319.JPG&type=sc960_832);
            background-position: center 45%;
            background-size: cover;
            color: white;
            display: flex;
            height: 400px;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            }
        .mypost {
            font-family: 'Cafe24Oneprettynight';
            max-width: 500px;
            width:95%;
            margin: 20px auto 0px auto;
            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }
        .mycards {
            font-family: 'Amsterdam';
            max-width: 500px;
            width:95%;
            margin: 20px auto 0px auto;
        }
        .mycards > .card {
            margin: 20px auto;
        }

       .mypost > button {
            margin-top: 10px;
        }
    </style>

    <script>
        $(document).ready(function(){
             $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response){
                    let ondo = response['temp'];
                    $('#temp').text(ondo);
                        }
                })
        });





        function c1() {
            let txt3 = $('#input-q3').val()
            let temp_html = `<li>${txt3}</li>`
            $('#names-q3').append(temp_html)
        }

    </script>

</head>

<body>
    <div class="mytitle">
        <h1>♥허광한 팬명록♥</h1>
        <p>현재 기온: <span id = "temp"></span>도</p>
    </div>
    <div id = cheeruptxt class="mypost">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
          <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
          <label for="floatingTextarea2">응원댓글 남기기</label>
        </div>
        <button oneclick = "c1()" type="button" class="btn btn-dark">응원 남기기</button>
    </div>
    <div class = mycards>
        <div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>새로나온 신곡도 너무 좋아요!</p>
            <footer class="blockquote-footer">상친니 <cite title="Source Title"></cite></footer>
        </blockquote>
    </div>
   </div>
        <div class="card">
           <div class="card-body">
               <blockquote class="blockquote mb-0">
                   <p>광한아 제발 내한해줘ㅠㅠ </p>
                   <footer class="blockquote-footer">광한바라기 <cite title="Source Title"></cite></footer>
               </blockquote>
           </div>
        </div>
        <div class="card">
           <div class="card-body">
               <blockquote class="blockquote mb-0">
                   <p>노래, 연기 대체 못하는 게 뭐야 우리 광한옵빠!!!</p>
                   <footer class="blockquote-footer">광한빠 <cite title="Source Title"></cite></footer>
               </blockquote>
           </div>
       </div>
    </div>
</body>

</html>

해설 영상 안보고 스스로 한거라 매우 뿌듯
곧 남자친구랑 만드는 홈페이지에도 이 현재 온도는 올려야겠다.
오산-서울 따로 올려야지 후후

좀 많이 늦었지만 2주차 끝!

3주차에선 파이썬 배운다 야호

profile
Jessie H
코딩 공부 기록장
이전 포스트

[스.코] 웹개발 종합반 1주차 과제_허광한 팬명록 만들기

다음 포스트

[스.코] 웹개발 종합반 3주차(1) 파이썬

0개의 댓글