Search Effect04 - 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-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
	{name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
	{name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
	{name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
	{name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
	{name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
	{name: "empty-cells", desc: "empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다."},
	{name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
	{name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
	{name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다."},
	{name: "hanging-punctuation", desc: "hanging-punctuation 속성은 글씨의 시작 및 끝의 위치를 설정합니다."},
	{name: "isolation", desc: "isolation 속성은 stacking context을 설정합니다."},
];
	
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 += "<span>"+ element.name +"</span>";
});

//사용자가 검색한 값
searchBox.addEventListener("keyup", () => {		// 검색창에 입력하면
	const searchWord = searchBox.value;			//입력한 값을 searchWord에 저장
	//console.log(searchWord)
	findProp(searchWord);
});

document.querySelectorAll(".list span").forEach(span => {		//속성값을 선택
	span.addEventListener("click", () => {		
	//클릭한 데이터 값을 가져오기
	const listProp = span.innerText;		//속성값에 (Text)를 listProp에 저장
	findProp(listProp);		//findProp에 매개변수로 보내짐
	})
})

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

find() 참고