목차

1. 프로젝트 소개 - 개요, 기간, 목표
2. 개발 환경
3. 프로젝트 화면 구성 및 기능
   
   
   

Top20 Movies🍿

TMDB에서 받아온 Top Rated 데이터를 카드 형태의 데이터로 보여줍니다.

상위 20위 영화 정보가 담긴 카드들 중 원하는 영화 제목을 검색하여 카드를 선별할 수 있습니다.

2024.01.05 ~ 2024.01.07 (3일간)

검색 사이트의 메인 기능인 검색 기능을 오류 없이 구현하는 것이 가장 큰 목표였습니다.

필수 구현 기능을 최대한 완성하고, 선택 구현 사항을 적극 활용하여 UI 디자인 적으로도 완성도 높은 사이트를 구현하고자 하였습니다.

• environment : Visual Studio Code, git, github
• development : HTML5, CSS3, Javascript
• API : TMDB open API
  
  
  

1. 바닐라 자바스크립트 사용하기

2. TMDB 오픈 API 인기영화 데이터 가져오기

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

4. 영화 검색 UI 구현

5. 반드시 포함할 JS 문법 요소

   • const, let (var X)
   • 화살표 함수
   • 배열 메소드 2개 이상(forEach, map, filter, reduce, find)
   • DOM 제어 api목록 2개 이상(목록 생략)

1. CSS : flex 혹은 grid 사용하기

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

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

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

5. 메인 로고 클릭 -> 스크롤 최상단으로 부드럽게 이동

6. 검색 유효성 검사

• 입력값이 없는 경우 : 검색어를 입력해주세요. alert 생성
• 검색값을 포함한 영화카드가 없는 경우 : 검색 결과가 없습니다. alert 생성, 페이지 새로고침

7. 카드 hover

• 배경색, 세로 길이 확장

8. 메인 로고 hover

• 크기 커짐

9. 영화 내용을 카드 높이에 맞춰 숨기기

• 커서 올리면 hover 세로길이 확장에 맞추어 내용 전체 오픈됨

10. footer copyright 추가

11. input 입력칸에 커서 자동 배치

• 페이지 새로고침 시
• 검색어가 없는 경우 생성된 alert을 닫을 시

12. 커서를 pointer로 바꾸기

• 카드에 커서를 올릴 경우
• 메인 로고에 커서 올릴 경우