searchEffect06 - sort(), reverse()

const searchBox = 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 = `전체 목록 갯수 :  ${data.num}`;
  });
  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(".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();
})