Search Effect05 - filter()

const cssProperty = [
{view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
{view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
{view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
{view: "40", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
{view: "20", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
{view: "41", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
{view: "42", name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
{view: "14", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
{view: "15", name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
{view: "16", name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
{view: "34", name: "empty-cells", desc: "empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다."},
{view: "43", name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
{view: "26", name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
{view: "29", name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다."},
{view: "34", name: "hanging-punctuation", desc: "hanging-punctuation 속성은 글씨의 시작 및 끝의 위치를 설정합니다."},
{view: "17", name: "isolation", desc: "isolation 속성은 stacking context을 설정합니다."},
];

const searchBox = document.querySelectorAll(".search span");     //알파벳 버튼들
const cssList = document.querySelector(".list ul");    //속성 리스트
const cssCount = document.querySelector(".count em");
let listHTML = "";

//목록 보여주기
function upDataList(list){
	let listHTML = "";
	for(const data of list){ //cssProperty안에 있는 갯수만큼 data보여줌
		listHTML += `${data.name} : ${data.desc} : ${data.view}`;   //listHTML에 cssProperty 갯수 만큼 반복적으로 li를 추가
	}
	cssList.innerHTML = listHTML;   //cssList에 listHTML를 보여줌
}
upDataList(cssProperty) //함수 실행

//버튼 클릭하기
searchBox.forEach(span => {
	span.addEventListener("click", () => {  //searchBox를 클릭할 때
		const target = span.dataset.view;   //target에 span.dataset.view값 저장
		const filterList = cssProperty.filter(data => data.view >= target)  //filterList에 cssProperty에있는 data.view이 target보다 크거나 같은 값
		upDataList(filterList); //매개변수 함수 전달
	})
})

filter() 참고