-
Notifications
You must be signed in to change notification settings - Fork 0
/
studio-ghibli-app.js
39 lines (34 loc) · 1.3 KB
/
studio-ghibli-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
const baseURL = "https://ghibliapi.herokuapp.com/films/";
const movieTitle = document.querySelector(".card-title")
const directorName = document.querySelector(".director");
const releaseDate = document.querySelector(".release");
const runTime = document.querySelector(".runtime");
const description = document.querySelector(".summary")
const dropdown = document.querySelector(".dropdown")
const submitBtn = document.querySelector(".submit-btn")
submitBtn.onclick = function() {getFilms()};
submitBtn.addEventListener("click", (e) => {
e.preventDefault();
})
async function getFilms() {
let response = await fetch(baseURL)
let data = await response.json();
function displayTitles(titles) {
titles.forEach(t => {
let titleInMenu = document.createElement("option");
titleInMenu.innerText = t.title;
titleInMenu.value = t.id;
dropdown.add(titleInMenu);
})
}
displayTitles(data);
let id = dropdown.value;
response = await fetch(`${baseURL}${id}`)
data = await response.json();
movieTitle.innerText = data.title;
directorName.innerText = data.director;
releaseDate.innerText = data.release_date;
runTime.innerText = data.running_time + " minutes";
description.innerText = data.description;
}
getFilms();