diff --git a/index2.html b/index2.html index b2da27d..63790de 100644 --- a/index2.html +++ b/index2.html @@ -4,191 +4,92 @@ JustStreamIt - - + + + -
-
- logo -

Vidéos à la demande

+
+
+
+ logo +
+
+

Vidéos à la demande

+
+
- -
-

Meilleur film

- -
-
- film cover -
-
-

film

-
-
- Lorem ipsum odor amet, consectetuer adipiscing elit. Tempus non pellentesque bibendum eu sapien litora neque tortor. - Volutpat diam himenaeos risus vitae congue hendrerit elit. Porttitor semper leo pretium mattis bibendum consequat. Tincidunt tincidunt cursus eget aenean senectus pretium consectetur cubilia senectus. Rutrum ex fermentum consectetur parturient ornare. Quam amet maximus potenti ac in penatibus hendrerit lacus. Duis neque non at dictum ligula nullam amet orci. Consequat lectus consequat morbi dis suscipit ridiculus ultricies. -
-
- -
-
-
- +
-

Mystery

-
- -
-
-

Film1

-

Détail

+
+

Meilleur film

+
+
+ +
+
+ +
+
+

Best rated

+
+ +
- -
-

Film 2

-

machin -

Lorem ipsum odor amet, consectetuer adipiscing elit.

-
- -
-

Film 3

-

machin -

Lorem ipsum odor amet, consectetuer adipiscing elit.

-
- -
-

Film 4

-

machin -

Lorem ipsum odor amet, consectetuer adipiscing elit.

-
-
-

Film 5

-

machin -

Lorem ipsum odor amet, consectetuer adipiscing elit.

-
- -
-

Film 6

-

machin -

Lorem ipsum odor amet, consectetuer adipiscing elit.

-
-
-
-

Category2

-

-

-

-
-
-

Category2

-

-

-

-
- -
-

Other

-
-
    -
    Film 1 -
    - -
    - Film 2 -
    -
    - Film 3 -
    -
    - Film 4 -
    -
    - Film 5 -
    -
    - Film 6 -
    -
-
+
+
+

Mystery

+
+ +
-
-

Category

+
- +
+
+ +
+ +
+
+
- -
- + + + + diff --git a/test2.js b/test2.js index 9ca9dbd..9decb87 100644 --- a/test2.js +++ b/test2.js @@ -1,44 +1,185 @@ +const url_title = "http://localhost:8000/api/v1/titles/" +const url_genre = "http://localhost:8000/api/v1/genres/" +const blockEnd = ` + + + +` -// function getBestFilm() { -// let bestFilmTitle = document.querySelector(".title h2") -// console.log(bestFilmTitle.textContent) -//} +async function getMovies(url, id) { + const filmList = [] -//getBestFilm() - -async function afficherFilms() { - for (let j = 1; j<10; j++) { - const response = await fetch(`http://localhost:8000/api/v1/titles/?format=json&page=${j}`); - const film = await response.json(); - for (let i in film.results) { - console.log(film.results[i].title); + for (let j=1; j<3; j++) { + const response = await fetch(`${url_title}${url}&format=json&page=${j}`); + const film1 = await response.json(); + for (i in film1.results) { + filmList.push(film1.results[i]) } -//return response.json(); - } -} + } -bestFilm() -let bestTitle = document.getElementById("bestTitle h2") -console.log(bestTitle) -let bestPic = document.querySelector(".affiche img") -let bestDesc = document.getElementById("description") -console.log(bestPic) + let blockToLook = document.getElementById(id) + blockToLook.innerHTML = "" + +// square block creation for each film + for (let i = 0; i < 6; i++) { + film = filmList[i] + let movieBlock = ` +
+
+
+
+
+

${film.title}

+
+
+ -async function bestFilm() { - const response = await fetch("http://localhost:8000/api/v1/titles/118710") - const film = await response.json(); - bestTitle.innerText = film.original_title - bestPic.setAttribute("src", film.image_url) - bestDesc.innerText = film.description - let detailHeader = ` -

${film.original_title}

-

${film.year} - ${film.genres}

` -let modalHeader = document.getElementById("modalHeader") -modalHeader.innerHTML = detailHeader - console.log(film) + // retrieve the specific film detail from URL using id then concatenate with the modal creator + const response2 = await fetch(`${url_title}${film.id}`) + const film2 = await response2.json() + let modal = getModalDetail(film2, film2.id) + + blockToLook.innerHTML += movieBlock+modal+blockEnd + } } +// tried to make some dynamic pagination browsing... nok +async function getCount(type) { + const response = await fetch(`http://localhost:8000/api/v1/${type}`) + const result = await response.json() + return result +} + +// get categories and create the options in select menu +async function getCategory() { + listeGenres = [] + for (let i = 1; i<6; i++) { + const response = await fetch(`${url_genre}?page=${i}`); + const genres = await response.json(); + for (let j in genres.results) { + listeGenres.push(genres.results[j].name) + }; + } + let categorySelect = document.getElementById("category-select") + for (i in listeGenres) { + let option = ` + + ` + categorySelect.innerHTML += option + } +} + +// create the best film block and get a movie from a given ID +async function bestFilm(filmId) { + const response = await fetch(`${url_title}${filmId}`); + const bfilm = await response.json(); + + let detail = ` +
+ film cover +
+
+
+

${bfilm.title}

+
+
+
${bfilm.description}
+
+
+
+ +
+ ` + let modal = getModalDetail(bfilm, bfilm.id); + document.getElementById("bestFilm").innerHTML += detail+modal; + +} + +// create the modal HTML block for a given film object +function getModalDetail(film, modalId) { + recette = "-" + if (film.worldwide_gross_income) { + recette = film.worldwide_gross_income + } + let modalContent = ` +