/
script.js
150 lines (127 loc) · 4.5 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
// API key for The Movie Database
const apiKey = "04c35731a5ee918f014970082a0088b1";
//API key added for example purposes above !
// URLs for different API endpoints
const URL =
"https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
const imgURL = "https://image.tmdb.org/t/p/w1280";
const searchURL =
"https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
// DOM elements
const form = document.getElementById("search-form");
const query = document.getElementById("query");
const root = document.getElementById("root");
// Array to store movie data and pagination variables
let movies = [],
page = 1,
inSearchPage = false;
// Function to fetch JSON data from the provided URL
async function fetchData(URL) {
try {
const data = await fetch(URL).then((res) => res.json());
return data;
} catch (error) {
console.log(error.message);
return null;
}
}
// Function to fetch and display results based on the given URL
const fetchAndShowResults = async (URL) => {
const data = await fetchData(URL);
data && showResults(data.results);
};
// Function to get movies from a specific page
const getSpecificPage = (page) => {
const URL = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${apiKey}&page=${page}`;
fetchAndShowResults(URL);
};
// Template for a movie card
const movieCard = (movie) =>
`<div class="col">
<div class="card">
<a class="card-media" href="./img-01.jpeg">
<img src="${movie.poster_path}" alt="PUBG Mobile" width="100%" />
</a>
<div class="card-content">
<div class="card-cont-header">
<div class="cont-left">
<h3 style="font-weight: 600">${movie.original_title}</h3>
<span style="color: #12efec">${movie.release_date}</span>
</div>
<div class="cont-right">
<a href="${movie.poster_path}" target="_blank" class="SearchBtn">See image</a>
</div>
</div>
<div class="describe">
${movie.overview}
</div>
</div>
</div>
</div>`;
// Function to display results on the webpage
const showResults = (items) => {
let content = !inSearchPage ? root.innerHTML : "";
if (items && items.length > 0) {
items.map((item) => {
let { poster_path, original_title, release_date, overview } = item;
// Check if poster_path is available, otherwise use a default image
if (poster_path) {
poster_path = imgURL + poster_path;
} else {
poster_path = "./img-01.jpeg";
}
// Truncate long titles and provide default values for missing data
if (original_title.length > 15) {
original_title = original_title.slice(0, 15) + "...";
}
if (!overview) {
overview = "No overview yet...";
}
if (!release_date) {
release_date = "No release date";
}
const movieItem = {
poster_path,
original_title,
release_date,
overview,
};
content += movieCard(movieItem);
});
} else {
content += "<p>Something went wrong!</p>";
}
root.innerHTML = content;
};
// Function to handle the "Load More" button click
const handleLoadMore = () => {
getSpecificPage(++page);
};
// Function to detect the end of the page and trigger loading more content
const detectEndAndLoadMore = (e) => {
let el = document.documentElement;
if (
!inSearchPage &&
el.scrollTop + el.clientHeight == el.scrollHeight
) {
console.log("BINGO!");
handleLoadMore();
}
};
// Event listener for the search form submission
form.addEventListener("submit", async (e) => {
inSearchPage = true;
e.preventDefault();
const searchTerm = query.value;
searchTerm && fetchAndShowResults(searchURL + searchTerm);
query.value = "";
});
// Event listener for scrolling to detect the end of the page
window.addEventListener("scroll", detectEndAndLoadMore);
// Initialization function to fetch and display initial results
function init() {
inSearchPage = false;
fetchAndShowResults(URL);
}
// Initial call to the initialization function
init();