searchEffect03 - charAt()

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect03.html

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

//모든 데이터 보이기
cssList.forEach((li, index) => {				//cssList의 li(CSS속성 리스트들), index(CSS속성 갯수) 값 설정
	li.classList.add("show");					//li에 클래스 show 추가
    cssCount.innerHTML = index + 1;				//index에 1을 더한 후 em에 출력
})
        
//알파벳을 클릭하면 클릭한 데이터 값 가져오기
searchBox.forEach(el => {					//searchBox의 element값을 el로 설정 
	el.addEventListener("click", () => {		//사용자가 클릭했을 때 이벤트 설정
   		const searchWord = el.innerText;        //searchWord에 알파벳 버튼들 저장

		cssList.forEach(el => {				//cssList의 element값을 el로 설정
    		const cssName = el.dataset.name;    //cssName에 el의 name을 저장
        	const cssType = el.dataset.type;	//cssName에 el의 type을 저장

			//알파벳 첫글자 == CSS 속성의 첫글자(a)
        	if(searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt(0) === cssType.charAt(0)){	
            //searchWord의 첫글자와 cssName의 첫글자가 같거나 searchWord와 cssType의 첫글자가 같으면
            	el.classList.add("show");		//el에 클래스 show 추가
            } else {							//그렇지 않다면
            	el.classList.remove("show");	//el에 클래스 show 삭제
            }
        })
    })
})