searchEffect05 - filter()

const cssProperty = [   //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장
    //a
    {view:9, 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:10, name:"animation-fill-mode", desc:"animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
    {view:20, name:"animation-iteration-count", desc:"animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
    {view:30, name:"animation-name", desc:"animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
    {view:40, name:"animation-play-state", desc:"animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
    {view:50, name:"animation-timing-function", desc:"animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다."},
    {view:10, name:"appearance", desc:"appearance 속성은 기본 양식 컨트롤이 렌더링되는 방식을 제어합니다."},

    //b
    {view:20, name:"backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
    {view:30, name:"backface-visibility", desc: "backdrop-visibility 속성은 요소 뒷면 출력 여부 설정합니다."},
    {view:40, name:"background", desc: "background 속성은 배경 속성 값을 정의합니다."},
    {view:50, name:"background-attachment", desc:"background-attachment : background-attachment 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다."},
    {view:10, name:"background-blend-mode", desc:"background-blend-mode : background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다."},
    {view:20, name:"background-clip", desc:"background-clip : background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다"},
    {view:30, name:"background-color", desc:"background-color : background-color 속성은 백그라운드 색을 설정합니다"}
]
const searchBox = document.querySelectorAll(".search span");    //searchBox에 class="search"의 하위 태그 span 저장
const cssList = document.querySelector(".list ul");    //cssList에 class="list" 태그 저장
const cssCount = document.querySelector(".count em");  //cssCount에 class="count" 태그 저장

//목록 보여주기
function updataList(list) {     //매겨변수로 받은 배열을 보여주는 함수
    let listHTML = "";      //HTML에 나타낼 CSS속성을 문자열로 저장

    for(const data of list){    //매개변수로 받은 배열의 첫번째 값 부터 data에 넣고 순회.
        listHTML += `${data.name} : ${data.desc} ${data.view}`    //listHTML에 list배열 속 객체 데이터의 name, desc, view의 값을 템플릿 리터럴 방식으로 문자열에 삽입
    }
    cssList.innerHTML = listHTML;   //cssList(.list ul) 태그 안에 listHTML 삽입
}
updataList(cssProperty);    //udPataList 함수에 매개변수로 cssProperty 배열 전달 --> cssProperty 배열 전체 출력 (CSS속성 전체 출력)

//버튼 클릭하기
searchBox.forEach(span => {     //searchBox(버튼들)을 forEach로 순회
    span.addEventListener("click", () => {      //sapn 태그 영역 클릭할 때
        const target = span.dataset.view;       //변수 target에 span의 data-view속성의 값을 저장(조회수)
        const filterList = cssProperty.filter(data => data.view >= target);     //filter메소드를 이용, 배열 cssProperty 중 키view의 값이 target에 저장된 값보다 크면 filterList에 저장

        updataList(filterList);        //updateList함수에 매개변수로 filterList를 넣어서 filter메소드를 통해 나온 배열이 출력        
    });
});

 

filter() 검색효과 사이트
filter() 참고 사이트