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);

            //알파벳 첫글자(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() 검색효과 사이트
charAt() 참고 사이트