You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.7 KiB
65 lines
1.7 KiB
const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
|
|
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
|
|
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&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()
|
|
}
|
|
}) |