const searchList = document.querySelector(".search__list ul");
const searchClick = document.querySelectorAll(".search_click ul li");
const star = document.querySelectorAll(".search_click ul li a");
const searchInfo = document.querySelector(".search__info .num");
//출력하기
function updateList(list){
listCSS = "";
for(const data of list){
starTxt = star[data.star].innerText;
listCSS += `${data.name} : ${data.desc} ${starTxt} `;
}
searchList.innerHTML = listCSS;
}
updateList(cssProperty);
//클릭하기
searchClick.forEach(star => {
star.addEventListener("click", () => {
//star2 = star.innerText.search("☆");
//console.log(star2);
let target = 0;
let filterList = '';
target = star.dataset.star;
filterList = cssProperty.filter(data => data.star == target || data.star >= star.innerText.charAt());
updateList(filterList);
const searchListNum = document.querySelectorAll(".search__list ul li").length;
searchInfo.textContent = searchListNum;
});
//dataset 안쓰고 가져오는 방법
})
<main id="main">
<div class="search__wrap">
<span>filter()를 이용하여 CSS 속성의 중요도 보여주기</span>
<h1>CSS 속성 검색하기</h1>
<div class="search_click">
<ul>
<li data-star="0"><a href="#">☆☆☆☆☆</a></li>
<li data-star="1"><a href="#">★☆☆☆☆</a></li>
<li data-star="2"><a href="#">★★☆☆☆</a></li>
<li data-star="3"><a href="#">★★★☆☆</a></li>
<li data-star="4"><a href="#">★★★★☆</a></li>
<li data-star="5"><a href="#">★★★★★</a></li>
</ul>
<ul>
<li><a href="#">1개 이상</a></li>
<li><a href="#">2개 이상</a></li>
<li><a href="#">3개 이상</a></li>
<li><a href="#">4개 이상</a></li>
</ul>
</div>
<div class="search__info">
<div>전체 속성 갯수 : <span class="num">382</span></div>
</div>
<div class="search__list">
<ul class="line"></ul>
</div>
</div>
</main>