목록Script Sample/search effect (6)
초짜코딩의 잡동사니
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}`; }); cssLis..
searchEffect05 - filter()
{ const searchBox = document.querySelectorAll(".search span"); // 버튼들 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 let listHTML = ""; //지역변수에서 전역변수로 변경 // 목록 보여주기 function updataList(list) { let listHTML = ""; //함수 실행시 목록 초기화 for (const data of list) { listHTML += `${data.name} : ${data.desc} : ${data.view}`; //데이터 nam..
searchEffect03 - charAt()
{ const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //CSS속성 리스트 const cssCount = document.querySelector(".count em") //속성 갯수 //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다. //searchBox.addEventListener is not a function // searchBox.addEventListener("click", function(){ // alert("ddd"); // }); cssList.forEach((li, index) => { li.clas..
searchEffect04 - find()
{ const searcBox = document.querySelector("#search-box"); //검색하기 const cssCount = document.querySelector(".count"); //전체 목록 갯수 const cssdesc = document.querySelector(".desc"); //설명 const cssList = document.querySelector(".list"); //리스트 // CSS 속성 값/전체 갯수 출력하기 cssProperty.map((element, index) => { cssCount.innerText = "전체 목록 갯수" + (index + 1) + "개"; cssList.innerHTML += "" + element.name + ""; }) ..
searchEffect02 - includes()
const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); //.count em 변수에 저장 cssList.forEach((element, index) => { element.classList.add("show"); cssCount.innerHTML = index + 1; }) searchBox.addEventListener("keyup", () => { //input을 클릭했을 때 이벤트 설정 co..
searchEffect01 - indexOf()
const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 변수에 저장 cssList.forEach(el => { //다수의 li에 적용 //console.log(el.dataset.name) const cssName = el.dataset.name; // CSS 속성 값을 변수에..