searchEffect02 - includes()

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

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(다수의 li)에 각각 클래스 show 추가
    cssCount.innerHTML = index + 1;				//cssList의 index(li의 갯수)에 1을 더한 후 em에 출력
    })

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

	cssList.forEach(el => {				//cssList의 element 값을 el로 설정
    	const cssName = el.dataset.name;    //el(다수의 li)의 data-name을 cssName에 저장

		if(cssName.includes(searchWord)){	//cssName(li의 data-name)에 searchWord(사용자의 입력 값)가 포함되어 있으면
        	el.classList.add("show");		//el(다수의 li)에 클래스 show 추가
        } else {							//포함되어 있지 않으면
        	el.classList.remove("show");	//클래스 show 삭제
        }
    })
})