-
Notifications
You must be signed in to change notification settings - Fork 0
/
comedy.js
69 lines (51 loc) · 1.5 KB
/
comedy.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
// API Credentials
// apiKey and apiHost needed to call the movie API
const apiKey = '0803485a36msh3ba90d2d2756c7ep188014jsn6cf16a906b51';
const apiHost = 'online-movie-database.p.rapidapi.com';
async function getMovies() {
// API request
// Search for comedy movies
const url = 'https://online-movie-database.p.rapidapi.com/auto-complete?q=comedy%20movie';
// Make API request
// key and host
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': apiHost
}
};
// Make request and parse response
const response = await fetch(url, options);
const data = await response.json();
// Extract movie data
const movies = [];
// Get movie name, title and poster if avaialable (took me a good 2 hours to realize)
data.d.forEach(movie => {
const name = movie.l;
const poster = movie.i?.imageUrl;
// Add to list
movies.push({
name,
poster
});
});
return movies;
}
// Display movies
function displayMovies(movies) {
const movieContainer = document.querySelector('.movies'); // Get container
// Loop through movies
movies.forEach(movie => {
const movieElement = document.createElement('div'); // Create HTML
movieElement.innerHTML = `
<img src="${movie.poster}" alt="${movie.name}">
<h3>${movie.name}</h3>
`;
movieContainer.appendChild(movieElement);
});
}
// Initial call to fetch and show movies
getMovies().then(movies => {
displayMovies(movies);
});