Search Effect02 - includes()

const searchBox = document.querySelector("#search-box")		// searchBox 변수에 저장
const cssList = document.querySelectorAll(".list ul li")		// 다수의 li를 cssList에 저장
const cssCount = document.querySelector(".count em")		// em을 cssCount에 저장

cssList.forEach((element, index) => {					// cssList의 각각 element, index에 적용
	element.classList.add("show");					// cssList의 element에 각각 클래스 show 추가
	console.log(index)								// cssCount에 index값 + 1 해주고 em출력
	cssCount.innerHTML = index + 1;
  });

searchBox.addEventListener("keyup", () => {				//searchBox에 keyup했을 때 이벤트 설정
	const searchWord = searchBox.value; 		//사용자가 입력한 값을 searchWord에 저장

	//console.log(searchWord)

	cssList.forEach(el => {				//cssList의 각각의 요소값에 적용
		const cssName = el.dataset.name; 		//el의 data-name을 cssName에 저장
        //console.log(cssName);

		if(cssName.includes(searchWord)){
        	el.classList.add("show");
        } else {							
        	el.classList.remove("show");	//아니면 클래스show를 삭제
        }
    })
})

includes() 참고