-
21.09.14. 스파르타 내배단 2주차 개발일지개발일지 2021. 9. 14. 12:55
[Week I Learned]
*Notion
https://www.notion.so/2-f9706fef663a4b5ca7c7013a57c1785d
[스파르타코딩클럽] 웹개발 종합반 - 2주차
매 주차 강의노트 시작에 PDF파일을 올려두었어요!
www.notion.so
*Diary
https://heily-coding.tistory.com/8
21.09.09. 2-1강 (Javascript 복습, count)
heily-coding.tistory.com
https://heily-coding.tistory.com/9
21.09.09. 2-2~6강 (jQuery)
[jQuery] Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었다. jQuery
heily-coding.tistory.com
https://heily-coding.tistory.com/10
21.09.11~14. 2-7~12강 (JSON, Ajax)
[JSON] 클라이언트: 나한테 줄 데이터 없니? 서버: 여기 있어! 가져가! 그리고 클라이언트 손에 쥐어지는 JSON 포맷 위의 데이터 JSON: 서버가 클라이언트에게 데이터를 줄 때 내려주는 포맷 [API 중 GET
heily-coding.tistory.com
[숙제]
<!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>
<meta charset="UTF-8">
<title>캔들하우스 | 양초를 팝니다</title>
<link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Stylish', sans-serif;
}
.candle-image {
width: 500px;
height: 300px;
background-image: url("https://m.decembersoy.com/web/product/big/decembersoy_2.jpg");
background-size: cover;
background-position: center;
margin: 0px auto 10px auto;
}
.candle-sale {
width: 500px;
display: block;
margin: auto;
}
.item-order {
width: 500px;
margin: 20px auto 10px auto;
}
.btn-order {
width: 100px;
display: block;
margin: auto;
}
.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>
<p></p>
<div class="candle-image">
</div>
<div class="candle-sale">
<h1>양초를 팝니다 <span style="font-size:20px">가격: 3,000원/개</span></h1>
<p>이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요! 대나무 향이 아주 좋아요.</p>
<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
</div>
<div class="item-order">
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected> -- 수량을 선택하세요 --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주소</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
</div>
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
</div>
<div>
</div>
</body>
</html>[평가]
*Keep
1. 포기하지 않는 불굴의 의지😂😂
*Problem:
1. 버튼을 눌렀을 때 반응이 나오지 않았다.
2. 시안을 보고 입력할 것들을 다 입력한 뒤 확인하니 console창에 오류가 떴다.
3. 같은 <p> 태그 내에서 일부만 변경하는 법을 기억하지 못했다.
4. 태그 내 텍스트 입력하는 법을 기억하지 못했다.
*Try:
1. onclick="...()" 를 기입하고 script 태그 안에 function을 써줘야 한다.
2. 하나하나 만들어갈 때마다 console.log로 확인하는 버릇을 들이자.
3. span 태그 사용, id 달아주고 script에서 기능 먹이기
4. $('#원하는 위치').text(입력할 텍스트); jQuery사용
'개발일지' 카테고리의 다른 글
스파르타 힙한 취미 코딩 - 파이썬 혼자놀기 패키지 1일차 개발일지 (0) 2021.09.22 21.09.19. 스파르타 내배단 5주차 개발일지 (0) 2021.09.19 21.09.18. 스파르타 내배단 4주차 개발일지 (0) 2021.09.18 21.09.15. 스파르타 내배단 3주차 개발일지 (0) 2021.09.16 21.09.09. 스파르타 내배단 1주차 개발일지 (0) 2021.09.09
