searchEffect04 - find( )

 const cssProperty = [
            {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 양식 속성입니다."},
            {name: "animation", desc: "animation 속성은 애니메이션 사용할 수 있는 양식 속성입니다."},
            {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            {name: "backdrop-visibility", desc: "backdrop-visibility 속성은 요소 뒷면 출력 여부 설정합니다."},
            {name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."},
            {name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
            {name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."}
        ];
        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) +" 개";//map를 이용해서 element와 index 불러오기
            cssList.innerHTML += ""+ element.name + "";
        });

        //사용자가 검색한 값
        searchBox.addEventListener("keyup", () => {//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){ //입력한 값이 null 일때 if문을 작성.
                cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!"
                return;
            }
            // console.log(targetData)
           
            cssDesc.innerHTML = targetData.desc; //설명 영역에 서치박스에 입력한 속성의 설명을 출력.
            // cssDesc.innerText = 
            // cssDesc.textContent = 
        }   

find( )

Search Effect