[Search Effect] 검색 이펙트 05

검색 이펙트 만들기 05

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

자, 그럼 시작해볼까요?

HTML 소스 보기

검색 이펙트 05의 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><a href="searchEffect04.html">04</a></li>
                <li class="active"><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>filter()를 이용하여 속성의 중요도 보여주기</span>
            <h1>CSS 속성 검색하기</h1>

            <div class="search__click">
                <ul>
                    <li data-star="0"><a href="#">☆☆☆☆☆</a></li>
                    <li data-star="1"><a href="#">★☆☆☆☆</a></li>
                    <li data-star="2"><a href="#">★★☆☆☆</a></li>
                    <li data-star="3"><a href="#">★★★☆☆</a></li>
                    <li data-star="4"><a href="#">★★★★☆</a></li>
                    <li data-star="5"><a href="#">★★★★★</a></li>
                </ul>
                <ul>
                    <li data-number="1"><a href="#">1개 이상</a></li>
                    <li data-number="2"><a href="#">2개 이상</a></li>
                    <li data-number="3"><a href="#">3개 이상</a></li>
                    <li data-number="4"><a href="#">4개 이상</a></li>
                </ul>
            </div>

            <div class="search__info">
                <div>전체 속성 개수 : <span class="num">0</span></div>
            </div>

            <div class="search__list">
                <ul class="line">

                </ul>
            </div>
        </div>
    </main>
    <!-- // main -->

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

JavaScript 소스 보기

검색 이펙트 05의 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 searchClick = document.querySelectorAll(".search__click ul li");
const star = document.querySelectorAll(".search__click ul li a")
const searchNum = document.querySelector(".search__info .num");        // 전체 개수

let count=0;

// 출력하기
function updateList(list){
    listCSS = "";

    for(const data of list){
        starList = star[data.star].innerText;   // 숫자를 별로 치환함
        count++;

        listCSS += `<li><strong>${data.name}</strong> : ${data.desc} <em>${starList}</em></li>`;
        // 속성 이름 : 설명 <em>숫자를 별로 치환한 값</em>
    }
    searchNum.innerHTML = count;
    count = 0;

    searchList.innerHTML = listCSS;
}
updateList(cssProperty);

// 클릭하기
searchClick.forEach(star => {
    star.addEventListener("click", () => {
        const target = star.dataset.star;
        const target2 = star.dataset.number;

        const filterList = cssProperty.filter(data => data.star == target || data.star >= target2);
        
        searchNum.innerHTML = filterList.length;        // 속성 개수 표시

        updateList(filterList);
    });
});

원본(HTML/JS) 소스 보기

CSS 소스 보기

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

[Search Effect] 검색 이펙트 07 (1)	2022.10.21
[Search Effect] 검색 이펙트 06 (1)	2022.10.21
[Search Effect] 검색 이펙트 04 (3)	2022.09.28
[Search Effect] 검색 이펙트 03 (7)	2022.08.22
[Search Effect] 검색 이펙트 02 (2)	2022.08.17

코딩공책📚

[Search Effect] 검색 이펙트 05

검색 이펙트 만들기 05

HTML 소스 보기

JavaScript 소스 보기

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

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Search Effect] 검색 이펙트 05

검색 이펙트 만들기 05

HTML 소스 보기

JavaScript 소스 보기

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

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바