SearchEffect03

searchEffect03

charAt() 문자열 메서드를 사용하여 CSS 속성의 시작 알파벳 키워드로 검색할 수 있게 코딩하였습니다.

---

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

HTML

전체적인 HTML 구조는 동일하며, search__list(속성 리스트)에 data-name을 제거하여 중복제거 및 가독성을 좋게하였고, js에 반복문을 통해 동일한 기능이 되도록 하였습니다..
아래의 HTML코드는 간략하게 필요부분만 표시하였습니다.

<div class="search__wrap">
    <span>charAt()를 이용하여 검색하기</span>
    <h1>CSS 속성 첫글자 검색하기</h1>
    <div class="search__info">
        <div class="keyword">
            <span>a</span>
            <span>b</span>
            <span>c</span>
            <span>d</span>
            <span>e</span>
            <span>f</span>
            <span>g</span>
            <span>h</span>
            <span>i</span>
            <span>j</span>
            <span>k</span>
            <span>l</span>
            <span>m</span>
            <span>n</span>
            <span>o</span>
            <span>p</span>
            <span>q</span>
            <span>r</span>
            <span>s</span>
            <span>t</span>
            <span>u</span>
            <span>v</span>
            <span>w</span>
            <span>x</span>
            <span>y</span>
            <span>z</span>
        </div>
        <div>전체 속성 갯수<span class="num">0</span></div>
    </div>
    <div class="search__list">
        <div class="html">
            <ul>
                <li><strong>accent-color</strong> : 특정 요소에 색상을 지정할 때 사용됩니다.</li>
                <li><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
                <li><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
                <li><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
                <li><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
                <li><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                <li><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다.</li>
                <li><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정합니다.</li>
                <li><strong>animation-duration</strong> : 애니메이션 움직임 시간을 설정합니다.</li>
                <li><strong>animation-fill-mode</strong> : 애니메이션이 끝난 후의 상태를 설정합니다.</li>
                <li><strong>animation-iteration-count</strong> : 애니메이션의 반복 횟수를 설정합니다.</li>
                <li><strong>animation-name</strong> : 애니메이션 keyframe 이름을 설정합니다.</li>
                <li><strong>animation-play-state</strong> : 애니메이션 진행상태를 설정 합니다.</li>
                <li><strong>animation-timeline</strong> : x</li>
                <li><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정 합니다.</li>
                <li><strong>appearance</strong> : 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현합니다.
                ...
            </ul>
        </div>
    </div>
</div>

JAVASCRIPT

charAt()문을 사용하여 js코드를 구성하였습니다.
검색 이펙트02번의 전체 속성갯수를 개선하여 검색한 키워드와 관련된 속성들의 갯수가 업데이트 되도록 코드를 수정하였습니다.

//선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   //input 박스
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트
const searchInfo = document.querySelector(".search__info .num");     
searchInfo.textContent = " : " + searchList.length;     //전체 속성갯수 출력
let count = 0;

searchKeyword.forEach(el => {
    el.addEventListener("click", () => {
        const searchWord = el.innerText;     //사용자가 클릭한 알파벳
        // console.log(seachWord);

        searchList.forEach(el => {
            const cssName = el.querySelector("strong").innerText;   // data-name를 제거하여도 strong태그내 속성명으로 동일 기능이 가능합니다.
            // console.log(cssName);

            //알파벳 첫글자 == CSS 속성의 첫글자
            if (searchWord.charAt(0) === cssName.charAt(0)) { // searchWord 의 첫글자가 cssName 와 같으면 아래문단을 실행 시킵니다.
                el.classList.remove("hide"); 
                count++;    // 갯수를 더합니다.
            } else {
                el.classList.add("hide");
            }
            searchInfo.textContent = " : " + count;     // class = num 검색한 키워드의 속성갯수를 출력
        });
        count = 0;  // 갯수 초기화
    });
});