searchEffect06 - sort(), reverse()

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect06.html

const cssProperty = [
            {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: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            {num: 11, name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
            ...
        ];

        const searchBox = document.querySelectorAll(".search span");	//searchBox에 클래스 search의 span 저장
        const cssList = document.querySelector(".list ul"); 		//cssList에 클래스 list의 ul 저장
        const cssCount = document.querySelector(".count");			//cssCount에 클래스 count 저장

        //데이터 출력, 전체 갯수
        const updateList = function(){		//함수 updateList 선언
            let listHTML = '';				//변수 listHTML를 '' 로 변경

            cssProperty.forEach((data,index) => {		//cssProperty의 element값을 data에 index값을 index에 저장
                listHTML += `<li>${data.num}. ${data.name} : ${data.desc}</li>`;	//listHTML에 `<li>${data.num}. ${data.name} : ${data.desc}</li>` 추가
                cssCount.innerHTML = `전체 목록 갯수 : <em>${index+1}</em>개`;		//cssCount에 `전체 목록 갯수 : <em>${index+1}</em>개` 출력
            })
            cssList.innerHTML = listHTML;		//cssList에 listHTML 출력
        }
        updateList();		//함수 updateList 실행

        //반대 정렬
        function reverse(){			//함수 reverse 선언
            cssProperty.reverse()	//cssProperty에 reverse(반대로 정렬하기) 적용
            updateList();			//함수 updateList 실행
        }
        
        //반대로 버튼 클릭 시
        document.querySelector(".btn1").addEventListener("click", () => {	//클래스 btn1을 클릭했을 때 
            reverse();				//함수 reverse실행
        })

        //오름차순 정렬
        function sortAscending(){			//함수 sortAscending 선언
            cssProperty.sort((a,b) => {		//cssProperty에 sort((a,b) => {return a.num - b.num;}) 
                return a.num - b.num;			//(오름차순 정렬) 적용
            });
            updateList();						//함수 updateList 실행
        }
        
        //오름차순 버튼 클릭 시
        document.querySelector(".btn2").addEventListener("click", () => {	//클래스 btn2을 클릭했을 때
            sortAscending();		//함수 sortAscending실행
        })

        //내림차순 정렬
        function sortDescending(){				//함수 sortDescending 선언
            cssProperty.sort((a,b) => {		//cssProperty에 sort((a,b) => {return b.num - a.num;})
                return b.num - a.num;			//(내림차순 정렬)적용
            });
            updateList();						//함수 updateList 실행
        }
        
        //내림차순 버튼 클릭 시
        document.querySelector(".btn3").addEventListener("click", () => {	//클래스 btn3을 클릭했을 때
            sortDescending();		//함수 sortDescending실행
        })
        
        //알파벳순 정렬(a~z)
        function sortAlphabet(){				//함수 sortAlphabet 선언
            cssProperty.sort((a,b) => {		//cssProperty에 sort((a,b) => {return x.localeCompare(y)})
                let x = a.name;					//변수 x에 a의 name값 저장
                let y = b.name;					//변수 y에 b의 name값 저장
                return x.localeCompare(y)		//(알파벳순 정렬a~z)적용
            });
            updateList();						//함수 updateList 실행
        }
        
         //알파벳순 버튼 클릭 시
        document.querySelector(".btn4").addEventListener("click", () => {	//클래스 btn4을 클릭했을 때
            sortAlphabet();		//함수 sortAlphabet실행
        })

        //알파벳순 정렬(z~a)
        function sortAlphabetZ(){				//함수 sortAlphabetZ 선언
            cssProperty.sort((a,b) => {		//cssProperty에 sort((a,b) => {return y.localeCompare(x)})
                let x = a.name;					//변수 x에 a의 name값 저장
                let y = b.name;					//변수 y에 b의 name값 저장
                return y.localeCompare(x)		//(알파벳역순으로 정렬z~a)적용
            });
            updateList();						//함수 updateList 실행
        }
        
         //알파벳순(z~a) 버튼 클릭 시
        document.querySelector(".btn5").addEventListener("click", () => {	//클래스 btn5을 클릭했을 때
            sortAlphabetZ();		//함수 sortAlphabetZ실행
        })