ajout de filtre pendant la recherche

Author: Getsugo

data/courses.js

@@ -1,7 +1,7 @@
 const COURSES = [
-  {id: 1, img: 'ux_ui.jpg', title: 'UX/UI', slug: 'ux_ui', initial_price: 200, price: 9.99, mark: 4, stock: 10},
-  {id: 2, img: 'php_8.png', title: 'PHP 8', slug: 'php_8',initial_price: 200, price: 9.99, mark: 5, stock: 10},
-  {id: 3, img: 'react_js.png', title: 'React JS', slug: 'react_js', initial_price: 200, price: 9.99, mark: 2, stock: 5},
-  {id: 4, img: 'node_js.jpg', title: 'Node JS', slug: 'node_js', initial_price: 200, price: 9.99, mark: 5, stock: 3},
-  {id: 5, img: 'my_sql.png', title: 'MySQL', slug: 'mysql', initial_price: 200, price: 9.99, mark: 4, stock: 2}
-]
+    { id: 1, img: 'ux_ui.jpg', title: 'UX/UI', slug: 'ux_ui', initial_price: 200, price: 17.99, mark: 4, stock: 10 },
+    { id: 2, img: 'php_8.png', title: 'PHP 8', slug: 'php_8', initial_price: 200, price: 20.99, mark: 5, stock: 10 },
+    { id: 3, img: 'react_js.png', title: 'React JS', slug: 'react_js', initial_price: 200, price: 12.99, mark: 2, stock: 5 },
+    { id: 4, img: 'node_js.jpg', title: 'Node JS', slug: 'node_js', initial_price: 200, price: 10.99, mark: 1, stock: 3 },
+    { id: 5, img: 'my_sql.png', title: 'MySQL', slug: 'mysql', initial_price: 200, price: 14.99, mark: 3, stock: 2 }
+]

js/search.js

@@ -1,39 +1,45 @@
 // search bar 
 
-document.querySelector('form.search-form input').addEventListener('input', function (e) { // If a change in the search bar is detected, run the function
-    
+document.querySelector('form.search-form input').addEventListener('input', function(e) { // If a change in the search bar is detected, run the function
+    search(e.target.value);
+});
+
+function search(e) {
     var input, filter; // Inizialize variables
-    input = e.target.value; // Get the value of the search bar
-    filter = input.toUpperCase(); // Convert the value to uppercase
+    filter = e.toUpperCase(); // Convert the value to uppercase
 
     document.querySelector("#courses-list .courses__container").innerHTML = ""; // Clear results
 
-    if(input){ // If the input is not empty
-        for(let i = 0; i < COURSES.length; i++){ // Loop through all courses
-            if(COURSES[i].title.toUpperCase().includes(filter)){ // If the course title includes the value of the search bar
+    if (e) { // If the input is not empty
+        for (let i = 0; i < COURSES.length; i++) { // Loop through all courses
+            if (COURSES[i].title.toUpperCase().includes(filter)) { // If the course title includes the value of the search bar
                 productItems('#courses-list .courses__container', COURSES[i]); // Show the product
 
                 document.querySelector('#no_course').classList.add('hidden'); // Hide the no results message
-            } else if(!document.querySelector("#courses-list .courses__container").innerHTML){ // Otherwise, if there are no results
+            } else if (!document.querySelector("#courses-list .courses__container").innerHTML) { // Otherwise, if there are no results
                 document.querySelector('#no_course').classList.remove('hidden'); // Show the no results message
             }
-        }  
+        }
     } else { // Otherwise, if the input is empty
         showAllProducts('.courses__container', COURSES); // Show all products
     }
-});
+}
 
 function filtre(type) { // Search filter function
-    if(type === "noteCroissant"){ // If the filter is note croissant
+    if (type === "noteCroissant") { // If the filter is note croissant
         COURSES.sort((a, b) => a.mark - b.mark) // Sort the courses by note
-    } else if(type === "noteDecroissant"){ // If the filter is note decroissant
+    } else if (type === "noteDecroissant") { // If the filter is note decroissant
         COURSES.sort((a, b) => b.mark - a.mark) // Sort the courses by note
-    } else if(type === "prixCroissant"){ // If the filter is prix croissant
+    } else if (type === "prixCroissant") { // If the filter is prix croissant
         COURSES.sort((a, b) => a.price - b.price) // Sort the courses by price
-    } else if(type === "prixDecroissant"){ // If the filter is prix decroissant
+    } else if (type === "prixDecroissant") { // If the filter is prix decroissant
         COURSES.sort((a, b) => b.price - a.price) // Sort the courses by price
     }
 
-    document.querySelector('.courses__container').innerHTML = ""; // Clear products
-    showAllProducts('.courses__container', COURSES); // Show all products
-}
+    if (document.querySelector('form.search-form input').value) {
+        search(document.querySelector('form.search-form input').value);
+    } else {
+        document.querySelector('.courses__container').innerHTML = ""; // Clear products
+        showAllProducts('.courses__container', COURSES); // Show all products
+    }
+}