sparta_homework/homework.html at main · woo-ju-yeon/sparta_homework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- Webpage Title -->
    <title>나홀로 쇼핑몰</title>
    <!-- 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">
    <!-- 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>
    <!-- 구글폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
    <style type="text/css">
        * {
            font-family: 'Stylish', sans-serif;
        }
        .wrap {
            width: 500px;
            margin: auto;
        }
        .img {
            background-image: url('https://www.conscious-skincare.com/wp-content/uploads/2016/02/glc-candle-lit-with-new-gift-box.jpg');
            background-size: cover;
            background-position: center;
            width: 500px;
            height: 300px;
        }
        .info {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        h1, h5 {
            display: inline;
        }
        .order {
            text-align: center;
        }
        .orders {
            margin-top: 100px;
        }
        .color-blue {
            color: blue;
            font-weight: bold;
        }
    </style>
    <script>
        function order() {
            let name = $("#order-name").val();
            let count = $("#order-count").val();
            let address = $("#order-address").val();
            let phone = $("#order-phone").val();
            // console.log(name, count, address, phone)
            if (name == "") {
                alert("이름을 입력하세요");
            } else if (count == "") {
                alert("수량을 입력하세요");
            } else if (address == "") {
                alert("주소를 입력하세요");
            } else if (phone == "") {
                alert("전화번호를 입력하세요");
            } else {
                alert("주문이 완료되었습니다");
            }
        }
        $(document).ready(function () {
            // alert('다 로딩됐다!')
            $.ajax({
                type: "GET",
                url: "https://api.manana.kr/exchange/rate.json",
                data: {},
                success: function (response) {
                    // console.log(response)
                    let rate = response[1]['rate']
                    // console.log(rate)
                    $('#order-rate').text(rate)
                }
            })
        });
    </script>
</head>
<body>
<div class="wrap">
    <div class="img"></div>
    <div class="info">
        <h1>양초를 팝니다</h1>
        <h5>가격: 3,000원/개</h5>
        <p>이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요! 대나무 향이 아주 좋아요</p>
        <p class='color-blue'>달러 원 환율 : <span id='order-rate'>1000</span></p>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자 이름</span>
            </div>
            <input type="text" class="form-control" id="order-name">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text">수량</label>
            </div>
            <select class="custom-select" id="order-count">
                <option selected value=""> -- 수량을 선택하세요 --</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" id="order-address">
        </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" id="order-phone">
        </div>
        <div class="order">
            <button onclick="order()" type="button" class="btn btn-primary">주문하기</button>
        </div>
    </div>
    <div class="orders">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">이름</th>
                <th scope="col">수량</th>
                <th scope="col">주소</th>
                <th scope="col">전화번호</th>
            </tr>
            </thead>
            <tbody id="orders-box">
            <tr>
                <td>박르탄</td>
                <td>10000</td>
                <td>르탄시 코딩구 열심동</td>
                <td>010-1234-5678</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>