SearchEffect05

searchEffect05

filter() 메서드를 사용하여 CSS 속성의 중요도가 별점으로 표시 / 분류되도록 만들어봤습니다..

---

원본 소스 보기 원본 사이트 보기

HTML

별점으로 속성을 분류할 버튼 영역(click)과 속성 갯수를 표시할(info)영역, 속성 내용이 들어갈(list)영역으로 나누어줍니다.

<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 -->

JAVASCRIPT

HTML -> search__list에 출력해줄 css 속성을 변수 cssProperty에 저장합니다.
간단하게 전체 속성 갯수를 표시할 script를 작성하고, updateList 함수를 통해 search__list에 css 속성을 출력시킵니다.
별점 버튼에 click 이벤트를 부여하여 별 수에 따라 css 속성이 출력되도록 실행해주면 끝입니다.
(dataset을 사용하여 HTML의 data-star, num 속성값을 가져와 target, target2에 저장)
(cssProperty의 data중에 star 속성값을 target, target2와 비교하여 filterList 변수에 저장)

const cssProperty = [
    { star: 5, name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
    { star: 5, name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." },
    { star: 5, name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." },
    { star: 5, name: "align-self", desc: "개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다." },
    { star: 5, name: "all", desc: "요소의 속성을 초기화 또는 상속을 설정합니다." },
    ...
];

const searchList = document.querySelector(".search__list ul");
const searchClick = document.querySelectorAll(".search__click ul li");
const starA = document.querySelectorAll(".search__click ul li a");
const searchInfo = document.querySelector(".search__info .num");

searchInfo.textContent = cssProperty.length;

let count = 0;

// 출력하기
function updateList(list) {
    listCSS = "";
    for (const data of list) {
        listCSS += `<li>${data.name} : ${data.desc}<em>${starA[data.star].innerText}</em></li>`;
        count++;
    }
    searchInfo.textContent = count;
    count = 0;

    searchList.innerHTML = listCSS;
}
updateList(cssProperty);

// 클릭하기
searchClick.forEach((star) => {
    star.addEventListener("click", (el) => {
        const target = star.dataset.star;
        const target2 = star.dataset.num;
        // console.log(target2)
        const filterList = cssProperty.filter((data) => data.star == target || data.star >= target2);
        // console.log(filterList2);

        updateList(filterList);
    });
});