Search Effect 05 - filter()

const cssProperty = [
    {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."},
    {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
    {view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
    {view: "19", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
    {view: "24", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
    {view: "35", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
    {view: "48", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터 효과를 설정합니다."},
    {view: "50", name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부를 설정합니다."},
    {view: "33", name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."},
    {view: "9", name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
    {view: "11", name: "display", desc: "display는 요소를 어떻게 보여줄지 결정합니다"},
    {view: "28", name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."}
];

 const searchBox = document.querySelectorAll(".search span");		// 버튼을 searchBox라는 변수에 저장
 const cssList = document.querySelector(".list ul");					// 속성값들을 cssList에 저장
 const cssCount = document.querySelector(".count em"); 			// 전체 갯수

// 목록 보여주기
        function updateList(list){
            let listHTML = "";
            for(let data of list){
               listHTML += `<li>${data.name} : ${data.desc} <span>${data.view}</span></li>`;
            }
            cssList.innerHTML = listHTML;
        }
        updateList(cssProperty);


// 처음 혼자 했을 때
        
    // searchBox.forEach(span => {
    //     span.addEventListener("click", () => {
    //         const filterView = cssProperty.filter(data => data.view >=span.dataset.view)
    //         updateList(filterView);
    //     })
    // })


// 선생님이랑 같이 했을 때
    searchBox.forEach(span => {
        span.addEventListener("click", () => {		// 각각의 버튼을 클릭했을 때
            const target = span.dataset.view;		// 버튼의 view값을 target으로 설정
            const filterList = cssProperty.filter(data => data.view >= target)		// targer과 data.view값을 비교하여 filter
               
            updateList(filterList);		// 필터된 값들을 함수로 보냄.
        })
    })


 

  
  // CSS 리스트 출력하기
  function upDataList(){		// upDataList 함수는
      let list = "";				// list에 "" 입력
      
      for (let i of cssProperty){						// forOf()으로 cssProperty에 요소값 중 name만 출력
          list += `<li>${i.name} : ${i.desc} <span>${i.view}</span></li>`;   
          
      // cssProperty.forEach(el => {					// forEach()로 cssProperty에 요소값 중 name만 출력
      //     list += "<li>" + el.name + "</li>"
      // })

      // cssProperty.map(el => {						// map()으로 cssProperty에 요소값 중 name만 출력
      //     list += "<li>" + el.name + "</li>"
      // })

      // for (let i=0; i<cssProperty.length; i++){		// for()으로 cssProperty에 요소값 중 name만 출력
      //     list += "<li>" + cssProperty[i].name + "</li>"
      // }
      }
      cssList.innerHTML = list;		// list값을 cssList에 뿌려줌.
  }
  upDataList();					// 함수 실행


 // view 값만 출력해 보세요.
       
  //    for (let i=0; i<cssProperty.length; i++){
  //        console.log(cssProperty[i].view);
  //    }

  //    cssProperty.forEach(el => {
  //        console.log(el.view);
  //    });

  //    cssProperty.map(el => {
  //        console.log(el.name);
  //    });

  // for of

  // for (let i of cssProperty) {
  //     console.log(i.view)
  // }

filter()참고

전체 사이트 보기