Search Effect04 - find()

 

const cssPorperty = [
    {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
    {name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."},
    {name: "align-items", desc: "align-items 속성은 <div> 요소의 수직 방향 정렬 방식을 설정합니다."},
    {name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."},
    {name: "background", desc: "background 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다."},
    {name: "border", desc: "border 속성은 상자의 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리의 너비, 스타일 및 색상을 지정하는 데 사용되는 약식 속성입니다."},
    {name: "border-color", desc: "border-color 속성은 요소의 테두리 색상을 설정하는 데 사용됩니다."},
    {name: "border-radius", desc: "border-radius 속성은 요소의 모서리를 둥글게 만드는 데 사용됩니다."},
    {name: "border-right", desc: "border-right 속성은 요소 오른쪽 테두리의 너비, 스타일 및 색상을 지정하는 데 사용됩니다."},
    {name: "border-top", desc: "border-top 속성은 요소 상단 테두리의 너비, 스타일 및 색상을 지정하는 데 사용 되는 border-top약식 속성입니다."},
    {name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."}
]

const searchBox = document.querySelector("#search-box");
const cssCount = document.querySelector(".count");
const cssDesc = document.querySelector(".desc");
const cssList = document.querySelector(".list");

//CSS 속성값, 전체 갯수 출력하기
cssPorperty.map((element, index) => {
    cssCount.innerText = "전체 목록 갯수 : "+ (index + 1) +"개"
    cssList.innerHTML += ""+ element.name +""
});

//사용자가 검색한 값
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;
    // console.log(searchWord)
    findProp(searchWord);
});
document.querySelectorAll(".list span").forEach(span => {
    span.addEventListener("click", () => {
        //클릭한 데이터 값을 가져오기
        const listProp = span.innerText;
        findProp(listProp);
    });
});

//사용자가 검색한 값과 CSS 속성이 일치할 경우
function findProp(searchWord){
    const targetData = cssPorperty.find((data) => data.name === searchWord)

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

    cssDesc.innerHTML = targetData.desc;
}

find() 참고