Script Sample/Search Effect
searchEffect04 - find()
GYChoi
2022. 2. 8. 13:06
https://garenchoi.github.io/webs_class/javascript/effect/searchEffect04.html
const cssProperty = [ //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 속성은 요소 뒷면 출력 여부를 설정합니다."},
...
];
const searchBox = document.querySelector("#search-box"); //searchBox에 아이디 search-box 저장
const cssCount = document.querySelector(".count"); //cssCount에 클래스 count 저장
const cssDesc = document.querySelector(".desc"); //cssDesc에 클래스 desc 저장
const cssList = document.querySelector(".list"); //cssList에 클래스 list 저장
// CSS 속성 값/전체 갯수 출력하기
cssProperty.map((element, index) => { //cssProperty의 element, index값 설정
cssCount.innerText = "전체 목록 갯수 : "+ (index+1)+"개"; //cssCount(.count)에 "전체 목록 갯수 : "+ (index+1)+"개" 출력
cssList.innerHTML += "<span>"+element.name+"</span>"; //cssList(.list)에 "<span>"+element.name+"</span>" 출력
});
//사용자가 검색한 값
searchBox.addEventListener("keyup", () => { //searchBox에 keyup 했을 때 이벤트 설정
const searchWord = searchBox.value; //searchWord에 사용자 입력 값 저장
findProp(searchWord); //함수 findProp을 매개변수 searchWord로 실행
});
document.querySelectorAll(".list span").forEach(span => { //.list span 들을 선택
span.addEventListener("click", () => { //span 을 클릭 했을 때 이벤트 설정
//클릭한 데이터 값을 가져오기
const listProp = span.innerText; //listProp에 span의 텍스트값 저장
findProp(listProp); //함수 findProp을 매개변수 listProp 실행
})
})
function findProp(seachProp){ //매개변수(seachProp) 함수 findProp 선언
const targetData = cssProperty.find((data) => data.name === seachProp) //cssProperty의 data.name 과 매개변수(seachProp)에서 같은 값을 찾아서 targetData에 저장
//찾는 데이터가 없을 때
if(targetData == null){ //만약 targetData가 null 일 때
cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!"; //cssDesc(.desc)에 "해당 속성은 존재하지 않습니다. 다시 검색해 주세요!"출력
return;
}
cssDesc.innerHTML = targetData.desc; //cssDesc에 targetData의 decs 출력
}