Search Effect06 - sort( ), reverse( )

const cssProperty = [
  	{num: 1, name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."},
  	{num: 2, name: "align-items", desc: "align-items 속성은 <div> 요소의 수직 방향 정렬 방식을 설정합니다."},
  	{num: 3, name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."},
    {num: 4, name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
    {num: 5, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
    {num: 6, name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
    {num: 7, name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
    {num: 8, name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
    {num: 9, name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
    {num: 10, name: "animation-iteraction-count", desc: "animation-iteraction-count 속성은 애니메이션의  설정합니다."},
    {num: 11, name: "animation-name", desc: "animation-name 속성은 애니메이션의 키프레임의 이름을 설정합니다."},
    {num: 12, name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의  설정합니다."},
    {num: 13, name: "animation-timing-function", desc: "animation-timing-function 속성은 움직임의 속도를 정의합니다."},
    {num: 14, name: "appearance", desc: "appearance 속성은 appearance기본 양식 컨트롤이 렌더링되는 방식을 제어합니다."}
];

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

//데이터 출력
const updateList = function(){
	let listHTML = '';

    cssProperty.forEach((data, index) => {
    	listHTML += `${data.num}. ${data.name} : ${data.desc}`;
        cssCount.innerHTML = `전체 목록 개수 : ${index+1}개`;
        })
        cssList.innerHTML = listHTML;
    }
    updateList();

    //반대 정렬
    function reverse(){
        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) => {
            let x = a.name
            let y = b.name
            return x.localeCompare(y);
        })
        updateList();
    }

    //알파벳 정렬(z~a)
    function sortAlphabetZ(){
        cssProperty.sort((a,b) => {
            let x = a.name
            let y = b.name
            return y.localeCompare(x);
        })
        updateList();
    }
    //반대로 버튼 클릭시
    document.querySelector(".btn1").addEventListener("click", () => {
        reverse();
    })

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

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

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

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

sort( ), reverse( ) 참고