From e1be04ac6a9861e88d7112c030c78feb3886264d Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Thu, 17 Aug 2023 10:25:54 +0200 Subject: [PATCH] =?UTF-8?q?Function=20displayWorks,=20=C3=A9venements=20su?= =?UTF-8?q?r=20les=20boutons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes FrontEnd/travaux copie.js | 101 ++++++++++++++++++++++++++ FrontEnd/travaux.js | 144 +++++++++++++------------------------- 3 files changed, 148 insertions(+), 97 deletions(-) create mode 100644 .DS_Store create mode 100644 FrontEnd/travaux copie.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..969e15992d276b2bde9a7fbf495c42b1f47fb58f GIT binary patch literal 6148 zcmeH~O;6iE5Qb+%sAD0dR4Nh|q?Nb^nudM|adBO!#I;8B&{nC9BkJOMqu6N z^}dS#{=4{OQVx?`$Nxx%c~(~4?uBS9HJ2ZFp6{)AAEHlc5>;_EF2i{Aj$21c<;lDr zC&$@f(r-U{rHU%fior-HWa$7Q@84!cswSZt7ip<;BQxOpEx+GhpH6!(o^|BT&huGE zPIr6Vj(ob?o6Y>z+UDcEH~q8xOQFv7osz&)t!>rnT)v^Qz~O5&DsokvVvO@1($G?k z=@ewQC~2y=z!CVD3Gnwp z!dU~WwNd@)K%tKS&?dUIq0T>zoFlCUR%@defeDieHL1cLF@#A+zqE0I)!L{@Ct(jC z!d_X}6N=DR$NW- console.log(wor)); + +// let worksData = fetchWorks().then((works) => { +// worksData = works; +// // Ici, vous pouvez utiliser worksData comme vous le souhaitez +// for (let i = 0; i < worksData.length; i++) { +// // Variable projet qui contient le tableau d'objets du projet +// let projet = worksData[i]; +// console.log(projet); +// // Création de la div qui contiendra le projet +// const sectionProjet = document.querySelector(".projets"); +// // Création des balises enfants de la div +// const projetDivChild = document.createElement("figure"); + +// const projetDivChildImg = document.createElement("img"); +// projetDivChildImg.src = projet.imageUrl; +// const projetDivChildFigcaption = document.createElement("figcaption"); +// projetDivChildFigcaption.innerText = projet.title; + +// sectionProjet.appendChild(projetDivChild); +// projetDivChild.appendChild(projetDivChildImg); +// projetDivChild.appendChild(projetDivChildFigcaption); +// } +// }); + +// VERSION 2 +// function displayWorks(works) { + +async function fetchWorks() { + try { + const response = await fetch("http://localhost:5678/api/works"); + if (!response.ok) throw new Error("Problème avec la requête"); + return await response.json(); + } catch (error) { + console.log(error); + } +} + +fetchWorks().then((works) => { + const sectionProjet = document.querySelector(".projets"); + + works.forEach((projet) => { + const projetFigure = document.createElement("figure"); + + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + }); + + // categorie unique + const category = works.map((item) => item.category.name); + // console.log(category); + const uniqueCategory = [...new Set(category)]; + // console.log(uniqueCategory); + + // buttons / filter + const filtresDiv = document.querySelector(".filtres"); + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); + // + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); + + btn.addEventListener("click", () => filterByCategory(categoryName)); + + // ************ FILTER CATEGORY ************ + function filterByCategory(categoryName) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + + console.log(filteredWorks); + } + }); +}); + +// displayWorks(works); +// displayWorks(filteredWorks); diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index 82e019387..19f9afce8 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -1,44 +1,3 @@ -// VERSION 1 - -// async function fetchWorks() { -// try { -// const response = await fetch("http://localhost:5678/api/works"); -// if (response.ok === true) { -// return await response.json(); -// } -// throw new Error("Problème avec la requête"); -// } catch (error) { -// console.log(error); -// } -// } - -// // let worksData = fetchWorks().then((wor) => console.log(wor)); - -// let worksData = fetchWorks().then((works) => { -// worksData = works; -// // Ici, vous pouvez utiliser worksData comme vous le souhaitez -// for (let i = 0; i < worksData.length; i++) { -// // Variable projet qui contient le tableau d'objets du projet -// let projet = worksData[i]; -// console.log(projet); -// // Création de la div qui contiendra le projet -// const sectionProjet = document.querySelector(".projets"); -// // Création des balises enfants de la div -// const projetDivChild = document.createElement("figure"); - -// const projetDivChildImg = document.createElement("img"); -// projetDivChildImg.src = projet.imageUrl; -// const projetDivChildFigcaption = document.createElement("figcaption"); -// projetDivChildFigcaption.innerText = projet.title; - -// sectionProjet.appendChild(projetDivChild); -// projetDivChild.appendChild(projetDivChildImg); -// projetDivChild.appendChild(projetDivChildFigcaption); -// } -// }); - -// VERSION 2 - async function fetchWorks() { try { const response = await fetch("http://localhost:5678/api/works"); @@ -50,72 +9,63 @@ async function fetchWorks() { } fetchWorks().then((works) => { - const sectionProjet = document.querySelector(".projets"); + function displayWorks(works) { + const sectionProjet = document.querySelector(".projets"); + const filtresDiv = document.querySelector(".filtres"); + // Effacer tout le contenu actuel + sectionProjet.innerHTML = ""; + filtresDiv.innerHTML = ""; - works.forEach((projet) => { - const projetFigure = document.createElement("figure"); + works.forEach((projet) => { + const projetFigure = document.createElement("figure"); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); - // categorie unique - const category = works.map((item) => item.category.name); - console.log(category); - const uniqueCategory = [...new Set(category)]; - console.log(uniqueCategory); + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + }); - // buttons / filter - const filtresDiv = document.querySelector(".filtres"); - const btnAll = document.createElement("button"); - btnAll.innerText = "Tous"; - filtresDiv.appendChild(btnAll); - // - uniqueCategory.forEach((categoryName) => { - const btn = document.createElement("button"); - btn.innerText = categoryName; - filtresDiv.appendChild(btn); + // categorie unique - btn.addEventListener("click", () => filterByCategory(categoryName)); - // ************ FILTER CATEGORY ************ - function filterByCategory(categoryName) { - const filteredWorks = works.filter( - (item) => item.category.name === categoryName - ); - - function displayWorks(worksToDisplay) { - // Supprimez les projets existants - while (sectionProjet.firstChild) { - sectionProjet.removeChild(sectionProjet.firstChild); - } + const category = works.map((item) => item.category.name); + // console.log(category); + const uniqueCategory = [...new Set(category)]; + // console.log(uniqueCategory); - const sectionProjet = document.querySelector(".projets"); + // buttons / filter - filteredWorks.forEach((projet) => { - const projetFigure = document.createElement("figure"); + //bouton tous + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; + //bouton par catégorie + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; + //Event listener + btnAll.addEventListener("click", () => displayWorks(works)); - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); + btn.addEventListener("click", () => + filterByCategory(categoryName, works) + ); + // ************ FILTER CATEGORY FUNCTION ************ + function filterByCategory(categoryName, works) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + displayWorks(filteredWorks); + + console.log(filteredWorks); } - - console.log(filteredWorks); - } - }); + }); + } + displayWorks(works); }); - -// displayWorks(works); -// displayWorks(filteredWorks);