[PJ] 바닐라JS 영화 검색 사이트

🏆구현 화면🏆

---

사이트 링크 : https://limhyerin.github.io/Movie_Search/

TMDB api를 활용하여 영화 정보들을 가져와서 웹 페이지에 연동하고 검색창에 찾고자하는 영화의 이름을 작성하고 "Enter 키" 혹은 "검색 버튼"을 클릭하면 해당 영화만을 띄워주고 카드를 클릭했을때 해당영화에 해당하는 영화 id값을 alert 창에 띄우는 프로그램

 

🏆구현 목표🏆

---

✔️ 상단부 : 타이틀
- 로고 : 이미지 그려서 삽입

<div class="top">
    <img src="movie_green.png" class="img_movie">
</div>

- 로고 이미지 클릭시 새로고침

 

✔️ 중단부 : 검색창
- 영화 검색 텍스트, input, 부트스트랩 button 삽입

<div class="search">
    영화 검색 : <input id="user_input" onkeypress="if( event.keyCode == 13 ){search();}">
    <button id="myBtn" type="button" onclick="search()" class="btn btn-outline-light">검색</button>
</div>

- 검색 시 조건에 맞는 영화만 출력하기 위해 비우기 기능
- input 입력 후 button 클릭시 조건에 맞는 영화 검색 기능
- input 입력 후 엔터키 클릭시 버튼을 눌렀을때와 동일하게 조건에 맞는 영화 검색 기능
- 입력이 없는 상태로 버튼 혹은 엔터키를 눌렀을때 처음 화면으로 돌아가는 기능
- 대소문자 구분 없이 알맞는 결과 출력

 

✔️ 하단부 : 영화 목록
- TMDB API 연동
- 부트스트랩 cards 이용해서 TMDB에서 받아온 영화 api 정보를 담을 card 생성

<div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
    </div>
</div>

- 카드 클릭시 alert 창 띄우기(영화 id값 출력)
- 마우스를 가져다대면 애니메이션 효과 추가