728x90
검색 효과04
자바스크립트를 이용하여 검색효과 만들 수 있습니다. find()를 이용하여 속성을 검색하면 설명 보여주고, 속성을 클릭하면 설명을 볼 수 있습니다.
자바스크립트
검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 find()메서드를 이용하여 출력하였습니다. find() 메서드는 조건에 일치하는 배열 요소를 검색하여 요소를 반환합니다.
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"); //속성 리스트
const searchNum = document.querySelector(".search__info .num"); //속성 갯수
const searchBox = document.querySelector(".search__box input"); //검색창
const searchDesc = document.querySelector(".search__desc"); //속성 설명
//출력하기
cssProperty.map((element, index) => { //map 이용하여 출력
searchNum.innerText = index + 1; //index는 0부터 시작하므로 플러스 1
searchList.innerHTML += `${element.name}`;
});
//입력하기
searchBox.addEventListener("keyup", () => { // keyup : 어떤 키를 눌렀는지 나타내는 코드를 제공
const searchWord = searchBox.value; //사용자가 입력한 문자
//console.log(searchWord);
findProperty(searchWord); //searchWord를 findProperty() 함수에 매개변수를 이용해 보냄
});
//속성 찾기
function findProperty(searchData) {
const targetData = cssProperty.find((data) => data.name === searchData) //searchWord가 지역변수라 그냥 쓸수 없어서 매개변수로 받아옴
if (targetData == null || targetData == undefined) { //결과가 없거나 찾을 수 없다면
searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!"; //해당 문장 실행
return; //계속 실행하지 않도록 종료의 의미로 return사용
}
searchDesc.textContent = targetData.desc;
};
//버튼 클릭하면 설명 나타내기
searchList.addEventListener("click", (e) => {
findProperty(e.target.innerHTML);
});
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| Mouse Effect 06 (2) | 2022.09.29 |
|---|---|
| SEARCH Effect 05 (2) | 2022.09.29 |
| Mouse Effect 05 (3) | 2022.09.28 |
| Mouse Effect 04 (3) | 2022.09.22 |
| Mouse Effect 03 (1) | 2022.09.22 |
댓글