개인 프로젝트 - 인기 영화 콜렉션: 검색 기능, alert창 띄우기,hover

검색기능

필터 메소드를 사용하여 만들었다.

function filterList(){
	const searchInput=document.querySelector('#search-input')
    //search-input 아이디로 요소를 선택하는 searchInput 함수
    const filter = searchInput.value.toLowerCase();
    //value 속성으로 입력 글자를 모두 소문자로 바꾼다.
    const listItems = document.querySelectorAll('.movie-card');

 

listItems.forEach((movieCard) => {
	let title = movieCard.querySelector('.movie-card h2').textContent.toLowerCase()
    if(title.includes(filter)){
    	movieCard.style.display ='';
    } else {
    	movieCard.style.display='none';
    }
 })

listItems 배열의 항목들을 forEach 메서드를 사용해서 반복한다. 

querySelector메서드를 사용하여 movie-card 내의 title 요소를 선택한다. 

textContent: title 요소의 text를 소문자로 바꾼다.

if, 소문자로 변환된 title이 filter에 저장된 검색어를 포함하는지(includes메서드)  확인

else, 검색어를 포함하지 않을 경우 display=none

window.addEventListener('load',MovieCards)
document.querySelector('#search-btn').addEventListener('click',filerList)

document.querySelctor('#search-form').addEventListener('submit',fuction(event){
	event.preventDefault();
    filterList();
 });

load 이벤트가 발생하면 MovieCards 함수를 호출한다. 

검색버튼을 click하면 filterList함수를 호출한다. ( 사용자가 검색 버튼을 클릭했을 때, 영화카드를 필터링)

 

---

alert:id

document.addEventListener('click',function(event) {
	const clickedElement = event.target;
    if (clickedElement.tagName === 'IMG' && clickedElement.parentNode.classList.contains('movie-card')) {
    	const movieID= clickedElement.getAttribute('id');
        alert('영화 ID: ' + movieID);
    }
    })

문서에서 click 이벤트가 발생했을 때, 함수 실행

clickedElement라는 변수에 클릭이벤트 요소에 할당한다. (target: 클릭된 요소)

tagName이 IMG 이고 부모요소에 movie-card가 있는지 확인하고 맞다면 movieID 변수에 클릭된 이미지의 id값을 할당한다.

그리고 그 id 값을 alert 창으로 띄운다.

 

---

hover:영화정보

추가 기능으로 영화카드에 정보를 바로 써놓는게 아니라 영화카드에 마우스를 hover하면 정보가 나타나는 기능을 만들어 보았다.

const movieCards = document.querySelectorAll('.movie-card');

movieCards.forEach(movieCard => {
	const poster = movieCard.querySelctor('.poster-container')
    const movieInfo = movieCard.querySelector('.movie-info');
    
    posterContainer.addEventListener('mouseenter',() -> {
    	poster.style.filter='grayscale(100%)'
        info.style.opacity='1'
    })
    
    posterContainer.addEventListener('mouseleave',() => {
    	poster.style.filter=''
        info.style.opacity='0'
    })
    })

movie-card의 모든 요소를 선택해서  movieCards변수에 할당한다.

forEach문을 사용하여 movieCards배열의 각 요소에 대해 반복한다.

영화 카드 내에서 클래스가 poster-container인 요소를 선택하고 posterContainer 변수에 할당한다.

또, 영화 카드 내에서 클래스가 movie-info인 요소를 선택하고  movieInfo변수에 할당한다.

mouseenter이벤트를 이용해 포스터컨테이너에 마우스가 진입했을 때, 이 메서드가 실행된다.

포스터에 흑백효과를 적용하고, 정보를  표시한다.

mouseleave이벤트가 발생하면 마우스가 빠져나갈때, 흑백 효과를 제거하고 영화 정보를 숨긴다. 

---

피드백 

1. 자바스크립트 파일을 따로 분리해서 구현하면 가독성이나 유지 보수 측면에서 더 좋을 것

2. 코딩을 할 때, 컨벤션도 아주 중요한 요소 중 하나이다. 변수에는 camelCase사용한다던가, css나 class,id 등에는 kebab-case를 사용하기