0517
항해99 2기 사전 준비
웹개발 종합반 2주차
[JS 복습]
<script>
let count= 1;
function hey() {
if (count% 2 == 0) {
alert('짝수입니다!')
} else {
alert('홀수입니다!')
}
count+= 1;
}
</script>[JQuery]
JQuery 사용할 때 google cdn import하기!
bootstrap 사용한 경우 JQuery가 이미 import 되어 있음
$('#post-box').hide(); // #post-box 숨기기
$('#post-box').show(); // #post-box 보이게 하기
$('#btn-posting-box').text('포스팅박스 닫기'); // 텍스트 바꾸기
let temp_html = `<button>나는 버튼이다</button>`
$('#cards-box').append(temp_html) // #cards-box에 버튼 추가[Ajax]
API는 은행 창구와 비슷
GET - 데이터 조회(Read)를 요청할 때
POST - 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때
[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.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Nanum Pen Script', cursive;
}
.card-title {
font-size: 40px;
}
.card {
margin: 30px auto 0px;
}
#order {
margin: 0 auto 20px;
}
#dropdownMenuButton {
width: 313px;
background: white;
color: gray;
border: 2px solid lightgray;
}
</style>
<script>
$(document).ready(function () {
moneyRate();
});
function moneyRate() {
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let rate = response[1]['rate'];
$('#rate').text(rate);
}
})
}
</script>
</head>
<body>
<div class="card" style="width: 25rem;">
<img class="card-img-top"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVOq901hNzzeMGdqF0dvLx698vZvBo-_gpaFMLmO12RGah4Bdqr-QKwF-Sog&usqp=CAc"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">화분을 팝니다<span style="font-size: 20px">가격: 30000원</span></h5>
<p class="card-text">깔끔한 화분입니다.</p>
<div id="rate"></div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">주문자 이름</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">수량</span>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
수량을 선택하세요.
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">주소</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">전화번호</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
</div>
<div id="order"><a onclick="alert('주문이 완료되었습니다.')" href="#" class="btn btn-primary">주문하기</a></div>
</div>
</body>
</html>
프론트엔드 개발자를 꿈꾸는