티스토리 뷰
1) 명세서 작성
<장바구니 프로그램>
기능 :
- 왼쪽 상품 리스트에서 특정 상품을 클릭하면 오른쪽 리스트에 보이게 한다.
- 같은 상품을 클릭하면 alert 메세지로 중복 상품을 클릭할 수 없다는 메세지가 나오게 한다
- 오른쪽 리스트의 상품의 수량을 버튼을 통해 증가시키고 감소시킬 수 있게 한다 (1~100)
- 해당 상품의 수량의 증가,감소에 따라 상품의 가격도 같이 변동시키도록 한다.
- 오른쪽 리스트의 상품의 삭제 버튼을 누르면 리스트에서 완전 삭제 시킨다
- 오른쪽 리스트에 담긴 상품들의 총 가격은 왼쪽 아래에 표시가 되도록 하며,
- 오른쪽 리스트의 상품들의 수량의 증가,감소에 따라 총 가격도 변동되도록 한다.
순서 :
1. 왼쪽에 상품의 리스트를 작성한다.(상품명, 가격)
2. 특정 상품을 클릭하면 오른쪽 리스트에 보이게 한다. (상품명, 가격, 수량 : 1)
<디자인) 상품명 아래 수량이 있고 1부터 시작해서 △ 버튼을 누르면
상품이 수량이 증가하고
▽ 버튼을 누르면
상품 수량이 감소하도록 만든다.
단, 상품은 1이하로 내려가지 않게 하며, 100이하로 수량을 제한해둔다.>
3. 같은 상품을 클릭하면 alert 메세지로 "같은 상품이 장바구니에 존재합니다." 메세지가 뜨도록 한다.
4. 오른쪽 리스트에 상품의 수량 증가,감소에 따라 해당 상품의 가격도 변동하도록 한다.
(예를 들어 빵이 1개에 1000원이면 2개면 2000원 3개면 3000원 동적으로 변화하도록 한다.)
-> 해당 상품의 수량 증가 버튼을 누르면 상품의 가격만큼 더하여 나타내게 하고,
상품의 수량 감소 버튼을 누르면 상품의 가격만큼 빼서 나타내게 한다.
5. 왼쪽 아래에 총 가격 text를 표시한다.
6. 총 가격에는 오른쪽 상품 리스트의 상품들의 가격의 합계를 나타낸다.
7. 오른쪽 상품 리스트의 수량을 증가시키면, 해당 상품의 가격도 증가하고, 전체 가격도 상품 가격만큼 증가한다.
8. 오른쪽 상품 리스트의 수량을 감소시키면, 해당 상품의 가격도 감소하고, 전체 가격도 상품 가격만큼 감소한다.
2) 코드 리뷰
CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Products</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
<style>
.item_list {
width: 300px; /*가로 : 300px*/
border: 1px solid black;
}
.item_list li {
padding: 10px; /* li 요소의 안쪽 여백 10px */
cursor: pointer; /* 마우스 커서를 포인터로 변경하여 클릭 가능한 상태로 설정 */
}
.info {
border-bottom: 1px solid black; /* 아래쪽 선 설정 */
padding-bottom: 5px; /* 요소 내부 아래 여백 설정 */
}
.info strong {
display: block; /* 각 아이템 이름을 새 줄에 표시 */
}
.price {
border-top: 1px solid black; /* 가격 위쪽에 선 설정 */
padding-top: 5px; /* 가격 위 여백 설정 */
margin-top: 5px; /* 가격 위쪽에 여백 추가 */
}
.price .val {
display: block; /* 가격을 새 줄에 표시 */
}
.selected_list {
list-style: none;
padding: 0;
border: 1px solid black;
margin-top: 10px;
}
.selected_list li {
padding: 10px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
}
.quantity {
margin-right: 10px;
}
.quantity button {
margin-left: 5px;
cursor: pointer;
}
.total-price {
margin-top: 10px;
}
</style>
</head>
HTML
<body>
<div>
<ul class="item_list">
<li>
<div class="info">
<strong>과자</strong>
<div class="price">
<span class="val">상품 가격 : 1000</span>
</div>
</div>
</li>
<li>
<div class="info">
<strong>음료수</strong>
<div class="price">
<span class="val">상품 가격 : 1200</span>
</div>
</div>
</li>
<li>
<div class="info">
<strong>빵</strong>
<div class="price">
<span class="val">상품 가격 : 1500</span>
</div>
</div>
</li>
</ul>
</div>
JQuery
<ul class="selected_list">
</ul>
<p class="total-price">총 가격: 0원</p>
<script type="text/javascript">
$(document).ready(function(){
var totalPrice = 0;
$('.item_list li').click(function(){
var itemName = $(this).find('strong').text();
var itemPrice = parseInt($(this).find('.price .val').text().split(' : ')[1]);
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>');
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 + '원');
}
});
$('.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 totalPriceSpan = listItem.find('.price');
var totalPrice = itemPrice * quantity; // 상품 가격 * 수량*!!! 으로 계산
totalPriceSpan.text('가격: ' + totalPrice + '원'); // 총 가격 표시 업데이트
totalPrice += itemPrice; // 전체 가격 업데이트
$('.total-price').text('총 가격: ' + totalPrice + '원');
listItem.find('.decrease').prop('disabled', false);
});
$('.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 totalPriceSpan = listItem.find('.price');
var totalPrice = itemPrice * quantity; // 상품 가격 * 수량 계산
totalPriceSpan.text('가격: ' + totalPrice + '원'); // 총 가격 표시 업데이트
totalPrice -= itemPrice; // 전체 가격 업데이트
$('.total-price').text('총 가격: ' + totalPrice + '원');
});
});
</script>
</body>
</html>
-
과자상품 가격 : 1000
-
음료수상품 가격 : 1200
-
빵상품 가격 : 1500
총 가격: 0원
'백엔드 교육과정 > 3월' 카테고리의 다른 글
| 2024.03.27_ 프론트엔드 프로젝트 마무리 + 코드 주석 (1) | 2024.03.27 |
|---|---|
| 2024.03.26 _ 미니 프론트엔드 코드 리뷰 + 수정 (0) | 2024.03.26 |
| 2024.03.25_ Bootstrap , JQuery (0) | 2024.03.25 |
| 2024.03.21_ JavaScript_function ~ object, HW3_회원가입 페이지,HW2_연락처 프로그램 (0) | 2024.03.22 |
| 2024.03.20_ Web02 CSS / 이클립스 자바스크립트 설치 / Web03 javaScript (0) | 2024.03.21 |