[miniProjects] 17_Movie App

17_Movie App

💻 주제 : API를 활용한 영화 소개 페이지.

• TMDB의 API를 사용해 영화 제목, 등급, 이미지가 있는 영화 데이터베이스를 받는다.
  
  ❗ https://www.themoviedb.org/settings/api
• UI(HTML, CSS)를 만들고, API 키를 IMDB 서비스에 등록한다.
• JavaScript를 추가해 Fetch 요청을 만들어 당시 가장 인기 있었던 영화를 보여줄 데이터를 얻는다.
• 8 이상 : 초록 | 5 ~ 8 : 주황 | 5 이하 : 빨강
• 검색기능을 통해 제목 검색 가능

const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=ae312a16848ed5ab44faf6aeb5640fa5&page=1';
const IMG_PATH = 'https://image.tmdb.org/t/p/w500';
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=ae312a16848ed5ab44faf6aeb5640fa5&query="';

const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');

// Get initial movies
getMovies(API_URL);

async function getMovies(url) {
    const res = await fetch(url);
    const data = await res.json();

    showMovies(data.results);
}

function showMovies(movies) {
    main.innerHTML = ''

    movies.forEach((movie) => {
        const { title, poster_path, vote_average, overview } = movie;

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

        movieEl.innerHTML = `
            <img src="${IMG_PATH + poster_path}" alt="${title}">
            <div class="movie-info">
          <h3>${title}</h3>
          <span class="${getClassByRate(vote_average)}">${vote_average}</span>
            </div>
            <div class="overview">
          <h3>Overview</h3>
          ${overview}
        </div>
        `
        main.appendChild(movieEl);
    })
}

function getClassByRate(vote) {
    if(vote >= 8) {
        return 'green';
    } else if(vote >= 5) {
        return 'orange';
    } else {
        return 'red';
    }
}

form.addEventListener('submit', (e) => {
    e.preventDefault()

    const searchTerm = search.value

    if(searchTerm && searchTerm !== '') {
        getMovies(SEARCH_API + searchTerm)

        search.value = '';
    } else {
        window.location.reload();
    }
})