//선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span"); //알파벳
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
const searchInfo = document.querySelector(".search__info .num"); //목록 리스트
//전체 갯수 구하기
searchInfo.textContent = searchList.length;
searchKeyword.forEach(el => {
el.addEventListener("click", () => {
const searchWord = el.innerText; //사용자가 클릭한 알파벳
//console.log(searchWord)
searchList.forEach(el => {
const cssName = el.querySelector("strong").innerHTML; //속성 텍스트
//console.log(searchWord)
//알파벳 첫글자 == CSS 속성의 첫글자
if (searchWord.charAt(0) === cssName.charAt(0)) {
el.classList.remove("hide");
} else {
el.classList.add("hide");
}
});
const hideNum = document.querySelectorAll(".search__list ul li.hide");
searchInfo.textContent = searchList.length - hideNum.length;;
});
});
<main id="main">
<div class="search__wrap">
<span>find()을 이용하여 CSS 속성을 검색하면 설명 보여주기</span>
<h1>CSS 속성 검색하기</h1>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
</div>
<div class="search__desc">
속성을 검색하시면 설명이 표시됩니다!
</div>
<div class="search__info">
<div>전체 속성 갯수 : <span class="num">0</span></div>
</div>
<div class="search__list">
</div>
</div>
</main>
<!-- main -->