전 부터 배우고 싶었던 코딩을 공부 중이다 .
한 번 끝까지 가 볼 생각이다 . ajax으로 환율 받아서 찍어 주기
<!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>
<title>스파르타코딩클럽 | 1주차 숙제</title>
<link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Sunflower', sans-serif;
}
.wrap {
width: 700px;
margin: 30px auto 20px auto;
}
.product-img {
width: 900px;
margin: 30px auto 20px auto;
}
.item-display {
width: 700px;
margin-bottom: 30px;
}
.btn {
display: block;
margin: auto;
}
.price {
font-size: 20px;
}
.dolar_won {
color: green;
}
</style>
<script>
$(document).ready(function () {
dolar_ratio()
});
function dolar_ratio() {
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let dolar_ratio = response[1]['rate']
$("#dolar_to_won").text(dolar_ratio);
}
})
}
function order() {
alert('주문완료')
}
</script>
</head>
<body>
<div class="product-img">
<img src="https://cdn.pixabay.com/photo/2017/07/30/01/47/image-2553230__340.jpg"
alt="product image cap">
</div>
<div class="wrap">
<div class="item-display">
<h3> 너였다면 <span class="price">가격:500원/ 개</span></h3>
<p> 너였다면 어떨 것 같아 이런 미친 날들이 네 하루가 되면 말야 너도 나만큼 혼자 부서져 본다면 알게 될까
가슴이 터질 듯 날 가득 채운 통증과 얼마나 너를 원하고 있는지</p>
</div>
<div class="dolar_won">
<p>달러-원 환율:<span id="dolar_to_won"></span></p>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">주문자 성함:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">수량:</label>
<div class="col-sm-10">
<select type="password" class="form-control" id="inputPassword3" placeholder="">
<option value="none">=== 선택 ===</option>
<option value="none">10</option>
<option value="none">20</option>
<option value="none">30</option>
<option value="spanish">40</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">주소:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">전화번호:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="">
</div>
</div>
<div class="form-group row">
<div class="btn">
<button onclick="order()" type="submit" class="btn btn-primary">주문하기</button>
</div>
</div>
</div>
</body>
</html>
디오니소스