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 @@
- + -
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 += `
@@ -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}`; + }); +}