쇼핑몰에서 상품을 해당 조건으로 필터링 해서 상품 정렬하는 코드입니다.
<HTML>
<!DOCTYPE html>
<html>
<head>
<title>상품 목록</title>
</head>
<body>
<div id="product-list">
<!-- 상품 목록이 여기에 동적으로 추가될 것입니다 -->
</div>
<div>
<label for="filter">상품 필터:</label>
<select id="filter">
<option value="all">전체</option>
<option value="price">가격순</option>
<option value="name">이름순</option>
</select>
</div>
<script src="script.js"></script>
</body>
</html>
<JavaScript>
const products = [
{ id: 1, name: '상품 1', price: 10000 },
{ id: 2, name: '상품 2', price: 20000 },
{ id: 3, name: '상품 3', price: 30000 }
];
// 상품 목록을 표시하는 함수
function displayProductList() {
const productListDiv = document.getElementById('product-list');
productListDiv.innerHTML = ''; // 상품 목록을 초기화합니다.
products.forEach(product => {
const productDiv = document.createElement('div');
productDiv.innerHTML = `
<h3>${product.name}</h3>
<p>가격: ${product.price}원</p>
`;
productListDiv.appendChild(productDiv);
});
}
// 필터링된 상품 목록을 표시하는 함수
function displayFilteredProducts(filter) {
let filteredProducts = products;
if (filter === 'price') {
filteredProducts = filteredProducts.sort((a, b) => a.price - b.price);
} else if (filter === 'name') {
filteredProducts = filteredProducts.sort((a, b) => a.name.localeCompare(b.name));
}
displayProductList(filteredProducts);
}
// 필터링 변경 시 상품 목록을 다시 표시합니다.
document.getElementById('filter').addEventListener('change', function() {
const selectedFilter = this.value;
displayFilteredProducts(selectedFilter);
});
// 페이지 로드 시 초기 상품 목록을 표시합니다.
displayProductList();'🎒내가방 > 📒JavaScript' 카테고리의 다른 글
| [모던 자바스크립트] 배열 고차 함수 (sort, forEach, map, filter) (0) | 2024.10.21 |
|---|---|
| [자바스크립트] 고차함수를 활용한 실무 알고리즘 테스트 (1) | 2024.10.03 |
| [자바스크립트] 상품 목록 가져오기 (0) | 2023.07.01 |
| [자바스크립트] 회원가입 할 때 패스워드 체크 기능 구현하기 (0) | 2023.06.29 |
| [모던 자바스크립트 Deep Dive] 18장 함수와 일급객체 (0) | 2023.06.29 |
