Search Effect04 - find( )

const cssProperty = [
    {name: "accent-color", desc: "accent-color 속성은 일부 사용자 인터페이스 컨트롤의 액센트 색상을 설정합니다."},
    {name: "align-content", desc: "align-content 속성은 콘텐츠 항목 사이 및 주위의 공간 분포를 설정합니다."},
    {name: "align-items", desc: "align-items 속성은 모든 직계 자식의 align-self 값을 그룹으로 설정합니다."},
	//중략...  
]

const searchBox = document.querySelector("#search_box");    //input박스(#search_box)를 변수(searchBox)에 저장
const cssCount = document.querySelector(".count");    //전체 속성 갯수(.count)를 변수(cssCount)에 저장
const cssDesc = document.querySelector(".desc");    //속성의 설명을 변수(cssDesc)에 저장
const cssList = document.querySelector(".list");    //속성의 리스트를 변수(cssList)에 저장

// CSS 속성 값/전체 갯수 출력하기
cssProperty.map((element, index) => {
    cssCount.innerText = "전체 목록 갯수 : " + (index+1) + "개";    //cssCount에 cssProperty의 갯수를 글자로 (innerText) 표현
    cssList.innerHTML += "<span>"+ element.name +"</span>";    //cssList에 cssProperty의 CSS 속성 값(element.name)를 문서에 (innerHTML) 표현
});

//사용자가 검색한 값
searchBox.addEventListener("keyup", () => {    //searchBox에 입력(keyup) 했을 때 이벤트(addEventListener) 실행
    const searchWord = searchBox.value;    //사용자 입력 값(searchBox.value)을 변수(searchWord)에 저장
    //console.log(searchWord);
    findProp(searchWord);    //함수(findProp) 선언 및 함수에 매개변수(searchWord) 저장
});

//속성을 클릭하면 클리한 데이터 값을 가져와야 한다.
document.querySelectorAll(".list span").forEach(span => {
    span.addEventListener("click", () => {
        const listProp = span.innerText;    //클릭한 속성을 변수(listProp)에 저장
        findProp(listProp);    //함수(findProp) 선언 및 함수에 매개변수(listProp) 저장
    })
})

function findProp(searchProperty){    //함수(findProp) 정의
    const targetData = cssProperty.find((data) => data.name === searchProperty)    //searchProperty(입력 값,클릭한 속성)가 CSS 속성 값(data.name)가 같으면 변수(targetData)에 저장

    //조건문의 조건: targetData == null
    if(targetData == null){
        cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!";
        return;
    }

    cssDesc.innerHTML = targetData.desc;    //cssDesc에 targetData을 문서에 (innerHTML) 표현
}

• find( ) 참조
• 매개변수 참조
• 연산자 참조
• if문 참조