searchEffect04 - find()

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

const cssProperty = [					//cssProperty에 데이터 저장
   {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 속성은 요소 뒷면 출력 여부를 설정합니다."},
   ...
];
const searchBox = document.querySelector("#search-box");		//searchBox에 아이디 search-box 저장
const cssCount = document.querySelector(".count"); 				//cssCount에 클래스 count 저장
const cssDesc = document.querySelector(".desc"); 				//cssDesc에 클래스 desc 저장
const cssList = document.querySelector(".list"); 				//cssList에 클래스 list 저장

// CSS 속성 값/전체 갯수 출력하기
cssProperty.map((element, index) => {									//cssProperty의 element, index값 설정
	cssCount.innerText = "전체 목록 갯수 : "+ (index+1)+"개";	 			//cssCount(.count)에 "전체 목록 갯수 : "+ (index+1)+"개" 출력
    cssList.innerHTML += "<span>"+element.name+"</span>";		//cssList(.list)에 "<span>"+element.name+"</span>" 출력
});

//사용자가 검색한 값
searchBox.addEventListener("keyup", () => {		//searchBox에 keyup 했을 때 이벤트 설정
	const searchWord = searchBox.value;				//searchWord에 사용자 입력 값 저장					

	findProp(searchWord);							//함수 findProp을 매개변수 searchWord로 실행
});

document.querySelectorAll(".list span").forEach(span => {		//.list span 들을 선택
	span.addEventListener("click", () => {						//span 을 클릭 했을 때 이벤트 설정
    	//클릭한 데이터 값을 가져오기		
    	const listProp = span.innerText;						//listProp에 span의 텍스트값 저장
        findProp(listProp);										//함수 findProp을 매개변수 listProp 실행
    })
 })

function findProp(seachProp){															//매개변수(seachProp) 함수 findProp 선언
	const targetData = cssProperty.find((data) => data.name === seachProp)			//cssProperty의 data.name 과 매개변수(seachProp)에서 같은 값을 찾아서 targetData에 저장
            
    //찾는 데이터가 없을 때
    if(targetData == null){																//만약 targetData가 null 일 때 
    	cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!";	  //cssDesc(.desc)에 "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!"출력
        return;																
    }
    cssDesc.innerHTML = targetData.desc;												//cssDesc에 targetData의 decs 출력
}