Search Effect03 - charAt()

 

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

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

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

        cssList.forEach(el => {
            const cssName = el.dataset.name;        //CSS 속성 값
            const property = el.dataset.type;       //CSS 유형 값
            // console.log(property)

            //알파벳 첫글자(a) == CSS 속성의 첫 글자(a) 비교
            if(searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt(0) === property.charAt(0)){
                el.classList.add("show");
            } else {
                el.classList.remove("show");
            }

        })
    })
})