ss SEARCH Effect 05
본문 바로가기
JAVASCRIPT Effect

SEARCH Effect 05

by 꿈나무개발 2022. 9. 29.
728x90

검색 효과05

자바스크립트를 이용하여 검색효과 만들 수 있습니다. filter()를 이용하여 속성의 중요도를 보여줍니다.

원본 소스 보기 원본 사이트 보기

자바스크립트

검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 filter()메서드를 이용하여 출력하였습니다. filter() 메서드는 조건에 일치하는 배열 요소를 검색하여 배열로 반환합니다. 

const cssProperty = [    //배열 속의 객체 형태로 속성 정보 저장
    { name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다." },
    { name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다." },
    { name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다." },
    { name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다." },
    { name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다." },
    { name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다." },
    { name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다." },
    { name: "animation-name", desc: "animation-name 속성은 애니메이션 키프레임 이름을 설정합니다." },
    { name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행상태를 설정합니다." },
    { name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다." },
    { name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부 설정합니다." },
    { name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다." },
    { name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다." },
    { name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다." },
    { name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다." },
    { name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다." },
];
const searchList = document.querySelector(".search__list ul");  // 각각의 속성이 들어갈 자리
const searchClick = document.querySelectorAll(".search__click ul li");  // 우리가 클릭하는 list
const star = document.querySelectorAll(".search__click ul li a");   // 별, 조건
const searchInfo = document.querySelector(".search__info .num");  //  속성 갯수

let count = 0;  //갯수 세기

// 출력하기
function updatelist(list) {
    listCSS = "";   //리스트를 저장할 곳

    for (const data of list) {  //for of문 
        starList = star[data.star].innerText;   //cssProperty에 있는 star의 값 starList에 저장

        count++;    //갯수 카운트

        listCSS += `<li>${data.name} : ${data.desc} <em>${starList}</em></li>`; //속성의 이름, 설명, 별을 li와 em 태그를 만들어 비어있는 listCSS에 저장
    }
    searchInfo.innerHTML = count; //속성 갯수에 count 저장
    count = 0;

    searchList.innerHTML = listCSS; //비어있는 searchList에 listCSS 출력
}
updatelist(cssProperty);

// 클릭하기
searchClick.forEach((star, index) => {  //클릭하는 곳이 여러곳이기 때문에 forEach문 사용
    star.addEventListener("click", () => {

        //console.log(index) => 별 클릭 index 확인

        filterList = cssProperty.filter(data => data.star == index || data.star >= star.innerText.charAt()); //별 클릭했을 때 -> index 이용 || 조건 클릭했을 때 -> charAt() 사용

        updatelist(filterList);
    });
});
728x90
반응형

'JAVASCRIPT Effect' 카테고리의 다른 글

PARALLAX Effect 06  (2) 2022.09.29
Mouse Effect 06  (2) 2022.09.29
SEARCH Effect 04  (4) 2022.09.28
Mouse Effect 05  (3) 2022.09.28
Mouse Effect 04  (3) 2022.09.22

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바