[EFFECT] 검색 효과05 : sort(), reverse()를 이용하여 정렬하기

🔍 검색 효과 : sort(), reverse()를 이용하여 정렬하기

이번 시간에는 sort(), reverse() 메서드를 통해 클릭할 경우 해당 조건으로 속성을 정렬하는 실습을 해보겠습니다.
+ 추가로 랜덤으로 속성이 정렬되는 실습도 해보겠습니다......... 🥲

---

#1. HTML / CSS 설정하기

! HTML TIP !
search__click에서 li 요소에게 data-데이터명="데이터 값"을 설정합니다. => 추후 스크립트에 사용하기 위함! (클릭이벤트, 숫자 치환)

✏️ HTML 스크립트 보기

<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>CSS 전체 속성 : <span class="num">0</span></div>
        </div>

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

! CSS TIP !
버튼의 스타일 및 페이지 스타일을 설정해주시면 됩니다!

✏️ CSS 스크립트 보기

.search__click {
    margin-top: 10px;
    margin-bottom: 30px;
}

.search__click li {
    display: inline;
}

.search__click li a {
    display: inline-block;
    border: 1px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px 20px;
    margin: 5px 0;
}

.search__click li a:hover {
    background-color: var(--htmlColor);
    color: #fff;

---

#2. JAVASCRIPT : 스크립트

이번 스크립트에서는 sort(), reverse() 메서드, 그리고 매개변수를 통해 스크립트를 작업해보겠습니다.
자세한 내용은 아래의 스크립트 주석과 함께 살펴보겠습니다!!

! JAVASCRIPT TIP !
1. 재활용 함수를 설정하여 보다 스크립트를 편리하게 작성할 수 있습니다. 2. 변수명.sort(): 조건에 따라 정렬합니다.
3. 변수명.reverse(): 반대로 정렬합니다.

//cssProperty : 데이터 객체화 시키기
const cssProperty = [
    { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " },
    { num: 2, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." },
    { num: 3, name: "align-items", desc: " 교차축에서 아이템 정렬 하는 속성입니다. 주로 flex에서 item들을 정렬할 때 사용됩니다." },
    { num: 4, name: "align-self", desc: " 특정 item의 정렬을 따로 하고 싶을 때 사용합니다." },
    { num: 5, name: "all", desc: " CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값로 설정할 수 있습니다." },
    { num: 6, name: "animation", desc: " 애니메이션과 관련된 속성을 일괄적로 처리합니다." },
    { num: 7, name: "animation-delay", desc: " 애니메이션 지연 시간을 설정합니다." },
    { num: 8, name: "animation-direction", desc: " 애니메이션 움직임 방향을 설정합니다." },
    { num: 9, name: "animation-duration", desc: " 애니메이션 움직인 시간을 설정합니다." },
    { num: 10, name: "animation-fill-mode", desc: " 애니메이션이 끝난 후의 상태를 설정합니다." },
    .
    .
    .
    { num: 382, name: "z-index", desc: " 엘리먼트의 겹쳐지는 순서를 지정한다." }
];

//선택자
const cssList = document.querySelector(".search__list .line");

//데이터 출력하기
const updateList = () => {
    let listCSS = "";

    cssProperty.forEach((data, index) => {
        listCSS += `
${data.num}. ${data.name} : ${data.desc}
`
    });

    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((a,b) => {
        return a.name.localeCompare(b.name);
    });
updateList();
}

//알파벳(z-a) 정렬
function sortAlphabetZ(){
    cssProperty.sort((a,b) => {
        return b.name.localeCompare(a.name);
    });
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();
});


//랜덤 반복
//피셔 예이츠 알고리즘
//1
document.querySelector(".btn6").addEventListener("click", (e) => {
    e.preventDefault();
    for( let i=cssProperty.length-1; i>=0; i--){
        const radomIndex = Math.floor(Math.random() * (i + 1));
        // console.log(radomIndex)
        // 위까지 하고 출력하면 중복 숫자가 발생한다. 때문에
        // 객체구조분해할당을 사용하여 작업한다. = [1,2,3] = [3,2,1] : 이렇게 쓰면 중복된 숫자가 나오지 않는다.
        [cssProperty[i], cssProperty[radomIndex]] = [cssProperty[radomIndex], cssProperty[i]]; // 중복 제거... 모르면 걍 외워...
        cssProperty.innerHTML += cssProperty[i];
    }
    updateList();
});

---

#3. 결과

원본 소스 보기

원본 페이지 보기