티스토리 뷰
명세서
2024.03.25 - [3월] - 2024.03.25_ 프론트엔드 미니 프로젝트
수정한 부분 :
코드 주석을 실행되는 함수(?) 위에 써놨음
거의 새로운 명세서랑 같은 부분
<!-- jQuery -->
<script>
$(document).ready(function(){ // DOM 페이지가 자바스크립트 코드를 실행할때 준비되고 $(document).ready() 안에 코드는 한 번만 실행된다.
var totalPrice = 0; // 전역변수로 초기화
/*
상품을 클릭하고 일어나는 과정
- 상품의 이름과 가격을 저장한다
- 동일 상품을 장바구니에 추가 할 수 없도록 한다
- 동일 상품이 장바구니에 있지 않으면 list에 이름, 가격을 저장한다.
- 증가, 감소 버튼을 추가한다
- list에 장바구니에 들어갈 상품의 요소들을 추가한다
- 전체 가격을 업데이트 한다
*/
$('.item_list li').click(function(){
var itemName = $(this).find('strong').text();
var itemPrice = parseInt($(this).find('.price').text().split(':')[1]);
// [data-name= ]데이터 속성 이름이 'name'이고, 그 값이 변수 itemName의 값과 일치하는 요소를 선택
if($('.selected_list li[data-name="' + itemName + '"]').length > 0) {
alert('같은 상품이 장바구니에 존재합니다.');
} else { //동일 상품이 존재하지 않는다면
var listItem = $('<li data-name="' + itemName + '" data-price="' + itemPrice + '"></li>');
var itemNameDiv = $('<div class="item-name">' + itemName + '</div>');
var quantitySpan = $('<span class="quantity">수량: 1</span>');
var increaseButton = $('<button class="increase">▲</button>');
var decreaseButton = $('<button class="decrease" disabled>▼</button>');
var priceSpan = $('<span class="price">가격: ' + itemPrice + '원</span>');
// 장바구니(list)에 상품의 요소(?)들을 추가한다.
listItem.append(itemNameDiv);
listItem.append(quantitySpan);
listItem.append(increaseButton);
listItem.append(decreaseButton);
listItem.append(priceSpan);
$('.selected_list').append(listItem);
// 상품의 가격을 더해서 전체 가격을 업데이트한다.
totalPrice += itemPrice;
$('.total-price').text('총 가격: ' + totalPrice + '원');
}
});
/*
장바구니 상품에서 증가버튼을 클릭할 때 일어나는 과정
- 선택된 상품의 이름, 가격, 수량을 list에서 찾아서 변수에 저장한다.
- 수량을 증가시키고 증가된 수량을 text로 보이게 한다.
- 상품의 가격과 수정된 수량을 곱해서 상품의 변경된 가격(totalPrice)에 저장한다.
- 상품의 변경된 가격(totalPrice)을 보이게 한다.
- 전체 가격을 업데이트 해준다
- 처음 상품을 등록했을 때(수량: 1) 비활성화 했던 감소버튼을 활성화 상태로 바꿔준다.
*/
$('.selected_list').on('click', '.increase', function(){
var listItem = $(this).closest('li');
var itemName = listItem.data('name');
var itemPrice = parseInt(listItem.data('price'));
var quantitySpan = listItem.find('.quantity');
var quantity = parseInt(quantitySpan.text().split(': ')[1]);
quantity++;
quantitySpan.text('수량: ' + quantity);
var totalPrice = itemPrice * quantity;
listItem.find('.price').text('가격: ' + totalPrice + '원');
// 전체 가격 업데이트
var total = 0;
$('.selected_list li').each(function() {
total += parseInt($(this).find('.price').text().split(': ')[1]);
});
$('.total-price').text('총 가격: ' + total + '원');
listItem.find('.decrease').prop('disabled', false);
});
/*
장바구니 상품에서 감소버튼을 클릭할 때 일어나는 과정
- 선택된 상품의 이름, 가격, 수량을 list에서 찾아서 변수에 저장한다.
- 수량을 감소시킨다.
- 수량이 1보다 작으면 1로 고정시키고, 감소 버튼을 비활성화 시킨다.
- 감소된 수량을 text로 보이게 한다.
- 상품의 가격과 수정된 수량을 곱해서 상품의 변경된 가격(totalPrice)에 저장한다.
- 상품의 변경된 가격(totalPrice)을 보이게 한다.
- 전체 가격을 업데이트 해준다
*/
$('.selected_list').on('click', '.decrease', function(){
var listItem = $(this).closest('li');
var itemName = listItem.data('name');
var itemPrice = parseInt(listItem.data('price'));
var quantitySpan = listItem.find('.quantity');
var quantity = parseInt(quantitySpan.text().split(': ')[1]);
quantity--;
if (quantity < 1) {
quantity = 1;
$(this).prop('disabled', true);
}
quantitySpan.text('수량: ' + quantity);
// 상품 가격과 수량을 곱하여 총 가격을 다시 계산하고 업데이트
var totalPrice = itemPrice * quantity;
listItem.find('.price').text('가격: ' + totalPrice + '원');
// 전체 가격 업데이트
var total = 0;
$('.selected_list li').each(function() {
total += parseInt($(this).find('.price').text().split(': ')[1]);
});
$('.total-price').text('총 가격: ' + total + '원');
});
});
</script>
</body>
</html>
-
과자상품 가격: 1000원
-
음료수상품 가격: 1200원
-
빵상품 가격: 1500원
총 가격: 0원
'백엔드 교육과정 > 3월' 카테고리의 다른 글
2024.03.29_ 웹 서비스 개념 및 구조 , 실습 (0) | 2024.03.29 |
---|---|
2024.03.28_ 웹 서비스 구조와 JSP/Servlet (0) | 2024.03.28 |
2024.03.26 _ 미니 프론트엔드 코드 리뷰 + 수정 (0) | 2024.03.26 |
2024.03.25_ 프론트엔드 미니 프로젝트 (0) | 2024.03.25 |
2024.03.25_ Bootstrap , JQuery (0) | 2024.03.25 |