search effect02 - includes()

const searchBox = document.querySelector("#search-box");           //search-box(검색창)를 변수에 저장
        const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수(cssList)에 저장
        const cssCount = document.querySelector(".count em")      //em을 변수(cssCount:전체 속성 갯수)에 저장
       
       cssList.forEach((e, index) => {           //전체 속성 갯수 설정:li의 모든 index를 불러옴
                e.classList.add("show");         //li의 index에 class="show" 추가 		
                cssCount.innerHTML = index + 1; //배열은 0부터 시작하므로 문서의 li갯수와 일치 시키기 위해 +1
        })
        
        searchBox.addEventListener("keyup", () => {  //search-box(검색창)에 입력(keyup)했을 때 설정
            const searchWord = searchBox.value;      //검색창에 입력한 값(을 데이터 저장소 변수(searchBox)에) 저장
            
            cssList.forEach(el => {				   //각각의 li에 적용(설정)
                const cssName = el.dataset.name;   //CSS 속성 값을 변수(cssName)에 저장
                
                if(cssName.includes(searchWord)){ //입력한 값에 데이터가 있는 지 없는지
                    el.classList.add("show");     //있으면 li에 class="show" 추가 -> 웹상에서 보임
                } else {
                    el.classList.remove("show");  //없으면 li에 class="show" 삭제 -> 웹상에서 안보임
                }
            });
        });

includes()참고