Search Effect03 - charAt()

	const searchBox = document.querySelectorAll(".search span"); 	// 알파벳 버튼들
	const cssList = document.querySelectorAll(".list ul li"); 			// 속성 리스트
	const cssCount = document.querySelector(".count em"); 			// 속성 갯수
	const reset = document.querySelector(".search .reset")			// 리셋(all) 버튼
    
	// 모든 데이터 보이기
	cssList.forEach((ele, index) => {
		ele.classList.add("show");
		cssCount.innerHTML = index + 1;
	});



	// 버튼을 클릭하면 클릭한 데이터 값을 가져와야 한다.
	searchBox.forEach(el => {
		el.addEventListener("click", () => {
			const searchWord = el.innerText; 			// 버튼의 글자(a,b,c,애니메이션,효과,테이블..)

			cssList.forEach(el => {
				const cssName = el.dataset.name;		// 속성 리스트에 data-name 값
				const cssType = el.dataset.type;		// 속성 리스트에 data-type 값

				// 알파벳 버튼 글자 == data-name 첫글자 & 알파벳 버튼 글자 == data-type 글자 비교
				if (searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt() === cssType.charAt()) {
					el.classList.add("show");
				} else {
					el.classList.remove("show");
				}
			})
		})
	});
	reset.addEventListener("click", () => {		// all버튼(reset)을 클릭했을 때
		cssList.forEach(el => {				// 속성리스트에 show 추가
			el.classList.add("show");
	})
})

charAt()참고

전체 사이트 보기