-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.js
83 lines (66 loc) · 2.05 KB
/
app.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
async function init() {
const searchButton = document.querySelector("#search-button");
const form = document.querySelector("form");
const data = await fetchData();
form.addEventListener("submit", (e) => handleSubmit(data, e));
searchButton.addEventListener("click", (e) => handleSubmit(data, e));
}
async function fetchData() {
try {
const response = await fetch("https://ghibliapi.vercel.app/films");
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching data:", error);
}
}
function handleSubmit(data, e) {
e.preventDefault();
const img = document.querySelector("img");
const description = document.querySelector(".description");
const errorMessage = document.querySelector(".error-message");
const info = getInfo(data);
img.src = info.image;
img.classList.add("border");
errorMessage.style.display = "none";
switch (info.status) {
case "ok":
console.log("ok");
description.style.visibility = "visible";
description.textContent = info.description;
return;
case "error":
console.log("error");
errorMessage.style.display = "block";
description.style.display = "none";
return;
case "none":
default:
console.log("none");
description.style.visibility = "hidden";
img.classList.remove("border");
return;
}
}
function getInfo(data) {
const input = document.querySelector("#search-bar");
const inputValue = input.value.toLowerCase().replace(/'/g, "");
if (!inputValue) {
return {
image:
"https://upload.wikimedia.org/wikipedia/en/thumb/c/ca/Studio_Ghibli_logo.svg/1920px-Studio_Ghibli_logo.svg.png",
description: "",
status: "none",
};
}
for (movie of data) {
const filmTitle = movie.title.toLowerCase().replace(/'/g, "");
if (filmTitle.includes(inputValue)) return { ...movie, status: "ok" };
}
return {
image:
"https://www.ghiblicollection.com/cdn/shop/files/download.webp?v=1687908002&width=1920",
status: "error",
};
}
init();