searchEffect04 - find()

<script>
    const cssProperty = [
        {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
        {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
        //생략
        //배열 안의 객체 값으로 name과 desc을 주었다
    ];

    const searchBox = document.querySelector("#search-box"); //사용자 입력 값
    const cssCount = document.querySelector(".count"); //갯수
    const cssDesc = document.querySelector(".desc"); //설명 영역
    const cssList = document.querySelector(".list"); //속성 list

    // css 속성 값 / 전체 갯수 출력하기
    cssProperty.map((element, index) => {
        cssCount.innerText = "전체 목록 갯수 :" + (index + 1) + "개"; //index가 문자열로 변환되어 괄호안에서 더해줘야해
        cssList.innerHTML += "<span>" + element.name + "</span>"; // '='이라고 하면 변경만 되고 추가하려면 '+=' 해야 함
    })

    searchBox.addEventListener("keyup", () => { //사용자가 입력하면
        const searchWord = searchBox.value; //searchWord에 입력됨
        findProp(searchWord) // 그 값을 가지고 함수 실행하자
    })

    document.querySelectorAll(".list span").forEach(span => { //span 각각을 선택
        span.addEventListener("click", () => {
            //클릭한 데이터 값을 가져오기
            const listProp = span.innerText;
            findProp(listProp);
        })
    })

    function findProp(searchProp){ //findProp 함수란?
        const targetData = cssProperty.find((data) => data.name === searchProp)
        //data.name과 searchProp이 같은지 비교

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

참고.

find()란, 배열의 특정 값을 찾는 것입니다.

 

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/searchEffect04.html