SearchEffect04

searchEffect04

find() 배열 메서드를 사용하여 CSS 속성을 검색하면 설명이 나오는 페이지를 만들어봤습니다.

---

원본 소스 보기 원본 사이트 보기

HTML

검색창을 생성하여주고, 검색한 속성의 설명이 나오는 search__desc영역을 생성하였습니다.
CSS속성들은 script를 사용하여 출력되도록 하였으니, javascript를 확인해주세요!

<main id="main">></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>
<!-- //main -->       

JAVASCRIPT

HTML영역의 search__list에 들어갈 CSS 속성들을 변수에 저장하고, map()을 사용하여 출력하여줍니다.
검색창 keyup 이벤트를 부여, 사용자가 입력한 값 = 박스 값을 변수에 저장하고 findProperty함수에 매개변수로 다시 저장해줍니다.
(변수를 매개변수로 다시 저장하는 이유는 다른 함수에서도 재사용 하기 위함.)
다시 함수를 사용하여, 저장한 css속성 변수에 find()메서드를 사용하여 검색 값과 저장한 css속성이 일치한다면, 해당 속성의 설명이 출력되고 아니라면 다시 검색을 요청하는 안내문이 출력됩니다.
찾으려는 CSS의 속성을 클릭시 설명이 출력되도록 이벤트를 부여합니다.

const cssProperty = [
    { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
    { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." },
    { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." },
    { name: "align-self", desc: "개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다." },
    { name: "all", desc: "요소의 속성을 초기화 또는 상속을 설정합니다." },
    ...
];

const searchList = document.querySelector(".search__list");
const searchBtn = document.querySelector(".search__list span");
const searchInfo = document.querySelector(".search__info .num");
const searchBox = document.querySelector(".search__box input");
const searchDesc = document.querySelector(".search__desc");

// 출력하기
cssProperty.map((el, i) => {
    searchList.innerHTML += `<span>${el.name}</span>`;
    searchInfo.innerHTML = i + 1 + "개";
});

searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;
    console.log(searchWord);
    findProperty(searchWord);   // searchWord를 매개변수로 넘겨주어 다른 함수에서도 사용하도록함
});

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

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

// 버튼 클릭시 속성 설명
searchList.addEventListener("click", (e) => {
    // console.log(e.target);
    findProperty(e.target.innerText);
});