검색 효과 6

검색 이펙트

이번 검색 이펙트는 sort(), reverse()를 이용하여 정렬하기 효과입니다.

> 사이트 미리보기

원본 소스 보기

자바스크립트

해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이번에는 추가적으로 num이라는 키값에 1~382의 숫자를 저장하여 순서를 정해주었습니다. 정렬 버튼을 누를 때마다 리스트에 sort(), reverse()를 이용해 각 버튼의 내용처럼 정렬되어 출력하도록 하였습니다. 랜덤정렬은 피셔에이츠 알고리즘을 이용하였습니다.

const cssList = document.querySelector(".search__list .line");
        
// 데이터 출력하기
const updateList = () => {
    let listCSS = "";

    cssProperty.forEach((data, index)=>{
        listCSS += `<li>${data.num}. <strong>${data.name}</strong> : ${data.desc} <em>[${data.category}]</em></li>`;
    });

    cssList.innerHTML = listCSS;
}
updateList();

// 반대로 정렬
function sortReverse(){
    cssProperty.reverse();
    updateList();
}
// 오름차순 정렬
function sortAscending(){
    cssProperty.sort((a,b)=>{
        return a.num - b.num;
    });
    updateList();
}
// 내림차순 정렬
function sortDescending(){
    cssProperty.sort((a,b)=>{
        return b.num - a.num;
    });
    updateList();
}
// 알파벳순[a-z] 정렬
function sortAlphabet(){
    cssProperty.sort((a,b)=>{
        return a.name.localeCompare(b.name);
    });
    updateList();
}
// 알파벳순[z-a] 정렬
function sortAlphabetZ(){
    cssProperty.sort((a,b)=>{
        return b.name.localeCompare(a.name);
    });
    updateList();
}

let cssProp = [];
const updateList2 = ()=>{
    //for of문
    // for(let list of cssProperty){
    //     cssProp.push(`<li>${list.num}. [${list.category}] <strong>${list.name}</strong> : ${list.desc}</li>`);
    // }
    
    //map()문
    cssProperty.map((data)=>{
        cssProp.push(`<li>${data.num}. <strong>${data.name}</strong> : ${data.desc} <em>[${data.category}]</em></li>`);
    });

    cssList.innerHTML = cssProp.join('');
}
updateList2();
//피셔 에이츠 알고리즘(랜덤정렬)
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(".btn1").addEventListener("click",()=>{
    sortReverse();
});
// 오름차순 정렬 클릭
document.querySelector(".btn2").addEventListener("click",()=>{
    sortAscending();
});
// 내림차순 정렬 클릭
document.querySelector(".btn3").addEventListener("click",()=>{
    sortDescending();
});
// 알파벳순[a-z] 정렬 클릭
document.querySelector(".btn4").addEventListener("click",()=>{
    sortAlphabet();
});
// 알파벳순[z-a] 정렬 클릭
document.querySelector(".btn5").addEventListener("click",()=>{
    sortAlphabetZ();
});
// 랜덤정렬 클릭
document.querySelector(".btn6").addEventListener("click", (e)=>{
    e.preventDefault();
    cssList.innerHTML= "";
    shuffle(cssProp);
});

HTML

다음은 HTML 코드입니다. 각각의 정렬방법을 버튼으로 만들었습니다. 리스트는 스크립트를 이용해 line이라는 ul태그에 넣도록 만들었습니다.

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

        <div class="search_click">
            <ul>
                <li class="btn1"><a href="#">반대로 정렬하기</a></li>
                <li class="btn2"><a href="#">오름차순 정렬하기</a></li>
                <li class="btn3"><a href="#">내림차순 정렬하기</a></li>
                <li class="btn4"><a href="#">알파벳순[a-z] 정렬하기</a></li>
                <li class="btn5"><a href="#">알파벳순[z-a] 정렬하기</a></li>
                <li class="btn6"><a href="#">랜덤 정렬하기</a></li>
            </ul>
        </div>

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

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