Finish of the publication page

src/css/style_publications.css

@@ -16,6 +16,23 @@ img{
     text-align: center;
 }
 
+#allButton{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.button{
+    background-color: #515C3A;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+}
+
 .publi{
     display: flex;
     flex-direction: column;

src/js/publication/publication.js

@@ -13,4 +13,55 @@ function search() {
       paragraph.style.display = 'none';    // sinon, on le cache
     }
   }
+}
+
+function revue(){
+  const searchTerm = 'pink square';   // recherche de 'pink square'
+  const paragraphs = document.querySelectorAll('.publi p'); // on prend tous les paragraphes
+  for (let i = 0; i < paragraphs.length; i++) { // boucle qui parcourt tous les paragraphes
+    const paragraph = paragraphs[i];
+    const images = paragraph.getElementsByTagName('img');  
+    let isPinkSquare = false; // on initialise la variable à false  
+    for (let j = 0; j < images.length; j++) {   // boucle qui parcourt toutes les images
+      const image = images[j];
+      const altText = image.getAttribute('alt').toLowerCase();  // on récupère le texte alternatif de l'image en minuscule
+      if (altText.includes(searchTerm)) {     // on cherche si le texte alternatif de l'image contient le terme recherché
+        isPinkSquare = true;
+        break;
+      }
+    }  
+    paragraph.style.display = isPinkSquare ? 'block' : 'none';    // si oui, on affiche le paragraphe, sinon on le cache
+  }
+}
+
+
+// meme fonction que revue
+function communication(){
+  const searchTerm = 'blue square';
+  const paragraphs = document.querySelectorAll('.publi p');
+  for (let i = 0; i < paragraphs.length; i++) {
+    const paragraph = paragraphs[i];
+    const images = paragraph.getElementsByTagName('img');  
+    let isBlueSquare = false;
+    for (let j = 0; j < images.length; j++) {
+      const image = images[j];
+      const altText = image.getAttribute('alt').toLowerCase();
+      if (altText.includes(searchTerm)) {
+        isBlueSquare = true;
+        break;
+      }
+    }  
+    paragraph.style.display = isBlueSquare ? 'block' : 'none';
+  }
+}
+
+
+//function reset
+
+function reset(){
+  const paragraphs = document.querySelectorAll('.publi p');
+  for (let i = 0; i < paragraphs.length; i++) {
+    const paragraph = paragraphs[i];
+    paragraph.style.display = 'block';
+  }
 }