[Search Effect] 검색 이펙트 04

검색 이펙트 만들기 04

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다.
이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠!

자, 그럼 시작해볼까요?

HTML 소스 보기

검색 이펙트 04의 HTML 소스와 부연 설명(주석 처리됨)이다.
CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것.

<body>
    <header id="header">
        <h1>Search</h1>
        <nav>
            <ul>
                <li><a href="searchEffect01.html">01</a></li>
                <li><a href="searchEffect02.html">02</a></li>
                <li><a href="searchEffect03.html">03</a></li>
                <li class="active"><a href="searchEffect04.html">04</a></li>
                <li><a href="searchEffect05.html">05</a></li>
                <li><a href="searchEffect06.html">06</a></li>
            </ul>
        </nav>
    </header>
    <!-- // header -->

    <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>
    <!-- // main -->

    <footer id="footer">
        <a href="mailto:kde66034@gmail.com">kde66034@gmail.com</a>
    </footer> 
    <!-- //footer -->
</body>

JavaScript 소스 보기

검색 이펙트 04의 JavaScript 소스와 부연 설명(주석 처리됨)이다. 상수 cssProperty에 검색결과에 띄울 CSS 속성 리스트들을 모두 저장하고 이것들을 출력하고 속성 클릭 시 설명이 나오도록 하는 작업과 마지막으로 사용자가 입력한 값과 일치하는 속성 name의 desc를 출력시켜주는 스크립트를 짠다.

// CSS 속성 리스트 저장
const cssProperty = [
    { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
    { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." },
    { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." },
]

const searchList = document.querySelector(".search__list");         // 서치 리스트 ul
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.innerHTML = cssProperty.length; // CSS 속성 총 개수 출력
    // searchNum.innerHTML = index + 1;

    searchList.innerHTML += `${element.name}`;
});

// 속성 클릭 작업
const searchListSpan = searchList.querySelectorAll('span');
searchListSpan.forEach((span) => {
    span.addEventListener('click', (e) => {
        const seachWord = e.target.textContent;
        findProperty(seachWord);
        window.scrollTo({left : 0, top : 0, behavior : "smooth"});
    });
});

// 입력하기
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) {    // 데이터가 null일(존재하지 않을) 경우
        searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!";   // 데이터가 존재하지 않을 시 표시할 문구
        return;     // 종료의 의미 - F12 콘솔창 오류를 없애줌
    };

    searchDesc.textContent = targetData.desc;
};

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Search Effect' 카테고리의 다른 글

[Search Effect] 검색 이펙트 06 (1)	2022.10.21
[Search Effect] 검색 이펙트 05 (4)	2022.09.29
[Search Effect] 검색 이펙트 03 (7)	2022.08.22
[Search Effect] 검색 이펙트 02 (2)	2022.08.17
[Search Effect] 검색 이펙트 01 (8)	2022.08.16

코딩공책📚

[Search Effect] 검색 이펙트 04

검색 이펙트 만들기 04

HTML 소스 보기

JavaScript 소스 보기

'Effect > Search Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Search Effect] 검색 이펙트 04

검색 이펙트 만들기 04

HTML 소스 보기

JavaScript 소스 보기

'Effect > Search Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바