"서치 이펙트" Search 03. charAt() 메서드를 활용하여 검색 화면 만들기

🗒 서치이펙트 03

📌 charAt()을 이용하여 검색 화면을 만들어 봅시다.
📌 서치이펙트 01, 02와 다르게 검색하는 창을 없애고 알파벳을 누르면 첫글자로 그 알파벳을 포함하고 있는 단어들이 나오게 하는 것이 특징인 유형입니다.

---

HTML 태그 검색창 만들기!

실제 사이트보기 원본 소스보기 CSS 소스보기

HTML

첫글자를 클릭하면 관련 단어가 나올 수 있도록 div태그를 이용하여 class를 keyword로 지정해주어 a부터 z까지 작성합니다.
전체 속성 갯수가 뜨는 부분도 있으니 이 부분도 div태그로 묶어주어야 합니다.

<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>

CSS

새로 추가된 CSS 부분입니다.
span태그로 묶어주어서 inline이지만 화면을 줄였을 때 깨지는 부분이 있어서 block화 시켜주어야 합니다.
그 때 display: inline-block;을 사용합니다.

.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;
}

완성본 보기

---

▶ 자바스크립트 활용 (공통)

📌 자바스크립트를 활용하여 전체 개수 구하기
📌 원하는 알파벳 카테고리를 클릭했을 시 그 알파벳이 첫글자인 단어들이 나오도록 자바스크립트 활용

 // 선택자
    const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
    const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
    const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
    let count = 0;
    // 전체 개수 구하기
    searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력

    searchKeyword.forEach(el => {
        el.addEventListener("click", () => {
            const searchWord = el.innerText;    // 사용자가 클릭한 알파벳
            // console.log(searchWord);
            searchList.forEach(el => {
                const cssName = el.querySelector("strong").innerText;   // CSS 속성 텍스트
                // console.log(cssName)
                // 알파벳 첫글자 == CSS 속성의 첫글자
                if(searchWord.charAt(0) === cssName.charAt(0)){
                    el.classList.remove("hide");
                    count++;
                } else {
                    el.classList.add("hide");
                }
                searchInfo.textContent = count;
            });
            count = 0;
        });
    });

'Effect(자바스크립트 활용) > Search Effect 서치이펙트' 카테고리의 다른 글

"서치 이펙트" Search 07. 2분 동안 CSS 속성 검색하기 게임 만들기!  (1)	2022.10.21
"서치 이펙트" Search 05. filter() 메서드를 활용하여 검색 화면 만들기  (6)	2022.09.30
"서치 이펙트" Search 04. find() 메서드를 활용하여 검색 화면 만들기  (10)	2022.09.28
"서치 이펙트" Search 02. includes() 메서드를 활용하여 검색 화면 만들기  (2)	2022.08.17
"서치 이펙트" Search 01. indexOf() 메서드를 활용하여 검색 화면 만들기  (4)	2022.08.16