course/spartacoding

[웹개발 종합반] 2주차 (5) 2주차 과제

hjkim0502 2021. 10. 29. 20:17

1주차 과제에서 만든 쇼핑페이지에 실시간 환율 정보 추가

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

    <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=Nanum+Gothic&display=swap" rel="stylesheet">

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

    <style>
        * {
            font-family: 'Nanum Gothic', sans-serif;
        }

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

        .rate {
            color: blue;
        }

        .product-image {
            width: 500px;
            height: 300px;

            background-image: url("data:image/jpeg;base64,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");
            background-size: contain;
            background-position: center;

            margin-bottom: 10px;
        }

        .price {
            font-size: 18px;
        }

        .product-order {
            margin-top: 20px;
        }

        .btn {
            display: block;
            width: 100px;
            margin: auto;
        }
    </style>

    <script>
        $(document).ready(function () {
            // 로딩되는 즉시 밑의 코드 실행
            showRate()
        });

        function showRate() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let rate = response['rate']

                    let temp_html = `<p class="rate">달러-원 환율: ${rate}</p>`
                    $('.product-info').append(temp_html)
                }
            })
        }

    </script>
</head>

<body>
    <div class="wrap">
        <div class="product-image"></div>
        <div class="product-info">
            <h1>수제버거 <span class="price">price: $5</span></h1>
            <p>세상에서 제일 맛있는 수제버거 팝니다.</p>
        </div>
        <div class="product-order">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">주문자 이름</span>
                </div>
                <input type="text" class="form-control" placeholder="" aria-label="Username"
                       aria-describedby="basic-addon1">
            </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">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">주소</span>
                </div>
                <input type="text" class="form-control" placeholder="" aria-label="Username"
                       aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">전화번호</span>
                </div>
                <input type="text" class="form-control" placeholder="" aria-label="Username"
                       aria-describedby="basic-addon1">
            </div>
            <button type="submit" onclick="order()" class="btn btn-primary">주문하기</button>
        </div>
    </div>
</body>

</html>