개인 프로젝트 - 인기 영화 콜렉션: tmdb에서 영화정보 가져와서 영화카드 만들기

필수사항 1. tmdb에서 영화 정보 가져와서 영화 포스터, 상세정보, 평점을 나타내는 영화카드 만들기

필수사항 2. 검색 기능

필수사항 3. 포스터를 누르면 영화의 id를 나타내는 alert 창 만들기

선택사항 : css 

자-시작 ㅋㅋ

 

---

const key = "my api key"

- 영화 카드 만들기

tmdb 에서 api 키를 발급 받아와서 주간 인기 영화 api를 가져왔다.

 

이제 영화 카드가 있는 부분의 div 를 만들고 이름은 ' movie-card'로 설정할 것이다.

const card = document.createElement('div');
card.classList.add('movie-card');

그리고 또 다시 poster-container 라는 그 자식 요소를 만들 것 movie-card에는 무비카드 전체가 들어가고, poster-container에는 무비카드 하나가 들어간다. 

const posterContainer = document.createElement('div')
posterContainer.classList.add('poster-container')

 

포스터(img), 제목(h2), 영화 상세정보(p), 평점(p)을 가져와야 한다.

const poster = document.createElement('img')
poster.alt=movie.title|| movie.name
// 영화의 상세정보에 title이라고 되어있는 것과 name이라고 되어있는 영화들이 섞여있어서 title이라고 되어있지 않으면 name을 가져오는 방식
poster.setAttribute('id',movie.id)
card.appendChild(poster)
//setAttribute라는 메서드를 사용해서 card 에 id라는 요소 추가 (movie.id)
//poster를 card에 추가합니다.

 

const movieInfo = document.createElement('div');
movieInfo.classList.add('movie-info');

const overview = document.createElement('p');
overview.textContent = movie.overview;
movieInfo.appendChild(overview);

const voteAverage = document.createElement('p');
voteAverage.textContent = `평점: ${movie.vote_average}`;
 movieInfo.appendChild(voteAverage);

// movie-info라는 div요소, 그 하위에 overview라는 p요소, voteAverage라는 p요소를 추가한다.

const title = document.createElement('h2');
title.textContent = movie.title || movie.name;
card.appendChild(title);

//아이디값에 title을 찾고 title이 아니면 name값을 찾아서 h2요소로 넣기