csocrate
diff --git a/‎index.html
Copy file name to clipboardExpand all lines: index.html
+1Lines changed: 1 addition & 0 deletions b/‎index.html
Copy file name to clipboardExpand all lines: index.html
+1Lines changed: 1 addition & 0 deletions
diff --git a/‎js/RecipesApp.js
Copy file name to clipboardExpand all lines: js/RecipesApp.js
+75-5Lines changed: 75 additions & 5 deletions b/‎js/RecipesApp.js
Copy file name to clipboardExpand all lines: js/RecipesApp.js
+75-5Lines changed: 75 additions & 5 deletions
diff --git a/‎js/utils/BinarySearch.js
Copy file name to clipboard
+61Lines changed: 61 additions & 0 deletions b/‎js/utils/BinarySearch.js
Copy file name to clipboard
+61Lines changed: 61 additions & 0 deletions
@@ -237,6 +237,7 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
   <script src="js/pages/RecipesPage.js"></script>
   <!-- Utils -->
   <script src="/js/utils/MainSearchBar.js"></script>
+  <script src="/js/utils/BinarySearch.js"></script>
   <!-- Entry point -->
   <script src="js/RecipesApp.js"></script>
 </body>
 
@@ -12,10 +12,11 @@ class RecipesApp {
     this.recipesPage = new RecipesPage();
     this.tags = new Array();
 
+    // DOM
+    this.$userInput = document.querySelector('#recipes_search');
     this.$ingredientsList = document.querySelector('#ingredients_list');
     this.$appliancesList = document.querySelector('#appliances_list');
     this.$ustensilsList = document.querySelector('#ustensils_list');
-
     this.$ingredientsSelect = document.querySelector('select#ingredients');
     this.$appliancesSelect = document.querySelector('#appliances');
     this.$ustensilsSelect = document.querySelector('#ustensils');
@@ -27,10 +28,6 @@ class RecipesApp {
     this.recipesData = recipesData
       .map(recipe => new RecipeFactories(recipe, 'recipe'));
 
-    // Search form data
-    new MainSearchBar;
-    this.recipesDataForMainSearchBar();
-
     // Select boxes
     this.displayIngredientsDropdownWithData();
     this.displayAppliancesDropdownWithData();
@@ -39,12 +36,85 @@ class RecipesApp {
     // Cards
     this.displayRecipeCardsWithData();
 
+    // Main search bar
+    this.isUserInputValueMatches();
+
     // Tags
     this.tags.push('item 1', 'item 2', 'item 3');
     const tags = this.tags;
     this.displayActiveTags(tags);
   }
 
+  isUserInputValueMatches() {
+
+    this.$userInput.addEventListener('input', (e) => {
+
+      this.displayMatchingRecipe(e);
+
+      this.sortRecipeByDescendingMatching();
+    });
+  }
+
+  sortRecipeByDescendingMatching() {
+    const cardsContainer = document.querySelector('.recipe-cards');
+    const containerArray = Array.from(cardsContainer.children);
+
+    const sorted = containerArray
+      .filter(child => {
+        if (child.hasAttribute('data-matches')) {
+          const matches = child.dataset.matches > parseInt(0);
+          if (matches) {
+            return child;
+          }
+        }
+      })
+      .sort((a, b) => {
+        return b.dataset.matches - a.dataset.matches;
+      });
+
+    sorted
+      .forEach(el => cardsContainer.append(el));
+  }
+
+  /**
+   * Displays matching recipe
+   * By main search bar
+   * @param {Event & {target: HTMLInputElement}} e 
+   */
+  displayMatchingRecipe(e) {
+    const cards = Array.from(document.querySelectorAll('.recipe-cards article'));
+
+    cards
+      .forEach(card => {
+        const recipesDataForMainSearchBar = this.recipesDataForMainSearchBar().sort();
+        const binarySearch = new BinarySearch();
+        const userInputValue = e.target.value;
+        const cardTextContent = card.textContent.toLowerCase();
+
+        const userInputMatchingList = binarySearch.isUserValueMatches(userInputValue, recipesDataForMainSearchBar);
+
+        const isUserInputMatching = userInputMatchingList
+          .some(element => card.textContent.includes(element));
+      
+        if (isUserInputMatching) {
+          card.style.display = 'block';
+
+          let position = cardTextContent.indexOf(userInputValue);
+          let count = 0;
+
+          while (position !== -1) {
+            count++;
+            position = cardTextContent.indexOf(userInputValue, position + 1);
+          }
+          // Number of occurrences of user input value matching
+          card.dataset.matches = count;
+        } else {
+          card.dataset.matches = 0;
+          card.style.display = 'none';
+        }
+      });   
+  }
+
   /**
    * Returns an array of not duplicated data for search form 
    * Data about name, description and ingredients of recipes
 
@@ -0,0 +1,61 @@
+/**
+ * ------------------------------------------------------------
+ * Les Petits Plats utils/BinarySearch.js
+ * ------------------------------------------------------------
+ */
+
+class BinarySearch extends MainSearchBar {
+  constructor() {
+    super();
+  }
+
+  isUserValueMatches(subtring, array) {
+
+    let result = [];
+
+    this.isUserValueMatchesByRegex(subtring, array, result);
+
+    return result;
+
+  }
+
+  isUserValueMatchesByRegex(substring, array, matchingArray) {
+    // First and last index of array
+    let left = 0;
+    let right = array.length - 1;
+
+    while (left <= right) {
+      let middle = Math.floor((left + right) / 2);
+      let middleElement = array[middle];
+      const regExp = new RegExp(substring, 'gmi');
+
+      if (middleElement.toLowerCase().match(regExp)) {
+        
+        matchingArray.push(middleElement);
+
+        // Checks if other elements to the left of middle element match
+        let i = middle - 1;
+        while (i >= left && array[i].toLowerCase().match(regExp)) {
+          matchingArray.push(array[i]);
+          i--;
+        }
+
+        // Checks if other elements to the right of middle element match
+        let j = middle + 1;
+        while (j < right && array[j].toLowerCase().match(regExp)) {
+          matchingArray.push(array[j]);
+          j++;
+        }
+
+        return;
+
+      } else if (middleElement.toLowerCase() < substring.toLowerCase()) {
+        left = middle + 1;
+      } else {
+        right = middle - 1;
+      }
+    }
+    // No substring matches
+    return -1;
+  }
+}