searchEffect05 - filter()

<script>
    const cssProperty = [
        {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
        {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
        {view: "30", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
        {view: "40", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
        {view: "50", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
        {view: "11", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
        {view: "13", name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
        {view: "15", name: "animation-name", desc: "animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
        {view: "17", name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
        {view: "21", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
        {view: "49", name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면을 보여줄지 설정합니다."},
        {view: "22", name: "caption-side", desc: "caption-side 속성은 테이블 캡션의 위치를 설정합니다."},
        {view: "31", name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
        {view: "41", name: "empty-cells", desc: "empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다."},
        {view: "41", name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
        {view: "19", name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
        {view: "10", name: "grid-template-column", desc: "grid-template-column 속성은 가로 컬럼의 크기와 위치를 설정합니다."}
    ];

    const searchBox = document.querySelectorAll(".search span"); //조회 버튼(다중)
    const cssList = document.querySelector(".list ul"); //속성 리스트
    let listHtml = "";

    //목록 작업
    function updateList(list){ //updateList 함수 정의
        listHtml = ""; //listHtml을 빈 공간으로 정의(추가되지 않도록!)
        for(const data of list){
            listHtml += `<li>${data.name} : ${data.desc} <span>${data.view}</span></li>`; //li에 알맞은 값을 넣어서 배출
        }
        cssList.innerHTML = listHtml; //<li> ~ </li> 값을 cssList에 추가 (cssList = .list > ul)
    }
    updateList(cssProperty); cssProperty를 가지고 updateLlist 함수 실행

    //버튼 클릭하기
    searchBox.forEach(span => { //searchBox의 span 각각 선택(ex. 조회수 00 이상)
        span.addEventListener("click", () => { //클릭했을 때 이벤트 발생
            const target = span.dataset.view; //target선언; searchBox안의 span의 data-view라고 선언
            const filterList = cssProperty.filter(data => data.view >= target) //filterList선언; target view와 실제 data view 비교

            updateList(filterList); //filterList가지고 updateList 함수 실행
        });
    })
</script>

참고.

 

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/searchEffect05.html