-
Notifications
You must be signed in to change notification settings - Fork 2
/
script.js
74 lines (64 loc) · 2.22 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
window.addEventListener("DOMContentLoaded", async () => {
// global constants
const IMAGE_PATH = "https://image.tmdb.org/t/p/w500";
const BACKDROP_PATH = "https://image.tmdb.org/t/p/original";
const API_URL = "https://api-for-webflow.autocode.dev/movies@dev/";
// functions
async function getData() {
try {
const response = await fetch(API_URL);
const data = await response.json();
return data.results;
} catch (err) {
errorDetected();
}
}
function errorDetected() {
document.getElementById("load-icon").style.display = "none";
document.getElementById("error-msg").style.display = "block";
}
// get data
const movies = await getData();
// stop executing code if error fetching data
if (!movies) {
errorDetected();
return;
}
// dom elements
const loader = document.getElementById("loader");
const hero = document.getElementById("hero");
const heroTitle = document.getElementById("hero-title");
const heroDescription = document.getElementById("hero-desc");
const movieGrid = document.getElementById("movie-grid");
const heroImage = document.createElement("img");
// initial styles
movieGrid.style.opacity = "0%";
document.body.style.overflow = "hidden";
// set featured movie
const featuredMovie = movies[movies.length - 1];
// set hero/featured elements
heroImage.classList.add("hero-image");
heroImage.src = featuredMovie
? `${BACKDROP_PATH}${featuredMovie.backdrop_path}`
: null;
hero.appendChild(heroImage);
heroTitle.innerText = featuredMovie.title;
heroDescription.innerText = featuredMovie.overview;
// iterate through data results
// create img element for each data item
// add class to each image (class exists in Webflow)
// append each item to movie grid
movies.forEach((movie) => {
const moviePoster = document.createElement("img");
moviePoster.classList.add("movie-image");
moviePoster.src = `${IMAGE_PATH}${movie.poster_path}`;
movieGrid.appendChild(moviePoster);
});
// remove loader and show movie grid
setTimeout(() => {
loader.style.opacity = "0%";
loader.classList.toggle("hide");
movieGrid.style.opacity = "100%";
document.body.style.overflow = "auto";
}, 1500);
});