From 9f4d6d5b865ce1fe0916b998ab18078207f2fc69 Mon Sep 17 00:00:00 2001 From: Camron2889 Date: Thu, 2 Jan 2025 03:31:42 -0500 Subject: [PATCH 01/31] Refactor in favor of async/await vs chaining .then() --- js/scripts.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/js/scripts.js b/js/scripts.js index c49bd8b..ca6deeb 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -3,18 +3,15 @@ */ // Fetch products from the API and display them on the page -document.addEventListener('DOMContentLoaded', () => { - fetchProducts(); +document.addEventListener('DOMContentLoaded', async () => { + [products] = await Promise.all([fetchProducts()]); + displayProducts(products); }); // Fetch products from the API -function fetchProducts() { - fetch('https://fakestoreapi.com/products') +async function fetchProducts() { + return fetch('https://fakestoreapi.com/products') .then(response => response.json()) - .then(data => { - displayProducts(data); - displayCategories(getAllCategories(data)); - }) .catch(error => console.error('Error fetching products:', error)); } From be4d5bb0f0c4da89e908063d6c215a62d1443b0f Mon Sep 17 00:00:00 2001 From: Camron2889 Date: Thu, 2 Jan 2025 03:38:13 -0500 Subject: [PATCH 02/31] Replace single- with double-quotes --- js/scripts.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/scripts.js b/js/scripts.js index ca6deeb..037de1a 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -3,22 +3,22 @@ */ // Fetch products from the API and display them on the page -document.addEventListener('DOMContentLoaded', async () => { [products] = await Promise.all([fetchProducts()]); +document.addEventListener("DOMContentLoaded", async () => { displayProducts(products); }); // Fetch products from the API async function fetchProducts() { - return fetch('https://fakestoreapi.com/products') + return fetch("https://fakestoreapi.com/products") .then(response => response.json()) .catch(error => console.error('Error fetching products:', error)); } // Display all products on the page based on the given data function displayProducts(products) { - const productGrid = document.querySelector('.product-grid'); - productGrid.innerHTML = ''; + const productGrid = document.querySelector(".product-grid"); + productGrid.innerHTML = ""; products.forEach(product => { const productElement = createProductElement(product); productGrid.appendChild(productElement); @@ -27,8 +27,8 @@ function displayProducts(products) { // Function to build each product card element function createProductElement(product) { - const productElement = document.createElement('article'); - productElement.classList.add('product'); + const productElement = document.createElement("article"); + productElement.classList.add("product"); productElement.innerHTML = ` ${product.title}

${product.title}

From fe63ac0bd6c930b2343d347ddd30baadfcf0e593 Mon Sep 17 00:00:00 2001 From: Camron2889 Date: Thu, 2 Jan 2025 03:41:11 -0500 Subject: [PATCH 03/31] Add fetchCategories() --- js/scripts.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/js/scripts.js b/js/scripts.js index 037de1a..4806aef 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -3,8 +3,8 @@ */ // Fetch products from the API and display them on the page - [products] = await Promise.all([fetchProducts()]); document.addEventListener("DOMContentLoaded", async () => { + [products, categories] = await Promise.all([fetchProducts(), fetchCategories()]); displayProducts(products); }); @@ -12,7 +12,21 @@ document.addEventListener("DOMContentLoaded", async () => { async function fetchProducts() { return fetch("https://fakestoreapi.com/products") .then(response => response.json()) - .catch(error => console.error('Error fetching products:', error)); + .catch(error => console.error("Error fetching products:", error)); +} + +// Fetch categories from the API, checking sessionStorage first +async function fetchCategories() { + const categories = sessionStorage.getItem("productCategories"); + if (categories) return JSON.parse(categories); + + return fetch("https://fakestoreapi.com/products/categories") + .then(response => response.json()) + .then(data => { + sessionStorage.setItem("productCategories", JSON.stringify(data)); + return data; + }) + .catch(error => console.error("Error fetching categories:", error)); } // Display all products on the page based on the given data From c97dc8eeb818eca1b2f33020ee97678084675c37 Mon Sep 17 00:00:00 2001 From: Camron2889 Date: Thu, 2 Jan 2025 03:50:51 -0500 Subject: [PATCH 04/31] Add category parameter to fetchProducts() --- js/scripts.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/js/scripts.js b/js/scripts.js index 4806aef..bc12f43 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -9,8 +9,12 @@ document.addEventListener("DOMContentLoaded", async () => { }); // Fetch products from the API -async function fetchProducts() { - return fetch("https://fakestoreapi.com/products") +async function fetchProducts(category) { + let requestUrl = "https://fakestoreapi.com/products"; + if (category) { + requestUrl += `/category/${category}`; + } + return fetch(requestUrl) .then(response => response.json()) .catch(error => console.error("Error fetching products:", error)); } From 3889ab10a58e52c857b5251cca3f832936372a88 Mon Sep 17 00:00:00 2001 From: Camron2889 Date: Thu, 2 Jan 2025 04:08:41 -0500 Subject: [PATCH 05/31] Add filters div --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 3e7379b..98a96d4 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@

Shop

+