-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
62 lines (53 loc) · 1.89 KB
/
index.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
const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=e97b5be27544e99801103a609ef426b6&page=1'
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
const SEARCH_URL = 'https://api.themoviedb.org/3/search/movie?api_key=e97b5be27544e99801103a609ef426b6&query="'
const form = document.getElementById('form')
const searchBox = document.getElementById('search-box')
const searchBtn = document.getElementById('search-btn')
const movieColumn = document.getElementById('movie-column')
const watchlistBtn = document.querySelector('.watchlist-btn')
getMovies(API_URL)
async function getMovies(url) {
const response = await fetch(url)
const data = await response.json()
console.log(data.results)
renderMovies(data.results)
}
function renderMovies(movies) {
movieColumn.innerHTML = ''
movies.forEach(movie => {
const { title, poster_path, vote_average, overview} = movie
movieColumn.innerHTML += `
<div class="movie">
<!-- Movie Image -->
<img src="${IMG_PATH + poster_path}" />
<!-- Movie Description -->
<div class="movie-description">
<div class="movie-title">
<h3>${title}</h3>
<img src="./imgs/star Icon.png" />
<span class="rating">${vote_average}</span>
</div>
<div class="movie-details">
<span class="duration">177 min</span>
<span class="genre">Action</span>
<span class="watchlist-btn">
<img src="./imgs/add Icon.png" />
Watchlist </span>
</div>
<p>${overview}</p>
</div>
`
});
}
form.addEventListener('submit', (event) => {
event.preventDefault()
const searchValue = searchBox.value
if(searchValue && searchValue !== ''){
getMovies(SEARCH_URL + searchValue)
console.log(searchValue)
searchBox.value = ''
} else {
window.location.reload()
}
})