티스토리 뷰
반응형
http://spartacodingclub.shop/sparta_api/rate
$(document).ready(function(){
alert('다 로딩됐다!')
});
<!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=Single+Day&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
* {
font-family: 'Single Day', cursive;
}
.mytitle {
background-color: green;
width: 600px;
height: 300px;
color: white;
text-align: center;
background-image: url("https://image.idus.com/image/files/4a0c0eb68d194c79aa27ffb735905fa8.png");
background-size: cover;
background-position: center;
margin: 10px auto 10px auto;
}
.mybtn {
width: 200px;
margin: auto;
display: block;
background-color: wheat;
outline-color: black;
color: black;
border-radius: 10px;
font-size: 20px;
}
.wrap {
width: 600px;
margin: auto;
display: block;
}
.rate {
color: blue;
}
</style>
<script>
$(document).ready(function () {
q1();
});
function q1() {
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let now_rate = response[1]['rate'];
$('#now-rate').text(now_rate);
}
})
}
function hey() {
alert('주문이 완료되었습니다.');
}
</script>
</head>
<body>
<div class="wrap">
<div class="mytitle">
</div>
<h1>극세사 타올 <span style="font-size: 20px"> 가격 : 12000원/개</span></h1>
<p>이 타올은 여성들의 바쁜 출퇴근 시간을 줄여 주는 유용한 타올이예요!! 또한 기존의 타올은 면 소재의 물 흡수를 위하여 올가미 형태로 인해 미세한 스크레치가 발생하지만 극세사 원단을 사용하여 머리와 피부
손상을 최소화합니다!!</p>
<p class="rate">달러-원 환율: <span id="now-rate">1212.12</span></p>
<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" pla ceholder="" aria-label=""
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="input-group-text" type="button">수량</button>
</div>
<select class="custom-select" id="inputGroupSelect03">
<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=""
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=""
aria-describedby="basic-addon1">
</div>
<button class=mybtn onclick="hey()">주문하기</button>
</div>
</body>
</html>반응형
