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

charAt()

Search Effect