🙅‍♀️ - Add filter on search bar

Co-Authored-By: Antony <91181127+Getsugo@users.noreply.github.com>

Author: Loule95450

css/styles.css

@@ -271,6 +271,60 @@ header .submenu:hover #cart::-webkit-scrollbar-thumb:hover {background: #555;}
   font-size: 13px;
 }
 
+/*drop*/
+
+
+/* Style The Dropdown Button */
+
+.dropbtn {
+  /* padding: 16px; */
+  font-size: 16px;
+}
+
+
+/* The container <div> - needed to position the dropdown content */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+
+/* Dropdown Content (Hidden by Default) */
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px #555;
+  z-index: 1;
+}
+
+
+/* Links inside the dropdown */
+
+.dropdown-content a {
+  color: #555;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+
+/* Change color of dropdown links on hover */
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1
+}
+
+
+/* Show the dropdown menu on hover */
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
 /*
 * Footer
 */

index.html

@@ -50,6 +50,17 @@
 
     <form id="search-item" class="search-form">
       <input type="text" onkeyup="search_cours()" placeholder="Rechercher ...">
+      <div class="dropdown">
+        <button class="dropbtn" id=myBtn>Filtre</button>
+
+        <div class="dropdown-content">
+            <a class="a-dropdown-item noteOrdre" id="noteCroix">note : par ordre croissant</a>
+            <a class="a-dropdown-item noteDesordre" id="noteDecroix">note : par ordre décroissant</a>
+            <a class="a-dropdown-item prixOrdre" id="prixCroix">prix : par ordre croissant</a>
+            <a class="a-dropdown-item prixDesordre" id="prixDecroix">prix : par ordre décroissant</a>
+
+        </div>
+    </div>
     </form>
 
     <div id="courses-list">

js/app.js

@@ -173,7 +173,13 @@ document.addEventListener('click', function (e) { // On click, execute the follo
             localStorage.setItem(`inCart-${idTrash}`, JSON.stringify(getItem)); // Remove the product from the localStorage
             document.querySelector(`.${product.slug}-inCart`).innerHTML = getItem.productsInCart; // Remove the product from the cart
         }
-    } else if (e.target.classList.contains('ordre')){
-        
+    } else if (e.target.classList.contains('noteOrdre')) { // If the user clicks on the noteOrdre button, execuse the following code
+        filtre("noteCroissant");
+    } else if (e.target.classList.contains('noteDesordre')) { // If the user clicks on the noteDesordre button, execuse the following code
+        filtre("noteDecroissant");
+    } else if (e.target.classList.contains('prixOrdre')) { // If the user clicks on the prixOrdre button, execuse the following code
+        filtre("prixCroissant");
+    } else if (e.target.classList.contains('prixDesordre')) { // If the user clicks on the prixDesordre button, execuse the following code
+        filtre("prixDecroissant");
     }
 });

js/search.js

@@ -23,3 +23,17 @@ document.querySelector('form.search-form input').addEventListener('input', funct
     }
 });
 
+function filtre(type) {
+    if(type === "noteCroissant"){
+        COURSES.sort((a, b) => a.mark - b.mark)
+    } else if(type === "noteDecroissant"){
+        COURSES.sort((a, b) => b.mark - a.mark)
+    } else if(type === "prixCroissant"){
+        COURSES.sort((a, b) => a.price - b.price)
+    } else if(type === "prixDecroissant"){
+        COURSES.sort((a, b) => b.price - a.price)
+    }
+
+    document.querySelector('.courses__container').innerHTML = "";
+    showAllProducts('.courses__container', COURSES); // Show all products
+}