-
${bfilm.title}
${bfilm.description}
-
`;
- let modal = getModalDetail(bfilm, bfilm.id);
- document.getElementById("bestFilm").innerHTML += detail+modal;
+ //document.getElementById("bestFilm").innerHTML += detail+modal;
+ blockToLook.innerHTML += detail;
+ getModalDetail(bfilm, bfilm.id, blockToLook);
+
}
+async function getModalDetail(filmData, modalId, blockToLook) {
+
+ const response = await fetch(`${filmData.url}`);
+ const film = await response.json();
-// create the modal HTML block for a given film object
-function getModalDetail(film, modalId) {
let recette = "N/A";
let genre = recette;
@@ -117,10 +122,13 @@ function getModalDetail(film, modalId) {
- `;
- return modalContent;
+ `
+ blockToLook.innerHTML += modalContent
+ //return modalContent;
}
+
+
// get MovieList, returns a promise
async function getMovies3(url) {
const filmList = [];
@@ -134,13 +142,16 @@ async function getMovies3(url) {
return filmList;
}
+
// get a movie List and create HTML blocks
function createBlock(filmList, id, count) {
// get the element to change
let blockToLook = document.getElementById(id);
blockToLook.innerHTML = "";
+
for (let i = 0; i < count; i++) {
film = filmList[i];
+
let movieBlock = `
@@ -155,9 +166,10 @@ function createBlock(filmList, id, count) {
`;
- // retrieve the specific film detail from URL using id then concatenate with the modal creator
- let modal = getModalDetail(film, film.id);
- blockToLook.innerHTML += movieBlock+modal;
+
+ // create the block, then call the modal creation from the async function
+ blockToLook.innerHTML += movieBlock
+ getModalDetail(film, film.id, blockToLook);
}
}
@@ -182,81 +194,7 @@ function addSeeLess(id, display) {
blockToChange.innerHTML += blockToAdd;
}
-
-
-
-// add movie block quantity depending on screen size
-function generateMovies(movieProm, id) {
-
- if (screen.width < 768 ) {
- movieProm.then((data) => {
- createBlock(data, id, 2);
- addSeeMore(id, "d-block");
- })
- }
-
- if (screen.width === 768 || screen.width > 768 && screen.width < 992) {
- movieProm.then((data) => {
- createBlock(data, id, 4);
- addSeeMore(id, "d-block");
- })
- }
-
- if (screen.width > 992) {
- movieProm.then((data) => {
- createBlock(data, id, 6);
- addSeeMore(id, "d-none");
- })
- }
-}
-
-function generateMoviesUnsized(movieProm, id) {
- movieProm.then((data) => {
- createBlock(data, id, 6);
- });
-}
-
-
-
-// ============ best film ============
-// Il Grande Lebowski
-// bestFilm("118715")
-bestFilm("101928");
-
-// ============ Best Rated ============
-//getMovies("?sort_by=-imdb_score", "bestRated");
-let bestRated = getMovies3("?sort_by=-imdb_score");
-// create blocks depending on current screen's size
-generateMovies(bestRated, "bestRated");
-
-
-
-// when the screen changes, regenerate blocks
-window.addEventListener("resize", ()=> {
- generateMovies(bestRated, "bestRated");
- generateMovies(mystery, "mystery");
- generateMovies(other, "other");
-
-})
-// ============ Mystery ============
-let mystery = getMovies3("?genre=mystery")
-generateMovies(mystery, "mystery")
-
-
-// fill the selection menu
-getCategory();
-let other = getMovies3("?genre=action");
-generateMovies(other, "other");
-
-// listen for any change in menu
-let selectedItem = document.getElementById("category-select");
-selectedItem.addEventListener("change", ()=> {
-// getMovies(`?genre=${selectedItem.value}`, "other");
- let block = getMovies3(`?genre=${selectedItem.value}`);
- generateMovies(block, "other");
-});
-
-
+// functions called by buttons :
function bestRatedMore() {
bestRated.then((data) => {
createBlock(data, "bestRated", 6);
@@ -286,6 +224,77 @@ function otherMore() {
addSeeLess("other", "d-block");
})
}
+
function otherLess() {
generateMovies(other, "other")
-}
\ No newline at end of file
+}
+// end of functions called by buttons
+
+
+// add movie block quantity depending on screen size
+function generateMovies(movieProm, id) {
+
+ if (screen.width < 768 ) {
+ movieProm.then((data) => {
+ createBlock(data, id, 2);
+ addSeeMore(id, "d-block");
+ })
+ }
+
+ if (screen.width === 768 || screen.width > 768 && screen.width < 992) {
+ movieProm.then((data) => {
+ createBlock(data, id, 4);
+ addSeeMore(id, "d-block");
+ })
+ }
+
+ if (screen.width > 992) {
+ movieProm.then((data) => {
+ createBlock(data, id, 6);
+ addSeeMore(id, "d-none");
+ })
+ }
+}
+
+
+
+
+// ============ best film ============
+// Il Grande Lebowski
+// bestFilm("118715")
+bestFilm("101928");
+
+
+// Get resources
+let bestRated = getMovies3("?sort_by=-imdb_score");
+let mystery = getMovies3("?genre=mystery")
+let other = getMovies3("?genre=action");
+
+// ============ Best Rated ============
+// create blocks depending on current screen's size
+generateMovies(bestRated, "bestRated");
+
+// ============ Mystery ============
+generateMovies(mystery, "mystery")
+
+// ============ Other ============
+// fill the selection menu
+getCategory();
+generateMovies(other, "other");
+
+// listen for any change in menu
+let selectedItem = document.getElementById("category-select");
+selectedItem.addEventListener("change", ()=> {
+// getMovies(`?genre=${selectedItem.value}`, "other");
+ let block = getMovies3(`?genre=${selectedItem.value}`);
+ generateMovies(block, "other");
+});
+
+// when the screen changes, regenerate blocks for all
+window.addEventListener("resize", ()=> {
+ generateMovies(bestRated, "bestRated");
+ generateMovies(mystery, "mystery");
+ generateMovies(other, "other");
+
+})
+