728x90
검색 이펙트
이번 검색 이펙트는 filter()를 이용하여 CSS 속성의 중요도를 보여주는 효과입니다.
> 사이트 미리보기
자바스크립트
해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, updateList() 함수를 통해 해당 부분에 텍스트를 출력합니다. 클릭 이벤트는 forEach()문을 이용하여 각 버튼을 누를 때마다 작동하도록 하였으며, 매개변수를 함수로 보냅니다.
const searchList = document.querySelector(".search__list ul"); //각각의 속성이 리스트가 되어 들어갈 자리를 선택합니다.
const searchClick = document.querySelectorAll(".search_click ul li"); //중요도(별)가 적힌 각각의 리스트를 선택합니다.
const star = document.querySelectorAll(".search_click ul li a"); //중요도(별)가 적힌 각각의 a요소를 선택합니다. 이 안에 별 텍스트가 들어있습니다.
const searchInfo = document.querySelector(".search__info .num"); //구한 속성의 갯수가 표시되는 자리를 선택합니다.
//출력하기
function updateList(list){ //매개변수로 들어온 값을 list라는 (매개)변수에 저장합니다.
listCSS = ""; //리스트를 저장할 빈 문자열을 만듭니다. 이후 이곳에 리스트를 추가하여 출력합니다.
for(const data of list){ //여기서 data는 list(cssProperty)의 각 요소입니다.
starTxt = star[data.star].innerText; //data.star는 cssProperty에 들어있는 star(key)의 값입니다. 즉, star[data.star]는 data.star번째의 star(".search_click ul li a")가 되고 innerText를 이용해 텍스트(별)를 불러와 starTxt 변수에 저장하는 것입니다.
listCSS += `<li><strong>${data.name}</strong> : ${data.desc} <em>${starTxt}</em></li>`; //각각의 구역에 알맞은 변수를 넣어 li 요소로 만든 뒤, listCSS에 추가합니다.
}
searchList.innerHTML = listCSS; //searchList에 listCS를 출력합니다.
}
updateList(cssProperty); //cssProperty를 매개변수로 updateList()함수를 실행합니다.
//클릭하기
searchClick.forEach(star => { //searchClick은 하나가 아닌 여러개이기 때문에, 각각의 경우에 모두 작동할 수 있도록 forEach문을 이용합니다. 여기서 star는 searchClick이 가리키는 각각의 li들을 의미합니다.
star.addEventListener("click", () => { //요소가 클릭된 이벤트가 발생했을 때 해당 실행문을 실행합니다.
let target = 0; //target 변수를 만듭니다. 이 변수는 이후에 별의 data-star 값을 불러와 저장합니다.
let filterList = ''; // updateList에 매개변수로 보낼 변수를 만듭니다.
target = star.dataset.star; // 각각의 li의 data-star 값을 불러와 저장합니다.(0 ~ 5)
filterList = cssProperty.filter(data => data.star == target || data.star >= star.innerText.charAt()); // 여기서 data는 cssProperty의 각 정보입니다. data의 .star로 star 값을 불러와 target과 비교하고 같은 값을 불러와 매개변수로 보냅니다.
//data.star >= star.innerText.charAt()은 'n개 이상'을 출력할 조건입니다. 문자열의 첫번째 문자를 불러오는 .charAt()을 통해 'n개'의 n 값을 불러오고 n보다 큰 값을 target과 비교해 조건에 맞는 값을 불러와 변수에 저장합니다.
updateList(filterList); // filterList를 매개변수로 updateList() 함수를 실행합니다.
const searchListNum = document.querySelectorAll(".search__list ul li").length; // 출력된 리스트의 수를 구합니다.
searchInfo.textContent = searchListNum; // 리스트의 수를 해당 구역에 출력합니다.
});
});
HTML
다음은 HTML 코드입니다. 속성의 중요도 별로 리스트를 볼 수 있는 버튼인 .search_click과 해당 속성의 갯수를 보여주는 .search__info, 리스트가 만들어지는 .search__list를 만들었습니다.
<main id="main">
<div class="search__wrap">
<span>filter()를 이용하여 CSS 속성의 중요도 보여주기</span>
<h1>CSS 속성 검색하기</h1>
<div class="search_click">
<ul>
<li data-star="0"><a href="#">☆☆☆☆☆</a></li>
<li data-star="1"><a href="#">★☆☆☆☆</a></li>
<li data-star="2"><a href="#">★★☆☆☆</a></li>
<li data-star="3"><a href="#">★★★☆☆</a></li>
<li data-star="4"><a href="#">★★★★☆</a></li>
<li data-star="5"><a href="#">★★★★★</a></li>
</ul>
<ul>
<li><a href="#">1개 이상</a></li>
<li><a href="#">2개 이상</a></li>
<li><a href="#">3개 이상</a></li>
<li><a href="#">4개 이상</a></li>
</ul>
</div>
<div class="search__info">
<div>전체 속성 갯수 : <span class="num">382</span></div>
</div>
<div class="search__list">
<ul class="line"></ul>
</div>
</div>
</main>
728x90
댓글