find()를 이용하여 속성을 검색하면 설명 보여주기

CSS 속성 검색하기

속성을 검색하시면 화면이 표시됩니다!!!
전체 속성 갯수 : 0
소스 보기
Javascript
HTML
CSS 
{
    const cssProperty = [너무많아요 생략...];
        // 선택자
        const searchList = document.querySelector(".search__list");
        const searchNum = document.querySelector(".search__info .num");
        const searchBox = document.querySelector(".search__box input");
        const searchDesc = document.querySelector(".search__desc");

        // 출력하기
        cssProperty.map((element, index) => {
            searchNum.innerText = index + 1;
            searchList.innerHTML += `<span>${element.name}</span>`;
        });

        // 입력하기
        searchBox.addEventListener("keyup", ()=>{
            const searchWord = searchBox.value;
            // console.log(searchWord);
            findProperty(searchWord);
        });

        // 속성 찾기
        function findProperty(searchData){
           const targetData = cssProperty.find((data) => data.name === searchData);

            if(targetData == null){
                searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!"
                return;
            }
           searchDesc.textContent = targetData.desc;           
        };

        // 미션(클릭시 설명 나오게)
        const searchListspan = document.querySelectorAll(".search__list span");
        searchListspan.forEach((e, i) => {
            e.addEventListener("click", () => {
                searchDesc.textContent = cssProperty[i].desc;
            });
        });
}

{
    <main id="main">
    <div class="search__wrap">
        <span>find()를 이용하여 속성을 검색하면 설명 보여주기</span>
        <h1>CSS 속성 검색하기</h1>
    <div class="search__box">
        <label for="search">검색하기</label>
        <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
    </div>

    <div class="search__desc">
            속성을 검색하시면 화면이 표시됩니다!!!
    </div>
    <div class="search__info">
        <div>전체 속성 갯수 : <span class="num">0</span></div>
    </div>
    <div class="search__list">
        
    </div>
</main>
}

{
    /* main */
    #main {
        margin: 50px 10px;
    }
    .search__wrap {
        max-width: 1400px;
        margin: 0 auto;
        border: 3px solid #223547;
        border-radius: 20px;
        background-color: #F1F3F6;
        padding: 30px;
        text-align: center;
    }
    .search__wrap > span {
        font-size: 20px;
        margin-bottom: 20px;
        display: inline-block;
    }
    .search__wrap > h1 {
        font-family: 'Tmon';
        color: #223547;
        font-size: 6vw;
        margin-bottom: 10px;
    }
    .search__box {
        margin-bottom: 40px;
    }
    .search__box label {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
    }
    .search__box input {
        border: 2px solid #223547;
        padding: 15px 40px;
        width: 70%;
        border-radius: 50px;
        font-size: 20px;
    }
    
    .search__list li {
        text-align: left;
        line-height: 1.7;
    }
    .search__list li.hide {
        display: none;
    }
    .search__list li.show {
        display: block;
    }
    .search__list span {
        display: inline-block;
        padding: 10px 20px;
        border: 1px solid var(--htmlColor);
        border-radius: 50px;
        margin-bottom: 5px;
        text-align: left;
        transition: all 0.3s;
        cursor: pointer;
    }
    .search__list span:hover {
        background-color: var(--htmlColor);
        color: #fff;
    }
    .search__info {
        text-align: right;
        margin-bottom: 30px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--htmlColor);
    }
    .search__info .type {
        text-align: center;
        margin-bottom: 10px;
    }
    .search__info  .keyword {
        text-align: center;
        margin-bottom: 10px;
    }
    .search__info  .keyword span {
        border: 2px solid var(--htmlColor);
        border-radius: 50px;
        padding: 10px;
        display: inline-block;
        margin-bottom: 4px;
    }
    .search__info  .keyword span:hover {
        background-color: var(--htmlColor);
        color: #fff;
        cursor:pointer;
    }
    .search__desc {
        padding: 20px 40px 20px 60px;
        margin-bottom: 50px;
        border-radius: 50px;
        display: inline-block;
        background: var(--htmlColor);
        color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 16.958L21.5 21.958' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 22px 17px;
    }
}