searchEffect06 - sort(), reverse()

const cssProperty = [   //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장
    //a
    {num:1, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
    {num:2, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
    {num:3, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
    {num:4, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
    {num:5, name:"animation-duration", desc:"animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
    {num:6, name:"animation-fill-mode", desc:"animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
    {num:7, name:"animation-iteration-count", desc:"animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
    {num:8, name:"animation-name", desc:"animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
    {num:9, name:"animation-play-state", desc:"animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
    {num:10, name:"animation-timing-function", desc:"animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다."},
    {num:11, name:"appearance", desc:"appearance 속성은 기본 양식 컨트롤이 렌더링되는 방식을 제어합니다."},

    //b
    {num:12, name:"backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
    {num:13, name:"backface-visibility", desc: "backdrop-visibility 속성은 요소 뒷면 출력 여부 설정합니다."},
    {num:14, name:"background", desc: "background 속성은 배경 속성 값을 정의합니다."}
]


const searchBox = document.querySelectorAll(".search span");    //버튼
const cssList = document.querySelector(".list ul");    //속성 리스트
const cssCount = document.querySelector(".count");  //CSS 갯수

//데이터 출력
const updataList = function(){      //updateList 함수는 웹화면에 CSS속성 리스트를 출력해준다.
    let listHTML = '';      //문자열을 받는 변수 listHTML생성

    //for문을 이용해서 cssProperty name값을 출력하세요!
    // for(let i = 0; i<cssProperty.length; i++){
    //     listHTML += `${cssProperty[i].name}`;
    // }

    //for of
    // for(let data of cssProperty){
    //     listHTML += `${data.name}`;
    // }

    //forEach
    cssProperty.forEach((data,index) => {       //CSS속성 리스트가 들어있는 cssProperty배열 순회
        listHTML += `${data.num}. ${data.name} : ${data.desc}`;    //listHTML에 템플릿리터럴 표현으로 cssProperty의 값 저장
        cssCount.textContent = `전체 목록 갯수 : ${index + 1}개`;       //최종적으로 마지막 인덱스번호+1값이 들어간다.
    });

    cssList.innerHTML = listHTML;       //cssList에 문자열 listHTML을 넣어준다.
}
updataList();   //웹화면에 CSS속성 리스트를 출력해주는 함수 호출

//반대 정렬
function reverse() {        //reverse()함수 생성
    cssProperty.reverse();  //reverse()메서드를 사용하여 cssProperty 배열에 저장된 값의 순서를 뒤집어준다. 원본데이터cssProperty값이 변경된다.
    updataList();   //뒤집힌 cssPropery값이 출력
}

//오름차순 정렬
function sortAscending() {      //sortAscending()함수 생성
    cssProperty.sort((a,b) => { //sort()메서드를 사용하여 cssProperty배열의 순서를 num의 오름차순으로 정렬
        return a.num - b.num;
    });
    updataList();
}

//내림차순 정렬
function sortDescending() {     //sortDescending()함수 생성
    cssProperty.sort((a,b) => { //sort()메서드를 사용하여 cssProperty배열의 순서를 num의 내림차순으로 정렬
        return b.num - a.num;
    });
    updataList();
}

//알페벳 정렬(a~z)
function sortAlphabet() {       //sortAlphabet()함수 생성
    cssProperty.sort((a,b) => { //sort()메서드를 사용하여 cssProperty배열의 순서를 name의 오름차순으로 정렬
        let x = a.name;
        let y = b.name;
        return x.localeCompare(y);
    })
    updataList();
}

//알페벳 정렬(z~a)
function sortAlphabetZ() {      //sortAlphabetZ()함수 생성
    cssProperty.sort((a,b) => { //sort()메서드를 사용하여 cssProperty배열의 순서를 name의 내림차순으로 정렬
        let x = a.name;
        let y = b.name;
        return y.localeCompare(x);
    })
    updataList();
}

    //반대로 버튼 클릭시 reverse()함수 호출
    document.querySelector(".btn1").addEventListener("click", () => {
    reverse();
});


//오름차순 버튼 클릭시 sortAscending()함수 호출
document.querySelector(".btn2").addEventListener("click", () => {
    sortAscending();
});

//내림차순 버튼 클릭시 sortDescending()함수 호출
document.querySelector(".btn3").addEventListener("click", () => {
    sortDescending();
});

//알파벳순(a~z) sortAlphabet()함수 호출
document.querySelector(".btn4").addEventListener("click", () => {
    sortAlphabet();
});

//알파벳순(z~a) sortAlphabetZ()함수 호출
document.querySelector(".btn5").addEventListener("click", () => {
    sortAlphabetZ();
});

 

sort(), reverse() 검색효과 사이트
sort(), reverse() 참고 사이트