티스토리 뷰

 

명세서 

 

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>

 

 


 

 

Products
  • 과자
    상품 가격: 1000원
  • 음료수
    상품 가격: 1200원
  • 상품 가격: 1500원

총 가격: 0원

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함