[Search Effect] 검색 이펙트 06

검색 이펙트 만들기 06

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

자, 그럼 시작해볼까요?

HTML 소스 보기

검색 이펙트 06의 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><a href="searchEffect05.html">05</a></li>
                <li class="active"><a href="searchEffect06.html">06</a></li>
            </ul>
        </nav>
    </header>
    <!-- // header -->

    <main id="main">
        <div class="search__wrap">
            <span>sort(), reverse()를 이용하여 정렬하기</span>
            <h1>CSS 속성 정렬하기</h1>

            <div class="search__click">
                <ul>
                    <li><a href="#c" class="btn1">반대로 정렬</a></li>
                    <li><a href="#c" class="btn2">내림차순 정렬</a></li>
                    <li><a href="#c" class="btn3">오름차순 정렬</a></li>
                    <li><a href="#c" class="btn4">알파벳순(a~z)</a></li>
                    <li><a href="#c" class="btn5">알파벳순(z~a)</a></li>
                    <li><a href="#c" class="btn6">랜덤 정렬</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 소스 보기

검색 이펙트 06의 JavaScript 소스와 부연 설명(주석 처리됨)이다. 상수 cssList에 CSS의 속성들을 출력할 공간을 저장하고, cssProp에는 빈 배열을 저장시킨 다음 재배치된 데이터가 저장될 수 있도록 한다. 데이터를 출력하고, 반대·내림차순·오름차순·알파벳(a-z/z-a)순 정렬 스크립트와 버튼 클릭시 해당 정렬 스크립트를 실행할 수 있도록 addEventListener를 이용하여 스크립트를 짠다. 마지막으로 랜덤 정렬의 경우 피셔 예이츠 알고리즘을 이용하여 스크립트를 짜도록 한다.

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

const cssList = document.querySelector(".search__list .line");      // css 속성들 출력할 공간
        
const cssProp = [];

// 데이터 출력하기
const updateList = () => {
    let listCSS = "";
    
    cssProperty.forEach((data, index) => {
        listCSS += `<li>${data.num}. <strong>${data.name}</strong> : ${data.desc}</li>`;
        cssProp.push(`<li>${data.num}. <strong>${data.name}</strong> : ${data.desc}</li>`);
    });
    cssList.innerHTML = listCSS;
}
updateList();

// 반대로 정렬
function sortReverse(){
    cssProperty.reverse();
    updateList();
}

// 내림차순 정렬
function sortDescending(){
    cssProperty.sort((a,b) => {
        return b.num - a.num;
    });
    updateList();
}

// 오름차순 정렬
function sortAscending(){
    cssProperty.sort((a,b) => {
        return a.num - b.num;
    });
    updateList();
}

// 알파벳 정렬(a~z)
function sortAlphabet(){
    cssProperty.sort((prev,cur) => {
        const [upperPrev, upperCur] = [prev.name.toUpperCase(), cur.name.toUpperCase()]
        if (upperPrev > upperCur) return 1;
        if (upperPrev < upperCur) return -1;
    });
    updateList();
}

// 알파벳 정렬(z~a)
function sortAlphabetZ(){
    cssProperty.sort((prev, cur) => { 
        const [upperPrev, upperCur] = [prev.name.toUpperCase(), cur.name.toUpperCase()]
        if (upperPrev < upperCur) return 1;
        if (upperPrev > upperCur) return -1;
    });
    updateList();
}

// 반대로 정렬 클릭
document.querySelector(".btn1").addEventListener("click", () => {
    sortReverse();
});

// 내림차순 정렬 클릭
document.querySelector(".btn2").addEventListener("click", () => {
   sortDescending(); 
});

// 오름차순 정렬 클릭
document.querySelector(".btn3").addEventListener("click", () => {
    sortAscending();
});

// 알파벳 정렬(a~z) 클릭
document.querySelector(".btn4").addEventListener("click", () => {
    sortAlphabet();
});

// 알파벳 정렬(z~a) 클릭
document.querySelector(".btn5").addEventListener("click", () => {
    sortAlphabetZ();
});

// 피셔 예이츠 알고리즘
function shuffle(data) {
    for(let i=data.length-1; i>=0; i--){
        const randomIndex = Math.floor(Math.random() * (i + 1));
        // console.log(randomIndex);
        [data[i], data[randomIndex]] = [data[randomIndex], data[i]];
        cssList.innerHTML += data[i];
    }
}

document.querySelector(".btn6").addEventListener("click", () => {
    cssList.innerHTML = "";
    shuffle(cssProp);
});

원본(HTML/JS) 소스 보기

CSS 소스 보기

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

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

코딩공책📚

[Search Effect] 검색 이펙트 06

검색 이펙트 만들기 06

HTML 소스 보기

JavaScript 소스 보기

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

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Search Effect] 검색 이펙트 06

검색 이펙트 만들기 06

HTML 소스 보기

JavaScript 소스 보기

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

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바