search effect04 - find()

  //데이터를 변수(명)에 저장
        const cssProperty = [ //CSS 속성 목록
            {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
            {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
            {name: "animation-name", desc: "animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
            {name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
            {name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            {name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부 설정합니다."},
            {name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."},
            {name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
            {name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
            {name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
            {name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다."},
        ];
     //CSS 속성 값/전체 갯수 출력하기
        cssProperty.map((element, index) => {      //map으로 배열안에 객체(요소)와 인덱스를 불러옴
            cssCount.innerText = "전체 목록 갯수 : "+ (index+1) +"개"; //출력: "전체 목록 갯수: (속성 목록의 인덱스) 개" /+1은 배열이0부터 시작해서
            cssList.innerHTML += ""+ element.name +"";   //출력: ex) (속성목록명) /+= 해주지 않으면 목록 하나만 출력 = 데이터가 변경만 되고 추가되지는 않아서
        });

        //사용자가 검색한 값(searchWord)
        searcBox.addEventListener("keyup", () => { //검색 영역에 사용자가 값을 넣으면
            const searchWord = searcBox.value;     //사용자가 검색한 값 = searcBox의 값으로 저장 = 검색창에 입력한 값 저장
            //console.log(searchWord)
            findProp(searchWord);                  //findProp 함수 호출하고 매개변수로 searchWord(input입력값) 전달.
        }); 

         
       document.querySelectorAll(".list span").forEach(span => {  //선택: list span(다중)을 선택
            span.addEventListener("click", () => {  // span(CSS 속성 리스트)을 클릭 했을 때
                //클릭한 데이터 값(CSS 속성 리스트)을 가져오기
                const listProp = span.innerText;    //listPorp에 CSS속성 리스트을 저장.
                findProp(listProp);                 //findProp 함수 호출하고 매개변수로 searchWord(클릭한 CSS속성명) 전달.
            })
        })
        
        function findProp(searchProp){ //매개변수(searchWord): 위쪽 함수에서 쓴 값이 이쪽으로 넘어옴
            const targetData = cssProperty.find((data) => data.name === searchProp) //name이 searchWord(사용자가 입력한 값)과 동일한지 맞으면 변수에 저장
            
            //찾는 데이터가 없을 때
            if(targetData == null) {
                cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!";
                return; //리턴??
            }
            cssDesc.innerHTML = targetData.desc; //
        }