searchEffect - 06

스크립트를 이용한 서치효과 만들기 06

스크립트를 이용하여 CSS 태그를 검색하는 효과를 만들 수 있습니다.

원본 소스 보기

Script

const cssList = document.querySelector(".search__list .line");
let cssProp = [];
//데이터 출력하기
const updateList = () => {

    let listCSS = "";

    cssProperty.forEach((data, index) => {
        listCSS += `<li> ${data.num}. ${data.name} : ${data.desc} </li>`;
        cssProp.push(`<li>${data.num}. ${data.name} : ${data.desc}</li>`);
    });
    cssList.innerHTML = listCSS;

}
updateList();

//반대로 정렬 클릭
document.querySelector(".btn1").addEventListener("click", () => {
    cssProperty.reverse();
    updateList();
});

//오름차순 정렬 클릭
document.querySelector(".btn2").addEventListener("click", () => {
    cssProperty.sort((a,b) => {
        return a.num - b.num;
    });
    updateList();
});

//내림차순 정렬 클릭
document.querySelector(".btn3").addEventListener("click", () => {
    cssProperty.sort((a,b) => {
        return b.num - a.num;
    });
    updateList();
});

// 알파벳(a-z) 정렬
function sortAlphabet() {
    cssProperty.sort(function (a, b) {
        if (a.name > b.name) return 1;
        else if (a.name < b.name) return -1;
        else return 0;
    });
    updateList();
}
// 알파벳(z-a) 정렬
function sortAlphabetZ() {
    cssProperty.sort(function (a, b) {
        if (a.name < b.name) return 1;
        else if (a.name > b.name) return -1;
        else return 0;
    });
    updateList();
}
// 알파벳(a-z) 정렬
document.querySelector(".btn4").addEventListener("click", () => {
    sortAlphabet();
});
// 알파벳(z-a) 정렬
document.querySelector(".btn5").addEventListener("click", () => {
    sortAlphabetZ();
});

//피셔 에이츠 알고리즘

document.querySelector(".btn6").addEventListener("click", (e) => {

function shuffle(data){
    for(let i=data.length-1; i>=0; i--){
        const randomIndex = Math.floor(Math.random() * (i + 1));
        // console.log(randomIndex)
        [data[i], data[randomIndex]] = [data[randomIndex], data[i]];    //중복되는걸 방지 - 배열구조분해할당
        cssList.innerHTML += data[i];
    }
}
    e.preventDefault();
    cssList.innerHTML = ""; //클릭하면 비워줌
    shuffle(cssProp)       // 섞어서 데이터 전달
})