[내일배움캠프] 개인 과제 영화 사이트 -바닐라스크립트로 제작-2

영화카드를 선택하면 영화의 id를 alert하는 기능을 구현해야한다.

 function select(id) {
                alert(`영화 id: ${id}`);
            }

id값을 매게변수로 alert하는 함수를 만든다.

let temp_html = `<div class="flip-box" onclick="select(${id})">

카드의 요소를 전부 담고 있는 div에 onclick으로 함수를 실행하도록 설정한다.

 

결과물

 

영화를 검색기능 구현하기

 <div class="search">
        <label>Search : </label>
        <input type="text" id="search-input" placeholder="Input The movie" />
        <input type="button" class="img-button" id="search-btn" onclick="search()"></button>
    </div>

영화를 검색할 수 있도록 input칸과 버튼을 만든다. 버튼을 클릭하면 검색한 영화를 불러오는 search()함수를 실행한다.

 

function search() {
                const search_Input = document.querySelector('#search-input');//검색 값을 가져온다.//
                const search_word = search_Input.value.toLowerCase();//검색 값을 소문자화 시킨다.//
                const movie_list = document.querySelectorAll('.movie_title');//영화 카드를 깡그리 가져온다.//

                movie_list.forEach((a) => {
                    const movie_title = a.querySelector("#movie_title").textContent.toLowerCase();//가져온 영화제목을 전부 소문자화 한다.

                    if (movie_title.indexOf(search_word) !== -1) {//검색값과 영화의 제목이 일치하는게 있다면 스타일 display css를 block으로 전환//
                        a.style.display = 'block'
                    }
                    else {
                        a.style.display = 'none'//검색값과 같은게 없다면 스타일 display css를 none으로 전환//
                    }
                })
            }

document.querySelector로 검색값을 가져온다. 

search_Input.value.toLowerCase()로 검색한 값을 전부 소문자화 한다.

document.querySelectorAll로 필터를 적용할 영화 데이터를 가져온다.

 

querySelectorAll로 가져온 영화의 데이터를 forEach()로 제목을 소문자화 한다.

indexOf로 검색한 제목이 있다면 !==-1의 조건을 통해서 display 속성 'block'을 부여한다. 아니라면 'none'을 부여한다.