{
const cssProperty = [너무많아요 생략...];
//선택자
const searchList = document.querySelector(".search__list ul");
const searchClick = document.querySelectorAll(".search__click ul li");
//출력하기 (매개변수 사용)
function updateList(list){
listCSS = "";
for(const data of list){
switch(data.star){
case 0:
listCSS += `<li>${data.name} : ${data.desc}<em>☆☆☆☆☆</em></li>`;
break;
case 1:
listCSS += `<li>${data.name} : ${data.desc}<em>★☆☆☆☆</em></li>`;
break;
case 2:
listCSS += `<li>${data.name} : ${data.desc}<em>★★☆☆☆</em></li>`;
break;
case 3:
listCSS += `<li>${data.name} : ${data.desc}<em>★★★☆☆</em></li>`;
break;
case 4:
listCSS += `<li>${data.name} : ${data.desc}<em>★★★★☆</em></li>`;
break;
case 5:
listCSS += `<li>${data.name} : ${data.desc}<em>★★★★★</em></li>`;
break;
default:
listCSS += `<li>${data.name} : ${data.desc}<em>값이 없음</em></li>`;
break;
}
}
searchList.innerHTML = listCSS;
const searchList2 = document.querySelectorAll(".search__list ul li");
document.querySelector(".num").textContent=searchList2.length;
}
updateList(cssProperty);
//클릭하기
searchClick.forEach((star) => {
star.addEventListener("click",()=>{
const target = star.dataset.star;
const target2 = star.dataset.num;
const filterList = cssProperty.filter(data => data.star == target || data.star >= target2 );
updateList(filterList);
});
})
}
{
<main id="main">
<div class="search__wrap">
<span>filter()를 이용하여 속성의 중요도 보여주기</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 data-num="1"><a href="#">1개 이상</a></li>
<li data-num="2"><a href="#">2개 이상</a></li>
<li data-num="3"><a href="#">3개 이상</a></li>
<li data-num="4"><a href="#">4개 이상</a></li>
</ul>
</div>
<div class="search__info">
<div>찾은 속성 갯수 : <span class="num">0</span></div>
</div>
<div class="search__list">
<ul class="line">
</ul>
</div>
</div>
</main>
}
{
/* main */
#main {
margin: 50px 10px;
}
.search__wrap {
max-width: 1400px;
margin: 0 auto;
border: 3px solid #223547;
border-radius: 20px;
background-color: #F1F3F6;
padding: 30px;
text-align: center;
}
.search__wrap > span {
font-size: 20px;
margin-bottom: 20px;
display: inline-block;
}
.search__wrap > h1 {
font-family: 'Tmon';
color: #223547;
font-size: 6vw;
margin-bottom: 10px;
}
.search__box {
margin-bottom: 40px;
}
.search__box label {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.search__box input {
border: 2px solid #223547;
padding: 15px 40px;
width: 70%;
border-radius: 50px;
font-size: 20px;
}
.search__list li {
text-align: left;
line-height: 1.7;
}
.search__list li.hide {
display: none;
}
.search__list li.show {
display: block;
}
.search__list span {
display: inline-block;
padding: 10px 20px;
border: 1px solid var(--htmlColor);
border-radius: 50px;
margin-bottom: 5px;
text-align: left;
transition: all 0.3s;
cursor: pointer;
}
.search__list span:hover {
background-color: var(--htmlColor);
color: #fff;
}
.search__list em {
float: right;
font-style: normal;
}
.search__list .line {
margin-top: 50px 0;
}
.search__list .line li {
background: #e3eaf5;
padding: 10px 30px;
margin-bottom: 5px;
border-radius: 50px;
}
.search__list .line li:hover {
background: #d3e2fa;
cursor: pointer;
}
.search__info {
text-align: right;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--htmlColor);
}
.search__info .type {
text-align: center;
margin-bottom: 10px;
}
.search__info .keyword {
text-align: center;
margin-bottom: 10px;
}
.search__info .keyword span {
border: 2px solid var(--htmlColor);
border-radius: 50px;
padding: 10px;
display: inline-block;
margin-bottom: 4px;
}
.search__info .keyword span:hover {
background-color: var(--htmlColor);
color: #fff;
cursor:pointer;
}
.search__desc {
padding: 20px 40px 20px 60px;
margin-bottom: 50px;
border-radius: 50px;
display: inline-block;
background: var(--htmlColor);
color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 16.958L21.5 21.958' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 22px 17px;
}
.search__click {
margin-top: 10px;
margin-bottom: 30px;
}
.search__click li {
display: inline;
margin: 5px;
}
.search__click li a {
display: inline-block;
border: 1px solid var(--htmlColor);
border-radius: 50px;
padding: 10px 20px;
margin: 5px 0;
}
.search__click li a:hover {
background-color: var(--htmlColor);
color: #fff;
}
}