숙제<쇼핑몰 페이지에 환율계산기 넣기>
API 적용 연습
- 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=Black+Han+Sans&family=Jua&display=swap" rel="stylesheet">
</head>
<style>
*{
font-family: 'Black Han Sans', sans-serif;
font-family: 'Jua', sans-serif;
}
.image {
background-color: green;
height: 500px;
width: 500px;
margin: 50px auto 50px auto;
background-image: url("https://unifriend.co.kr/web/product/tiny/202109/484827b7cfdbe50f7afd87b483bce9b2.jpg");
background-size: 100% 100%;
}
.descript {
width: 500px;
margin: auto;
}
.order {
width: 500px;
margin: auto auto 50px auto;
}
.btn{
width: 100px;
margin: auto;
display: block;
}
.input-group{
width: 500px;
margin: 10px auto 10px auto;
}
.selection{
width: 442px;
}
.rate{
color: blue;
width: 500px;
margin: auto;
}
</style>
<script>
$(document).ready(function () {
q1()
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let W_rate = response['rate']
let temp_html = `<span>${W_rate}</span>`
$('#rate_display').append(temp_html)
}
})
}
</script>
<div class=image>
</div>
<body>
<div class=descript>
<h1>블루카양면9부상하 <span style="font-size:50%">가격: 8,900원/벌</span></h1>
<p>면 100%의 원단으로 편면조직이 2중으로 짜여져 있어 싱글보다 보온효과가 우수합니다. 부드러운 촉감과 넉넉한 품으로 활동성이 많은 우리 아이들에게 편한 착용감을 제공합니다. 3년 이상 농약과 화학비료를
사용하지 않은 토양에서 재배된 유기농 순면 원단을 사용하여 민감한 우리 아이들 피부에게도 부담없이 입힐 수 있습니다.</p>
</div>
<div class="rate">
<p id="rate_display">원-달러 환율: <span> </span> </p>
</div>
<div class = "order">
<div>
<div>
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">주문자 이름</div>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
<div> <label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">수량</div>
<select class="form-control selection">
<option value="" disabled selected>수량을 선택하세요</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</div>
</div>
</div>
<div>
<div>
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">주소</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
</div>
<div>
<div>
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">전화번호</div>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">주문하기</button>
</div>
</body>
</html>- 새로고침을 할 때마다 API를 불러오는 코드
$(document).ready(function () {
q1()
});- let W_rate = response['rate']
consloe.log 사용해서 API 경로를 확인하고 찍어준다.
- $('#rate_display').append(temp_html)
이렇게 해도 페이지에 표시되는 건 달라보이지 않았지만,
모범답안에서는 $('#rate_display').text(temp_html)를 사용했다.
- 원/달러를 환율 뒤에 붙이고 싶었는데
<p id="rate_display">원-달러 환율: <span> </span> 원/달러 </p>나타내고 싶었던 건 "원-달러 환율: 1180원/달러" 였는데.
위 코드로 적으면
"원-달러 환율: 원/달러 1180"
이런식으로 표시가 되어서 원하는대로 안됐다.
어떻게 해야하는지 질문방에 올려봐야겠다.
- 마치며
최대한 간략하고 쉽게 내용을 알려주고,
예제나 연습문제도 그렇게 복잡한 내용은 아니었는데도 내용이 조금 어렵게 느껴졌다.
그리고 숙지가 되지 않은 느낌이다.
더 연습이 필요하다.
시작은 창대하나 끝은 미약하리라