-
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title>product</title>
<style>
.wrap {
max-width: 800px;
margin: 0 auto;
}.container {
width: 800px;
margin: 30px auto 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}.product {
border: 1px solid #ddd;
}.text {
padding: 10px;
}.text h3 {
font-size: 20px;
margin-bottom: 15px;
}.btn {
margin-top: 20px;
padding: 10px 20px;
color: #fff;
border: none;
border-radius: 5px;
background-color: rgb(230, 49, 49);
cursor: pointer;
}
</style>
</head><body>
<div class="wrap">
<div class="container">
<div class="product">
<div class="text">
<h3 class="title">Card title</h3>
<p class="price">price</p>
<button class="btn">주문하기</button>
</div>
</div>
<div class="product">
<div class="text">
<h3 class="title">Card title</h3>
<p class="price">price</p>
<button class="btn">주문하기</button>
</div>
</div>
<div class="product">
<div class="text">
<h3 class="title">Card title</h3>
<p class="price">price</p>
<button class="btn">주문하기</button>
</div>
</div>
</div><button class="btn price">가격 순 정렬</button>
<button class="btn priceR">가격 역순 정렬</button>
<button class="btn name">이름 순 정렬</button>
<button class="btn nameR">이름 역순 정렬</button>
<button class="btn down6">6만원 이하</button>
<button class="btn filter">초기화</button>
</div><script>
let container = document.querySelector(".container")
let item = document.querySelector(".product");
// 템플릿
function template(el = "products") {let product = document.createElement("div");
let img = document.createElement("img");
let text = document.createElement("div");
let h3 = document.createElement("h3");
let p = document.createElement("p");
let btn = document.createElement("button");product.className = "product";
img.src = "https://via.placeholder.com/250";
text.className = "text";
h3.className = "title";
h3.textContent =${el.title};
p.className = "price";
p.textContent =가격 : ${el.price};
btn.className = "btn";
btn.textContent = "주문하기"
product.appendChild(img);
product.appendChild(text);
text.appendChild(h3);
text.appendChild(p);
text.appendChild(btn);
container.appendChild(product)
}let products = [{
title: 'Black Monastery',
price: 60000
},
{
title: 'Spingfield Shirt',
price: 50000
},
{
title: 'Blossom Dress',
price: 70000
}
]const sortPrice = document.querySelector("button.price");
const sortPriceR = document.querySelector("button.priceR");
const sortName = document.querySelector("button.name");
const sortNameR = document.querySelector("button.nameR");
const filter6 = document.querySelector("button.down6");
const filter = document.querySelector("button.filter");//데이터 바인딩
function data() {
for (let i = 0; i < products.length; i++) {
document.querySelectorAll(".title")[i].textContent = products[i].title;
document.querySelectorAll(".price")[i].textContent = '가격 : ' + products[i].price;
}
}// 원래대로 돌리기
filter.addEventListener("click", function() {
reset();products.forEach(el => {
template(el);
})
})// 6만원 이하 상품 정렬
filter6.addEventListener("click", function () {
reset();
let newProduct = products.filter(function (a) {
return a.price <= 60000
});
newProduct.forEach(el => {
template(el);
});
});// 이름 역순 정렬
sortNameR.addEventListener("click", function () {
products.sort(function (a, b) {
if (a.title < b.title == true) {
return 1
} else {
return -1
}
});
data();
});// 이름 순 정렬
sortName.addEventListener("click", function () {
products.sort(function (a, b) {
if (a.title < b.title == true) {
return -1
} else {
return 1
}
});data();
});// 가격 높은순 정렬
sortPriceR.addEventListener("click", function () {
products.sort(function (a, b) {
return b.price - a.price
});
data();
});// 가격순 정렬
sortPrice.addEventListener("click", function () {
products.sort(function (a, b) {
return a.price - b.price
});
data();
});data();
// reset
function reset() {
while (container.hasChildNodes()){
container.removeChild(container.firstChild);
}
}
</script>
</body></html>
<hr />
최대한 자바스크립트로만 구현을 하고싶어서 이렇게 숙제를 했는데요.
다른건 어느정도 다 원하는데로 구현이 되었는데,
6만원 이하를 누르고 가격 내림차순이나 이름 순 정렬를 누르면, 6만원 이하로 정렬된 상품들 사이에서 또 정렬이 이뤄지는게 아니라
원래 product 에 들어있던 3개의 상품들로 정렬이 됩니다ㅠㅠ..
아마 product.sort 로 해서 그런거같은데요. product가 아니라 뭘 넣어야 할지 잘 모르겠습니다...
- 답변은 로그인 후 가능합니다.