4일차 (실습)

김건우·2021년 10월 1일
0

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

목록 보기
8/20

<!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 cat = response['0']['url']
                    $('#img-cat').attr("src",cat)
                }
            })
        }
    </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>



<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <!-- 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>
    <style>
        * {
            font-family: 'Yeon Sung', cursive;
        }

        .top_margin {
            margin: 35px;
        }

        .wrap {
            width: 500px;
            margin: auto;
        }

        .item_info {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .price {
            font-size: 20px;
        }

        .item_order {
            width: 450px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .order {
            width: 100px;
            margin: auto;
            display: block;
        }

        .rate {
            color: blue;
            font-size: small;
        }
    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let date = response['date']
                    let rate = response['rate']
                    let rate_text = `<p>${date}자 달러-원 환율 : ${rate}</p>`
                    $('#rate').append(rate_text)
                }
            })
        })

        function order() {
            alert('예약이 완료되었습니다.');
        }
    </script>
</head>
<body>
<div class="top_margin"></div>
<div class="wrap">

    <div class="card border-dark mb-3" style="max-width: 25rem;">
        <div class="card-header">유럽여행 4박 6일 패키지</div>
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWKv4nuXL-ya4NdYocUTVHtF5uXgOVKCHF2Q&usqp=CAU"
             alt="Card image cap">
    </div>
    <div class="item_info">
        <h2>유럽여행 5박 6일 패키지 <span class="price">가격 : 600,000원 / 일</span></h2>
        <p>북유럽 4박 6일 패키지 / 온라인 특별가 / 왕복 항공권포함 / TAX및 유류할증료 변경가능 / 카드사별 무이자 / 성인 1인 1박기준</p>
    </div>
    <span class="rate" id=rate></span>
    <div class="item_order">
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">주문자 이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <button class="btn btn-outline-secondary" type="button">인수</button>
            </div>
            <select class="custom-select" id="inputGroupSelect03">
                <option selected></option>
                <option value="1">1명</option>
                <option value="2">2명</option>
                <option value="3">3명</option>
                <option value="3">4명</option>
            </select>
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">연락처</span>
            </div>
            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
    </div>
    <div class="order">
        <button type="button" class="btn btn-primary" onclick="order()">예약하기</button>
    </div>
</div>

</body>
</html>



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


<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">
    <!-- 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>
    <style>
        * {
            font-family: 'Gowun Batang', serif;
        }

        .wrap {
            width: 900px;
            margin: auto;

        }

        .comment {
            color: blue;
            font-weight: bold;
        }

        .posting-box {
            border: black solid;
            border-radius: 5px;
            width: 500px;
            margin: 20px auto;
            padding: 50px;

            display: none;

        }
    </style>
    <script>
        $(document).ready(function () {
            $('#card-box').empty()
            listing()
        })

        function listing() {

            $.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-title">${title} </a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</span></p>

                    </div>
                </div>`
                        $('#card-box').append(temp_html)
                    }
                }
            })
        }

        function boxclick() {
            let status = $('#post-box').css('display');
            if (status == 'block') {
                $('#post-box').hide();
                $('#btn-posting-box').text('포스팅박스 열기');
            } else {
                $('#post-box').show();
                $('#btn-posting-box').text('포스팅박스 닫기');
            }
        }
    </script>

</head>

<body>

<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나 홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다.</p>
        <hr class="my-4">
        <p class="lead">
            <a onclick="boxclick()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스
                닫기</a>
        </p>
    </div>
    <div class="posting-box" id="post-box">
        <div class="form-group">
            <label for="">아티클 URL</label>
            <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
                   placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">간단 코멘트</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="">
        </div>
        <button type="submit" class="btn btn-primary">기사 저장</button>
    </div>
    <div class="card-columns" id="card-box">
    </div>
</div>


</body>

</html>

profile
김건우
공부하는 개발자가 목표입니다.
이전 포스트

4일차 (이론)

다음 포스트

5일차 (이론)

0개의 댓글