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, array) => {
searchNum.innerHTML = `${cssProperty.length}`;
searchList.innerHTML += `${element.name}`;
});
// 입력
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;
};
<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>
</div>
</main>