-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
73 lines (60 loc) · 1.72 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// API
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280';
const API_URL =
'https://api.themoviedb.org/3/discover/movie?'
+ 'sort_by=popularity.desc'
+ '&api_key=eac537349329c3cd7865e05c6ff54915'
+ '&page=1';
const SEARCH_API =
'https://api.themoviedb.org/3/search/movie?'
+ '&api_key=eac537349329c3cd7865e05c6ff54915'
+ '&query="';
// DOM
const form = document.getElementById('form');
const search = document.getElementById('search');
const main = document.getElementById('main');
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();
}
});