searchEffect04 - find()

{
        const searcBox = 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 + "";
        })
        searcBox.addEventListener("keyup", () => { //사용자가 입력한 값을 searchWord에 저장
            const searchWord = searcBox.value;
            // console.log(searchWord)
            findProp(searchWord); //저장한 searchWord를 함수에 전달
        });
        document.querySelectorAll(".list span").forEach(span => { //list의 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;
            }
            cssdesc.innerHTML = targetData.desc;
        }
 }

사이트 바로가기 : https://dnwls7738.github.io/webs_class/javascript/effect/searchEffect.html