From 0ff6a70ba4785d70a8d93ccc6bc10ca5ae402196 Mon Sep 17 00:00:00 2001 From: yann Date: Sun, 9 Mar 2025 17:27:17 +0100 Subject: [PATCH] see more/see less in js function; not working yet --- index.html | 228 ++++++++++------------------- script.js | 421 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 501 insertions(+), 148 deletions(-) create mode 100644 script.js 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 = ` +