EFFECT | SEARCH | filter()를 이용하여 속성의 중요도 보여주기

searchEffect | filter()를 이용하여 속성의 중요도 보여주기

오늘의 목표
💡 스크립트를 통해 속성 리스트를 나타내기
💡 중요도에 따라 리스트 나타내기

오늘의 미션
👉🏻 난이도 1개 이상, 2개 이상,... 버튼 구현하기

---

1. 사이트 구조 살펴보기

HTML 살펴보기

속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다.

<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>
                CSS 속성 갯수 : <span class="num"></span>
            </div>
        </div>

        <div class="search__list">
            <ul class="line">

            </ul>
        </div>
    </div>
</main>

2. script 살펴보기

📌 속성 리스트 만들고 출력하기

속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다.

📌 난이도 버튼에 따라 리스트 나타내기

아래 코드를 참고해주세요 !

<script>
    const cssProperty = [...]
    const searchList = document.querySelector(".search__list ul");
    const searchClick = document.querySelectorAll(".search__click ul li");

    // 출력하기 (재활용이 가능한 함수)
    function updateList(list){
        listCSS = '';

        // list 에서 받아온걸 data라고 칭할거다~
        for(const data of list){
            // listCSS += `<li>${data.name} : ${data.desc} <em>${data.star}</em></li>`;

            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 searchLine = document.querySelectorAll(".search__list ul li");
        document.querySelector(".num").textContent=searchLine.length;
    }
    updateList(cssProperty);

    // 클릭하기
    searchClick.forEach(star => {
        star.addEventListener("click", () => {
            const targetStar = star.dataset.star;
            const targetNum = star.dataset.num;
            // find도 가능
            // filter callback 함수 사용
            const filterList = cssProperty.filter(data => data.star == targetStar || data.star >= targetNum);

            updateList(filterList);
        });
    });
</script>

원본 소스 보기

실제 사이트 보기