Search Effect 04 - 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: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터 효과를 설정합니다."},
   {name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
   {name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."},
   {name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
   {name: "display", desc: "display는 요소를 어떻게 보여줄지 결정합니다"},
   {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) +"개"
    cssList.innerHTML += "<span>"+ element.name +"</span>";
}) 

searchBox.addEventListener("keyup", () => {			// 검색창에 입력 했을 때
    const searchWord = searchBox.value;				// 입력한 값(value)를 searchWord에 저장
    
    findProp(searchWord);								// findProp 함수에 매개변수로 보냄
});

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

function findProp(searchProp){

	// 객체(cssProperty) 안의 name과 매개변수(searchProp)을 비교해서 찾아 targetData에 저장
    const targetData = cssProperty.find((el) => el.name === searchProp)		
    

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

find()참고

전체 사이트 보기