Search Effect05 - filter()

 

const cssProperty = [
            // a
            {view: "10", name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."},
            {view: "15", name: "align-items", desc: "align-items 속성은 <div> 요소의 수직 방향 정렬 방식을 설정합니다."},
            {view: "20", name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."},
            {view: "23", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
            {view: "28", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {view: "32", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {view: "37", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {view: "41", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {view: "46", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {view: "9", name: "animation-iteraction-count", desc: "animation-iteraction-count 속성은 애니메이션의  설정합니다."},
            {view: "11", name: "animation-name", desc: "animation-name 속성은 애니메이션의 키프레임의 이름을 설정합니다."},
            {view: "21", name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의  설정합니다."},
            {view: "35", name: "animation-timing-function", desc: "animation-timing-function 속성은 움직임의 속도를 정의합니다."},
            {view: "44", name: "appearance", desc: "appearance 속성은 appearance기본 양식 컨트롤이 렌더링되는 방식을 제어합니다."},
]

const searchBox = document.querySelectorAll(".search span")
const cssList = document.querySelector(".list ul")
const searCount = document.querySelector(".count em")
//변수(데이터 저장+변경+추가+전역/지역 변수),
//상수(데이터 저장), 
//배열(순차적으로 여러개 저장), 
//객체(데이터 저장(키와 값)), 
//함수(실행문 집합체, 재활용)

searchBox.forEach(el => {
    el.addEventListener("click", () => {
        onClickButton()
    });
});

//버튼을 클릭했을 때
function onClickButton(){
    alert("dd");
}

//CSS 리스트 출력하기
function upDataList(){
    let list = "";

    for(let data of cssProperty){
        //list += ""+ data.view + "<l/i>";
        list += `${data.name} : ${data.desc} ${data.view}`;
    }

    cssList.innerHTML = list;
}
upDataList();

filter() 참고