const searchBox = document.querySelectorAll(".search span") //버튼 const cssList = document.querySelector(".list ul") //속성 리스트 const cssCount = document.querySelector('.count') // 데이터 출력 const updateList = function () { let listHTML = ''; cssProperty.forEach((data, index) => { listHTML += `${data.num}. ${data.name} : ${data.desc}`; cssCount.innerHTML = `전체 목록 갯수 : ${data.num}`; }); cssList.innerHT..
const searchBox = document.querySelectorAll(".search span"); const cssList = document.querySelector(".list ul"); const cssCount = document.querySelector(".count em"); let listHTML = ""; //목록 보여주기 function updataList(list){ listHTML = ""; for(const data of list){ listHTML += `${data.name} : ${data.desc} ${data.view}`; } cssList.innerHTML = listHTML; } updataList(cssProperty); //버튼 클릭하기 searchBox...
const searchBox = document.querySelector('#search-box'); const cssCount = document.querySelector('.count'); const cssDesc = document.querySelector('.desc'); const cssList = document.querySelector('.list'); cssProperty.map((ele, idx) => { cssCount.innerText = "전체 목록 갯수 : " + (idx + 1) + "개"; cssList.innerHTML += "" + ele.name + ""; }) searchBox.addEventListener("keyup", () => { const searchWord =..
const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //모든 데이터 보이기 cssList.forEach((li, index) => { li.classList.add("show"); cssCount.innerText = index; }) //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다. //searchBox.addEventListener is not a function searchBox.forEac..
const searchBox = document.querySelector("#search-box"); const cssList = document.querySelectorAll(".list ul li"); const cssCount = document.querySelector(".count em"); cssList.forEach((element, index) => { // 모든 cssList를 보임처리한다. element.classList.add("show"); console.log(index); cssCount.innerHTML = index + 1; // 전체속성갯수를 카운트한다. }); searchBox.addEventListener("keyup", () => { const searchWord = ..
const searchBox = document.querySelector("#search-box");//search-box 저장 const cssList = document.querySelectorAll(".list ul li");//모든 li선택 searchBox.addEventListener("keyup", () => {//키를 눌렀을 때 실행 const searchWord = searchBox.value; //입력한 값 저장 // console.log(searchWord) cssList.forEach(el =>{//모든 li 리스트 출력 console.log(el.dataset.name) const cssName = el.dataset.name; //CSS 속성 값을 변수에 저장 if(cssName..