From c194723d1b557818130568faa94ac29d4a11095c Mon Sep 17 00:00:00 2001
From: SuperSimpleDev <simon@supersimple.dev>
Date: Wed, 1 May 2024 01:31:14 -0400
Subject: [PATCH] 18p Solution

---
 2-copy-of-code/lesson-18/amazon.html       |  4 ++--
 2-copy-of-code/lesson-18/scripts/amazon.js | 23 ++++++++++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/2-copy-of-code/lesson-18/amazon.html b/2-copy-of-code/lesson-18/amazon.html
index 0c4c299..a17d8bf 100644
--- a/2-copy-of-code/lesson-18/amazon.html
+++ b/2-copy-of-code/lesson-18/amazon.html
@@ -30,9 +30,9 @@
       </div>
 
       <div class="amazon-header-middle-section">
-        <input class="search-bar" type="text" placeholder="Search">
+        <input class="search-bar js-search-bar" type="text" placeholder="Search">
 
-        <button class="search-button">
+        <button class="search-button js-search-button">
           <img class="search-icon" src="images/icons/search-icon.png">
         </button>
       </div>
diff --git a/2-copy-of-code/lesson-18/scripts/amazon.js b/2-copy-of-code/lesson-18/scripts/amazon.js
index 442c5b1..46ace76 100644
--- a/2-copy-of-code/lesson-18/scripts/amazon.js
+++ b/2-copy-of-code/lesson-18/scripts/amazon.js
@@ -7,7 +7,20 @@ loadProducts(renderProductsGrid);
 function renderProductsGrid() {
   let productsHTML = '';
 
-  products.forEach((product) => {
+  const url = new URL(window.location.href);
+  const search = url.searchParams.get('search');
+
+  let filteredProducts = products;
+
+  // If a search exists in the URL parameters,
+  // filter the products that match the search.
+  if (search) {
+    filteredProducts = products.filter((product) => {
+      return product.name.includes(search);
+    });
+  }
+
+  filteredProducts.forEach((product) => {
     productsHTML += `
       <div class="product-container">
         <div class="product-image-container">
@@ -84,4 +97,10 @@ function renderProductsGrid() {
         updateCartQuantity();
       });
     });
-}
\ No newline at end of file
+
+  document.querySelector('.js-search-button')
+    .addEventListener('click', () => {
+      const search = document.querySelector('.js-search-bar').value;
+      window.location.href = `amazon.html?search=${search}`;
+    });
+}