Search Effect03 - charAt( )

const searchBox = document.querySelectorAll(".search span");    //다수의 검색목록(.search span)를 변수(searchBox)에 저장
const cssList = document.querySelectorAll(".list ul li");   //다수의 리스트를 변수(cssList)에 저장
const cssCount = document.querySelector(".count em");    //전체 속성 갯수(.count)를 변수(cssCount)에 저장

//모든 데이터 보이기
cssList.forEach((li, index) => {
    li.classList.add("show");    //초기값으로 cssList에 클래스 add("show")를 실행
    cssCount.innerHTML = index + 1;    //cssCount에 배열의 갯수를 문서에(innerHTML) 표현
})

//검색목록을 클릭하면 클리한 데이터 값을 가져와야 한다.
searchBox.forEach(el => {
    el.addEventListener("click", () => {
        const searchWord = el.innerText;    // 버튼의 글자만
        // console.log(searcWord);

        cssList.forEach(el => {
            // console.log(el)
            const cssName = el.dataset.name;    //검색목록 중 css 속성 값
            // console.log(cssName);
            const cssType = el.dataset.type;    //검색목록 중 css 유형 값
            // console.log(cssType);


            //조건문의 조건: 버튼 첫글자 == css 속성의 첫글자 and 버튼 첫글자 == css 유형의 첫글자
            if(searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt(0) === cssType.charAt(0)){
                el.classList.add("show");    //참이면 add("show")를 실행 하여 class에 show 추가
            } else {
                el.classList.remove("show");    //거짓이면 remove("show")를 실행 하여 class에 show 제거
            }
        })
    })
})

• 연산자 참조
• if문 참조
• add()/remove() 참조