searchEffect03 - charAt()

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

    //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다.
    //searchBox.addEventListener is not a function
    // searchBox.addEventListener("click", function(){
    //     alert("ddd");
    // });
    cssList.forEach((li, index) => {
        li.classList.add("show"); //모든 데이터 보이기
        cssCount.innerText = index + 1; //갯수 보이기
    })
    searchBox.forEach(el => { //searchBox가 여러개의 데이터가 들어있어서 forEach() 써준다.
        el.addEventListener("click", () => { //버튼(span태그) 클릭할 때의 이벤트 설정.
            const searchWord = el.innerText; //searchWord에 el(span)의 text를 저장한다. 알파벳 첫글자
            //console.log(searchWord);

            cssList.forEach(el => { //버튼 클릭했을 때 cssList(속성의 리스트)
                //console.log(el);
                const cssName = el.dataset.name; //CSS 속성 값만 cssName에 저장
                const cssType = el.dataset.type; //CSS 유형 값
                //console.log(cssName);
                //console.log(cssType);

                console.log(cssType);

                //알파벳 첫글자(a) == CSS 속성의 첫글자(a)
                if (searchWord.charAt(0) === cssName.charAt(0) || //searWord의 첫글자와 cssName의 첫글자를 비교
                    searchWord.charAt(0) === cssType.charAt(0)) {  //searchWord(클릭한 속성명)와 cssType(dataset으로 불러온 속성 타입)이 같은지 비교
                    
                    el.classList.add("show"); //같으면 el(li)에 class="show" 추가
                } else {
                    el.classList.remove("show"); //다르면 el(li)에 class="show" 제거
                }
            });
        });
    });
}

사이트 바로가기 : https://dnwls7738.github.io/webs_class/javascript/effect/searchEffect.html