diff --git a/index.html b/index.html index 5b775b2..c279ea0 100644 --- a/index.html +++ b/index.html @@ -2,163 +2,95 @@ + JustStreamIt - + + + + + -
-
- logo -

Vidéos à la demande

-
-
-

Meilleur film

- -
-

film

- film cover -

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

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

Vidéos à la demande

+
+
-
+ + +
+
+

Meilleur film

+
+
+ +
+
+
+ +
+
+

Films les mieux notés

+
+ +
+
+
-
-

Category2

-

-

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

-
-
-

Category2

-

-

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

-
- -
-

Other

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

Mystery

+
+
-
-

Category

+
- +
+
+ +
+ +
+
+
- -
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a6fb8ad --- /dev/null +++ b/script.js @@ -0,0 +1,421 @@ +const url_title = "http://localhost:8000/api/v1/titles/"; +const url_genre = "http://localhost:8000/api/v1/genres/"; + +const blockEnd = ` + + + +`; + +let filmNumber = 10 +let categoryMovieBlock = 6 + +async function getMovies(url, id, type) { + const filmList = []; + + 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]); + } + } + + let blockToLook = document.getElementById(id); + blockToLook.innerHTML = ""; + + for (let i = 0; i < 6; i++) { + film = filmList[i]; + let id = i+1 + + let movieBlock = ` +
+
+
+
+
+

${film.title}

+
+
+ + + `; + // 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) { + let recette = "N/A"; + let genre = recette; + + if (film.worldwide_gross_income) { + recette = film.worldwide_gross_income; + } + if (film.genre) { + genre = film.genre; + } + let modalContent = ` +