728x90
반응형
2주차 jQuery 관련 JSON을 간략하게 배울 수 있어서 좋았어요.
다시 한번 복습하면서 내가 정말 잘 활용할 수 있도록 복습 하는 것이 정말 중요한 것 같아요.
어제의 나보다 더 괜찮은 나를 만들자~!!
<!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 -->
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>2주차 숙제</title>
</head>
<style>
body{
background-color: pink;
}
* {
font-family: 'Do Hyeon', sans-serif;
}
.image {
width: 400px;
height: 370px;
background-size: cover;
background-position: center;
margin: 20px auto;
}
.price {
font-size: 17px;
}
.tag {
margin-left: 520px;
display: block;
}
.text {
font-size: 14px;
}
.order {
margin: auto;
width: 400px;
}
.btn-primary{
margin: auto;
display: block;
}
</style>
<script>
$(document).ready(function () {
get_rate();
});
function get_rate(){
$.ajax({
type: "GET",
data: {},
success: function (response) {
let now_rate = response['rate'];
$('#now-rate').text(now_rate);
}
})
}
function order() {
alert('주문이 완료되었습니다!');
}
</script>
<body>
<div class="image">
</div>
<div class="tag">
<h3 class="name"> 책을 읽어 드립니다. <span class="price">가격:3,000원</span></h3>
<p class="text">소중한 당신에게 인생의 방향을 위해서 꼭 읽어야 하는 책입니다.<br>자신의 미래에 대한 방향성을 찾아갈 수 있도록 들어 보세요.</p>
<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
</div>
<div class="order">
<div class="input-group mb-3" id="customer">
<div class="input-group-prepend">
<span class="input-group-text" id="customer_name">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-describedby="customer_name">
</div>
<div class="input-group mb-3" id="product">
<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">시크릿 2,000원</option>
<option value="2">시크릿 실천법 3,000원</option>
</select>
</div>
<div class="input-group mb-3" id="address">
<div class="input-group-prepend">
<span class="input-group-text" id="address_text">주소</span>
</div>
<input type="text" class="form-control" aria-describedby="address_text">
</div>
<div class="input-group mb-3" id="phone_number">
<div class="input-group-prepend">
<span class="input-group-text" id="phone_text">전화번호</span>
</div>
<input type="text" class="form-control" aria-describedby="phone_text">
</div>
<button type="button" class="btn btn-primary" onclick="order()">주문하기</button>
</div>
</body>
</html>
728x90
반응형
'IT Study' 카테고리의 다른 글
| [스파르타 코딩클럽] 엑셀보다 쉬운 SQL - 2주차 후기 (1) | 2022.01.11 |
|---|---|
| [스파르타 코딩클럽] 엑셀보다 쉬운 SQL - 1주차 후기 (1) | 2022.01.11 |
| [스파르타 코딩클럽] 웹개발 종합반 - 1주차 후기 (0) | 2022.01.06 |
| Advanced Google Analytics Assessment4 문제/답 (0) | 2021.03.01 |
| Advanced Google Analytics Assessment3 문제/답 (0) | 2021.03.01 |
