SearchEffect04- find( )

const cssProperty = [
{name: "all", desc:"all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."},
{name: "animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
{name: "animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
.
.
생략.
]

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) => {  //map를 이용해서 element와 index 불러오기
	cssCount.innerText = "전체 목록 갯수 : "+ (index+1) +"개" 
	cssList.innerHTML += "<span>"+ element.name +"</span>"
	});
	//사용자가 검색한 값
	searchBox.addEventListener("keyup", ()=>{ //keyup 이벤트를 했을 때를 지정.
	const searchWord = searchBox.value;    //서치박스에 들어오는 입력값을 변수로 지정.
	// console.log(searchWord);

	findProp(searchWord);  // 입력값 변수를 매개변수로 지정해서 함수를 실행.      
	});

	//리스트를 클릭하면 설명 영역에 바로 설명이 들어오게.
	document.querySelectorAll(".list span").forEach(span=>{
		span.addEventListener("click", ()=>{
		//클릭한 데이터 값을 가져오기
		const listPorp = span.innerText;

		findProp(listPorp);
		})
	})

	//findProp 함수 
	function  findProp(searchWord){
	const targetData = cssProperty.find((data)=>data.name === searchWord); //사용자가 입력한 값 == CSS 속성 값

	//찾는 데이터가 없을 때
	if(targetData == null){ //입력한 값이 null 일때 if문을 작성.
		cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!" //설명 영역에 텍스트를 출력.
		return;
		}
	cssDesc.innerHTML = targetData.desc; //설명 영역에 서치박스에 입력한 속성의 설명을 출력.
	// cssDesc.innerText = 
	// cssDesc.textContent = 
	}

find( )참고

자바스크립트

find () 메서드는 지난번에 만들어본 charAt()과 다르게 속성의 이름을 다 기입해야만 찾아서 나오는 메서드입니다. 더 정확한 값을 얻을 수 있지만 일일이 다 입력해야 하는 번거로움이 있습니다.