Search Effect04 - find( )

 const searchBox = document.querySelector("#search-box");
     const cssCount = document.querySelector(".count");
     const cssDesc = document.querySelector(".desc");
     const cssList = document.querySelector(".list");
        // css속성 값 출력하기
     cssProperty.map((element, index) => {
        cssCount.innerText = "전체 목록 갯수 : "+ (index+1)+"개";
        cssList.innerHTML += "" + element.name + ""
     })

     // 사용자가 search한 값
     searchBox.addEventListener("keyup", () =>{
        const searchWord = searchBox.value;
        // console.log(searchWord)

        findProp(searchWord);

     })

     document.querySelectorAll(".list span").forEach(span => {
         span.addEventListener("click", () =>{
             //클릭한 데이터 값을 가져오기
             const listProp = span.innerText;
             findProp(listProp);

         })
     })

     function findProp(searchProp){
        const targetData = cssProperty.find((data) => data.name === searchProp)
        
        // 찾는 데이터가 없을 때
        if(targetData == null){
            cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!"
            return;
        }
        // console.log(targetData)
       
        cssDesc.innerHTML = targetData.desc;
     }

find()참고

자바스크립트

https://jowuseop1110.github.io/webs_class/javascript/effect/searchEffect04.html