"서치 이펙트" Search 05. filter() 메서드를 활용하여 검색 화면 만들기

🗒 서치이펙트 05

📌 filter()을 이용하여 검색 화면을 만들어 봅시다.
📌 속성 중요도에 따라 속성을 볼 수 있는 이펙트입니다.

---

CSS 속성 검색창 만들기!

실제 사이트보기 원본 소스보기 CSS 소스보기

HTML

∙ search__click은 중요도에 따른 분류를 볼 수 있도록 구분한 버튼이라고 생각하시면 됩니다.
∙ data-star=""은 나중에 자바스크립트로 데이터값을 인덱스를 통해 불러오기 위함입니다.

<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-star="0"><a href="#">1개 이상</a></li>
                <li data-star="1"><a href="#">2개 이상</a></li>
                <li data-star="2"><a href="#">3개 이상</a></li>
                <li data-star="3"><a href="#">4개 이상</a></li>
            </ul>
        </div>
        <div class="search__info">
            <div>전체 속성 갯수 : <span class="num">0</span></div>
            <div>찾은 속성 갯수 : <span class="num2">0</span></div>
        </div>
        <div class="search__list">
            <ul class="line">
            </ul>
        </div>
    </div>
</main>

CSS

새로 추가된 CSS 부분입니다.

.search__click {
    margin-top: 10px;
    margin-bottom: 30px;
}
.search__click li {
    display: inline;
}
.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;
}

---

▶ 자바스크립트 활용 (공통)

주석을 참고해주세요!

//배열, 객체
const cssProperty = [
{ star: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " },
{ star: 5, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." },
{ star: 5, name: "align-items", desc: " 교차축에서 아이템 정렬 하는 속성입니다. 주로 flex에서 item들을 정렬할 때 사용됩니다." },
{ star: 5, name: "align-self", desc: " 특정 item의 정렬을 따로 하고 싶을 때 사용합니다." },
{ star: 5, name: "all", desc: " CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값로 설정할 수 있습니다." },
{ star: 5, name: "animation", desc: " 애니메이션과 관련된 속성을 일괄적로 처리합니다." },
{ star: 0, name: "animation-delay", desc: " 애니메이션 지연 시간을 설정합니다." },
{ star: 5, name: "animation-direction", desc: " 애니메이션 움직임 방향을 설정합니다." },
 이하 생략
];
const searchList = document.querySelector(".search__list ul")
const searchClick = document.querySelectorAll(".search__click ul:nth-child(1) li")
const searchClick2 = document.querySelectorAll(".search__click ul:nth-child(2) li")
let count = 0;
// 실행순서 : 
//  출력하기 //4번이랑 다르게 뿌려주기를 함수화
// 매개변수list
function updateList(list){
    listCSS = "";
    //for of 문 사용
    for(const data of list){
        //위에 ul까지 있으니깐 li로 뿌려주기
        // listCSS += `<li>${data.name} : ${data.desc} <em>${data.star}</em></li>`;
        if (data.star == 0) {
            listCSS += `<li>${data.name} : ${data.desc} <em>☆☆☆☆☆</em></li>`;
        }
        if (data.star == 1) {
            listCSS += `<li>${data.name} : ${data.desc} <em>★☆☆☆☆</em></li>`;
        }
        if (data.star == 2) {
            listCSS += `<li>${data.name} : ${data.desc} <em>★★☆☆☆</em></li>`;
        }
        if (data.star == 3) {
            listCSS += `<li>${data.name} : ${data.desc} <em>★★★☆☆</em></li>`;
        }
        if (data.star == 4) {
            listCSS += `<li>${data.name} : ${data.desc} <em>★★★★☆</em></li>`;
        }
        if (data.star == 5) {
            listCSS += `<li>${data.name} : ${data.desc} <em>★★★★★</em></li>`;
        }
    }
    searchList.innerHTML = listCSS;
}
updateList(cssProperty); //재활용 가능

//클릭하기(별점에 해당하는 결과 나오게 하기)
//별점 클릭시
searchClick.forEach((star) => {
    //스타 클릭했을 때
    star.addEventListener("click", () => {
        //콜백함수 쓰기 //데이터에서 스타찾기 //여기서는 filter=find
        //dataset은 위의 data-star="i"값을 가져오는 것
        const target = star.dataset.star;
        const filterList = cssProperty.filter(data => data.star == target);

        //찾은 속성 값
        count = filterList.length;
        document.querySelector(".num2").innerHTML = count;
        //찾은 값filterList 를 함수에 보내주기
        updateList(filterList);
    });
})
//1개이상 2개이상...클릭시
searchClick2.forEach((star) => {
    star.addEventListener("click", () => {
        const target = star.dataset.star;
        // >= ~이상이 되므로 searchClick과의 차이
        const filterList = cssProperty.filter(data => data.star >= target);
        count = filterList.length;
        document.querySelector(".num2").innerHTML = count;
        updateList(filterList);
    });
});

//전체속성 구해주기
const count2 = cssProperty.length;
document.querySelector(".num").innerHTML = count2;

끝-!

하하하하하ㅏㅏㅏㅏ....