search effect03 -charAt()

  //데이터를 변수(명)에 저장
        const cssProperty = [ //CSS 속성 목록
            {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
            {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
            {name: "animation-name", desc: "animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
            {name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
            {name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            {name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부 설정합니다."},
            {name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."},
            {name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
            {name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
            {name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
            {name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다."},
        ];
  // 변수 정의
        const searchBox = document.querySelectorAll(".search span");  //알파벳 버튼들  //input 박스   //1.클릭 이벤트 - 다중(a-h:span):querySelectorAll, forEach
        const cssList = document.querySelectorAll(".list ul li"); //속성 리스트 - 다중
        const cssCount = document.querySelector(".count em")      //속성 갯수

        //모든 데이터 보이기
        cssList.forEach((li, index) => {
            li.classList.add("show");   //모든 데이터 보이기
            cssCount.innerHTML = index + 1; //갯수 보이기
        })

        //알파벳을 클릭하면 클릭한 데이터 값을 값을 가져와야 한다. - console.log로 확인하면 클릭했을 때 클릭한 알파벳이 log에 떠야함
        //1.클릭 이벤트 - 다중(a-h) = forEach
        searchBox.forEach(el => {                   //el = .search span = 알파벳 버튼
            el.addEventListener ("click", () => {
                const searchWord = el.innerText;    //알파벳 첫글자
                // console.log(searchWord)

                cssList.forEach(el => { //클릭할때마다 데이터(데이터 네임)을 가지고 옴 / el = cssList() = 다중 =  forEach
                    
                    const cssName = el.dataset.name;  //CSS 속성값(li data-name)만 모아둠
                    const cssType = el.dataset.type;  //CSS 유형 값(li data-type)
                    // console.log(cssName)

                    //알파벳 첫글자(a) == CSS 속성의 첫글자(a)
                    if(searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt(0) === cssType.charAt(0)){
                        el.classList.add("show");
                    } else {
                        el.classList.remove("show");
                    } 

                })
            })
        })