Search Effect06 - sort( ) / reverse( )

const cssProperty = [
    {num:"1", name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
    {num:"2", name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
    {num:"3", name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
    //중략...  
]

const searchBox = document.querySelectorAll(".search span");    //검색버튼(#search_box)을 변수(searchBox)에 저장
const cssList = document.querySelector(".list ul");    //속성의 리스트를 변수(cssList)에 저장
const cssCount = document.querySelector(".count");    //전체 속성 갯수(.count)를 변수(cssCount)에 저장

// 데이터 출력, 갯수 출력
const upDataList = function(){
    let listHTML = '';
    let countHTML = '';

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

    cssProperty.forEach((data,index) => {
        listHTML +=`<li>${data.num}. ${data.name} : ${data.desc}</li>`;
        countHTML = index + 1
    })
    cssList.innerHTML = listHTML
    cssCount.innerHTML = countHTML;
}
upDataList();

//반대 정령
function reverse(){
    cssProperty.reverse();
    upDataList();
}

//오름차순 정렬
function sortAscending(){
    cssProperty.sort((a,b) => {
        return a.num - b.num;
    });
    upDataList();
}

//내림차순 정렬
function sortDescending(){
    cssProperty.sort((a,b) => {
        return b.num - a.num;
    });
    upDataList();
}

//알페벳 정렬(a~z)
function sortAlphabet() {
    cssProperty.sort((a,b) => {
        let x = a.name;
        let y = b.name;
        return x.localeCompare(y);
    })
    upDataList();
}

//알페벳 정렬(z~a)
function sortAlphabetZ() {
    cssProperty.sort((a,b) => {
        let x = a.name;
        let y = b.name;
        return y.localeCompare(x);
    })
    upDataList();
}

 //반대로 버튼 클릭시
 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();
});

• sort( ) / reverse( ) 참조
• forEach문 참조