웹개발종합반 2주차 - 숙제 : 쇼핑몰에 환율 정보 넣어주기
2022. 1. 2. 16:17ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
숙제 : 쇼핑몰에 환율 정보 넣어주기
환율api
http://spartacodingclub.shop/sparta_api/rate
홈페이지를 켜거나 새로고침했을때 로딩이 되자마자 환율을 바로 보여주게끔 하자
힌트 :
"javascript 로딩 후 실행"이라고 검색
<script>
$(document).ready(function(){
//alert('다 로딩됐다!') // alert가 로딩되자마자 뜬다
q1(); // 로딩하자마자 q1을 실행한다 -> 이미지 불러와짐
});
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let image = response[0]['url'];
$('#img-cat').attr("src",image); // img-cat id안의 src 데이터를 "image"로 변경
}
})
}
</script><!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 href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
* {
font-family: 'Stylish', sans-serif;
}
.wrap{
width: 500px;
margin : auto;
}
.price {
font-size : medium;
}
.mybtn {
width: 100px;
margin : auto;
/*margin : auto;만 하면 안움직인다. 박스가 아니라 글씨이기 때문에 가로세로가 없음*/
display: block;
}
.txt{
margin-top: 20px;
}
#names-q1 {
color: blue;
}
</style>
<script>
$(document).ready(function(){
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rates = response['rate']
let temp_html = `<span>달러-원 환율 : ${rates}`
$('#names-q1').append(temp_html)
}
})
});
</script>
</head>
<body>
<div class = "wrap">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_aUlwS_eOHo-CUPHU20EuHw_1xRPdBeYWow&usqp=CAU" width="500px" height="500px">
<div class = "txt">
<h1>양초를 팝니다<span class = "price">가격:3000원/개</span></h1>
<p>이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다.
하나 사가세요! 대나무 향이 아주 좋아요</p>
<div>
<span id = "names-q1">달러-원 환율 : 1000.00</span>
</div>
<div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">주문자 이름</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">수량</div>
</div>
<select class="form-control" id="exampleFormControlSelect1">
<option>--수량을 선택하세요--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">주소</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">전화번호</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2">
</div>
</div>
<div class="mybtn">
<button type="button" class="btn btn-primary">주문하기</button>
</div>
</div>
</div>
</body>
</html>
'코딩공부 > 스파르타코딩클럽 - 웹개발종합반' 카테고리의 다른 글
| 웹개발종합반 3주차 - 파이썬 시작하기 / 파이썬 기초공부 (0) | 2022.01.02 |
|---|---|
| 웹개발종합반 3주차 - 3주차 설치 / 3주차 오늘 배울 것 / 연습 겸 복습 - 나홀로메모장에 OpenAPI 붙여보기 (0) | 2022.01.02 |
| 웹개발종합반 2주차 - Quiz_Ajax 연습하기(1) / Quiz_Ajax 연습하기(2) (0) | 2022.01.02 |
| 웹개발종합반 2주차 - Ajax 시작하기 / Ajax 함께 연습하기 (0) | 2022.01.02 |
| 웹개발종합반 2주차 - 서버-클라이언트 통신 이해하기 (0) | 2022.01.01 |