Filters: création des éléments de filtres, création des fonctions de …

…filtres, intégration au DOM

FrontEnd/assets/style.css

@@ -204,14 +204,21 @@ li:hover {
 .filtres {
   display: flex;
   justify-content: center;
+  margin: 4rem 0;
 }
 
 .filtres button {
   border-radius: 60px;
   border: 1px solid #1d6154;
   background-color: transparent;
-  font-size: 1rem;
-  padding: 0.5em 1em;
+  font-size: 1.2rem;
+  font-family: "Syne";
+  padding: 0.5rem 1rem;
+  margin: 0rem 1rem;
+}
+.filtres button:hover {
+  background-color: #1d6154;
+  color: white;
 }
 
 #contact {
@@ -265,7 +272,8 @@ footer nav ul {
 /******* JAVASCRIPT *********/
 .projets-section h2 {
   text-align: center;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
+  margin-top: 8rem;
 }
 .projets {
   display: flex;

FrontEnd/index.html

@@ -53,12 +53,7 @@ <h2>Designer d'espace</h2>
 
       <section class="projets-section">
         <h2>Mes Projets</h2>
-        <div class="filtres">
-          <button class="btn-Tous">Tous</button>
-          <button class="btn-Objets">Objets</button>
-          <button class="btn-Appartements">Appartements</button>
-          <button class="btn-Hotels">Hôtels & restaurants</button>
-        </div>
+        <div class="filtres"></div>
         <div class="projets"></div>
       </section>
 

FrontEnd/test.js

@@ -1,31 +1,31 @@
-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);
-  }
-}
+// 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");
+// fetchWorks().then((works) => {
+//   const sectionProjet = document.querySelector(".projets");
 
-  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);
+//     projetFigure.appendChild(projetImg);
+//     projetFigure.appendChild(projetCaption);
+//     sectionProjet.appendChild(projetFigure);
 
-    console.log(projet);
-  });
-
-  // alert(`bonjour ${works[0].title}`);
-});
+//     console.log(projet);
+//   });
+// //
+//   // alert(`bonjour ${works[0].title}`);
+// });

FrontEnd/travaux.js

@@ -65,4 +65,31 @@ fetchWorks().then((works) => {
     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);
+    }
+  });
 });