searchEffect05 - filter()

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

const searchBox = document.querySelectorAll(".search span");  //모든 span 태그에 대해
const cssList = document.querySelector(".list ul");         //ul에 대해
const cssCount = document.querySelector(".count em");      //em에 대해
    listHTML = ""; 
    //목록 보여주기
    //리스트가 뜨기 위해서는 리스트가 있어야한다. 리스트를 만들어주고 넣을 위치에 집어 넣어줘야한다.
    function updataList(list){    //updataList를 정의 매개변수를 list로 정의
        listHTML = "";            //listHTML 초기화

        for(const data of list){ //for 반복문으로 매개변수(배열) 안에 데이터 수만큼 반복
        listHTML += `${data.name} : ${data.desc} ${data.view}`; //listHTML변수에 각 데이터의 이름, 설명, 뷰 값을 추가
        }
        cssList.innerHTML = listHTML; //cssList태그 안에 listHTML 대입 --> 그러면 함수 실행시 추가된 리스트들이 화면에 뜬다.
    }
    updataList(cssProperty); //매개변수에 cssProperty배열 대입

    //버튼 클릭하기
    searchBox.forEach(span => {  //모든 버튼(searchBox)에 대해
        span.addEventListener("click", () => { //버튼을 클릭했을때 
            const target = span.dataset.view; //타켓에 버튼의 속성 뷰값 저장
            const filterList = cssProperty.filter(data => data.view >= target)//필터리스트에 cssProperty배열의 각 속성값들 중 타겟보다 크거나 같은 값만 필터링해서 저장
            
           updataList(filterList) //함수updataList에 filterList 대입
            // cssList.innerHTML = listHTML;
        })
    })