🚩 [자바스크립트 개인 과제]

Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다. 영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다.

과제 개요

1. 순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현
2. 학습해온 자바스크립트 문법을 최대한 활용
3. 스타일링 작업하며 css 와 친해지기

필수요구사항

jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기

• JavaScript 문법 종합반에서 학습한 내용과 지난 예제문제를 참조해 보세요

TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기

영화정보 카드 리스트 UI 구현

• TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여줍니다.
• 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어갑니다.
• 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄웁니다.

영화 검색 UI 구헌

• API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 보이도록 합니다.
• 입력 후 검색버튼 클릭 시 실행되도록 합니다.

하기 기재된 Javascript 문법 요소를 이용하여 구현

문법 리스트

const와 let만을 이용한 변수 선언 필수

화살표 함수 : 하기 예시 중 1개 이상 사용

배열 메소드 : 하기 예시 중 2개 이상 사용

DOM 제어하기 : 하기 api 목록 중 2개 이상 사용하기

선택요구사항

CSS

• flex 사용하기
• grid 사용하기

웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기

대소문자 관계없이 검색 가능하게 하기

키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기

원하는 추가기능 무엇이라도 okay!

• 여러분의 챌린지는 언제나 환영합니다. 필수 요구사항이 완료되었다면, 자유롭게 추가기능을 넣어주세요.
• 단, 우선순위는 필수요구사항임을 명심해주세요!