아이패드 가격:1,000,000원/개
아이패드 사고 싶어요!
달러-원 환율:
주문자이름
수량
주소
전화번호
↑결과물↑
이번 주에는 원 달러 환율이 새로고침 할 때마다 바뀌는 작업을 했다.
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>
<title>아이패드 구매</title>
<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=East+Sea+Dokdo&display=swap" rel="stylesheet">
<style>
* {
font-family: 'East Sea Dokdo', cursive;
}
.itemimg {
width: 500px;
height: 350px;
background-image: url("https://image.zdnet.co.kr/2021/04/21/3408cbc939ef314715e5d9d988afde14.jpg");
background-size: cover;
background-position: center;
margin: auto;
}
.all {
width: 95%;
height: 730px;
display: flex;
flex-direction: column;
align-items: center;
}
.alse {
width: 500px;
float: left;
font-weight: bold;
}
.price {
font-size: 20px;
}
.btn {
display: block;
margin: auto;
background-color: aqua;
}
.font {
font-size: 25px;
margin: auto;
}
.input-group-text {
font-size: 16px;
}
.rate{
color: blue;
}
</style>
<script>
$(document).ready(function () {
get_rate();
});
function get_rate(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let now_rate = response['rate'];
$('#now-rate').text(now_rate);
}
})
}
function order() {
alert('주문이 완료되었습니다!');
}
</script>
</head>
<body>
<div class="all">
<p class="itemimg"></p>
<div class="alse">
<h1> 아이패드 <span class="price">가격:1,000,000원/개</span></h1>
<div>
<p class="font">아이패드 사고 싶어요!</p>
<p class="rate">달러-원 환율: <span id="now-rate"></span></p>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">주문자이름</span>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">수량</span>
<select class="custom-select">
<option selected="">-- 수량을 선택하세요 --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">주소</span>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">전화번호</span>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<button type="button" onclick="order()" class="btn">사주기</button>
</div>
</div>
</body>
</html>
