-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
139 lines (126 loc) · 4.72 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
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
let moviesIdsArray = [];
let moviesData = [];
const moviesList = document.getElementById('movies-list');
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const placeholderBlock = document.getElementById('placeholder-block');
async function fetchMoviesData(title) {
try {
const searchResponse = await fetch(`https://www.omdbapi.com/?apikey=c824a04b&s=${title}`);
const searchData = await searchResponse.json();
if (searchData.Search) {
searchData.Search.slice(0, 5).map(movie => {
moviesIdsArray.push(movie.imdbID);
});
return fetchDetailedMoviesData(moviesIdsArray);
} else if (!searchData.Search) {
renderNothingFoundMessage();
}
} catch (err) {
console.log('Error:', err);
}
}
function fetchDetailedMoviesData(ids) {
try {
ids.map(async (id) => {
const idResponse = await fetch(`https://www.omdbapi.com/?apikey=c824a04b&i=${id}`);
const idData = await idResponse.json();
if (idData.Poster === "N/A") {
idData.Poster = `./img/nice-background.jpg`
};
if (idData.imdbID) {
const { Title, Runtime, Genre, Poster, imdbRating, Plot, imdbID } = idData;
moviesData.push({
Title,
Runtime,
Genre,
Poster,
imdbRating,
Plot,
imdbID
})
}
return displayMoviesDataHtml(moviesData)
})
} catch (err) {
console.log("Something went wrong, here's how: ", err);
renderNothingFoundMessage()
}
}
function displayMoviesDataHtml(movies) {
let html = '';
for (let movie of movies) {
const { Title, Runtime, Genre, Poster, imdbRating, Plot, imdbID } = movie;
html += `
<div class="movie-block">
<img src="${Poster}" alt="movie-cover" class="movie-img">
<div class="movie-container">
<div class="movie-name-line">
<h2 class="movie-name">${Title}</h2>
<p class="rating"><img src="./img/rating-star-icon.png" alt="rating-star">${imdbRating}</p>
</div>
<div class="movie-data-line">
<div class="movie-length">${Runtime}</div>
<div class="movie-genres">${Genre}</div>
<div class="add-to-watchlist" id="${imdbID}">
${(localStorage.getItem(`${imdbID}`)) ?
`<img src="./img/watchlist-minus-icon.png" alt="minus-icon"> Remove` :
`<img src="./img/watchlist-plus-icon.png" alt="plus-icon" id="plus-icon" />Watchlist`}
</div>
</div>
<p class="movie-description">${Plot}</p>
</div>
</div>
`
}
moviesList.innerHTML = html;
// adding event listeners to the watchlist buttons
let addToWatchlistButtons = document.querySelectorAll('.add-to-watchlist');
for (let button of addToWatchlistButtons) {
button.addEventListener('click', addToWatchlist);
}
}
searchForm.addEventListener('submit', function (event) {
event.preventDefault();
placeholderBlock.remove();
fetchMoviesData(searchInput.value);
searchInput.value = ''
moviesIdsArray = [];
moviesData = [];
})
async function saveToLocalStorage(id) {
const idResponse = await fetch(`https://www.omdbapi.com/?apikey=c824a04b&i=${id}`);
const idData = await idResponse.json();
const { Title, Runtime, Genre, Poster, imdbRating, Plot, imdbID } = idData;
localStorage.setItem(`${imdbID}`, JSON.stringify(
{
Title,
Runtime,
Genre,
Poster,
imdbRating,
Plot,
imdbID
}
));
}
function addToWatchlist(event) {
const addIcon = `img/watchlist-plus-icon.png`;
const removeIcon = `img/watchlist-minus-icon.png`;
const baseUrl = `https://ant4x.github.io/movie-watchlist/`;
if (event.target.children[0].src === baseUrl + addIcon) {
event.target.children[0].src = baseUrl + removeIcon
saveToLocalStorage(event.target.id);
} else {
event.target.children[0].src = baseUrl + addIcon;
localStorage.removeItem(event.target.id)
}
}
function renderNothingFoundMessage() {
moviesList.innerHTML = `
<div id="placeholder-block" class="placeholder-block">
<p>Unable to find what you’re looking for.
Please try another search.</p>
</div>
`;
}