searchEffect05 - filter()

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect05.html

const cssProperty = [				//cssProperty에 데이터 저장
            {view:"10", name: "all", desc: "all 속성은 CSS 속성 을 재설정하는 데 사용할 수 있는 약식 속성입니다."},
            {view:"20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {view:"15", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {view:"11", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {view:"43", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {view:"35", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후 상태를 설정합니다."},
            {view:"50", name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
            {view:"45", name: "animation-name", desc: "animation-name 속성은 애니메이션 키프레임을 설정합니다."},
            {view:"32", name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
            {view:"26", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            ...
        ];

        const searchBox = document.querySelectorAll(".search span");	//searchBox에 클래스 search의 span 저장
        const cssList = document.querySelector(".list ul"); 		//cssList에 클래스 list의 ul 저장
        const cssCount = document.querySelector(".count em");		//cssCount에 클래스 count의 em 저장
        let listHTML = "";						//변수 listHTML 선언

        //목록 보여주기	
        function upDataList(list){			//함수 upDataList 선언
            let listHTML = "";				//변수 listHTML 변경(초기화 작업)
            
            for(const data of list){			//변수 data를 선언해 for of 문 사용
                listHTML += `${data.name} : ${data.desc} ${data.view}`;		//listHTML에 `${data.name} : ${data.desc} ${data.view}` 추가
            }	//(data의 수 만큼 반복)
            cssList.innerHTML = listHTML;					//cssList(클래스 list의 ul)에 listHTML을 출력
        }
        upDataList(cssProperty);	//함수 upDataList를 매개변수 cssProperty로 실행

        //버튼 클릭하기
        searchBox.forEach(span => {			//searchBox의 element값들을 선택해 span에 저장
            span.addEventListener("click", () => {	//span을 클릭했을 때 이벤트 설정
                const target = span.dataset.view;	//변수 target을 선언해 span의 view값(클래스 search의 span의 data-view값) 저장
                const filterList = cssProperty.filter(data => data.view >= target)	//변수 filterList를 선언해 cssProperty의 view값 중 target의 값보다 크거나 같은 값 저장
            
                upDataList(filterList);		//함수 upDataList를 매개변수 filterList로 실행
            });
        })