Search Effect03 - charAt()

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

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

        //전체 속성 갯수 보이기
        // cssList.forEach((element, index) => {
        //     element.classList.add("show");
        //     console.log(index)
        //     cssCount.innerHTML = index + 1;
        // });

//알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다.
//searchBox.addEventListener is not a function
searchBox.forEach(el => {
	el.addEventListener("click", () => {
		const searchWord = el.innerText;            //알파벳의 첫글자
		// console.log(searchWord)

		cssList.forEach(el => {
			const cssName = el.dataset.name;        //속성의 리스트에 data-name의 값
			const cssType = el.dataset.type;        //속성의 리스트에 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");
			}
		})
	})
})

charAt() 참고