EtownWholesaleDev · jacobrobertsdev · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025
diff --git a/css/styles.css b/css/styles.css
@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Sofia&display=swap");
 
 :root {
     --background-color: #ffffff;
     --accent: #313131;
-    --secondary: #F3B391;
+    --secondary: #f3b391;
     --text-color: #ffffff;
 }
 
@@ -26,6 +26,29 @@ header {
     flex-wrap: wrap;
 }
 
+.categories-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0.25rem;
+}
+
+.categories-container button {
+    border: solid 1px #313131;
+    border-radius: 100px;
+    background-color: transparent;
+    padding: 0.5rem 1rem;
+    min-width: 3rem;
+}
+
+.categories-container button:hover,
+.categories-container button:focus {
+    cursor: pointer;
+    background-color: var(--accent);
+    color: var(--background-color);
+}
+
 header h1 {
     font-size: 2em;
     margin: 0;
@@ -38,20 +61,6 @@ h1 {
     margin: 0;
 }
 
-nav {
-    margin: 20px 0;
-}
-
-nav a {
-    color: var(--text-color);
-    text-decoration: none;
-    margin: 0 15px;
-}
-
-nav a:hover {
-    text-decoration: underline;
-}
-
 main {
     width: 80%;
     margin: auto;
@@ -61,26 +70,27 @@ main {
     font-size: 0.9em;
 }
 
-.product-grid{
+.product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
     grid-gap: 20px;
     padding: 1em;
 }
 
-.product-grid article img{
+.product-grid article img {
     width: 100%;
     object-fit: contain;
     aspect-ratio: 1/1;
 }
 
-.product-grid article{
+.product-grid article {
     border-radius: 5px;
     aspect-ratio: 3/4;
     height: 100%;
     overflow: hidden;
 }
-.product-grid article div{
+
+.product-grid article div {
     height: 100%;
     overflow: hidden;
 }
@@ -95,41 +105,66 @@ footer {
     width: 100%;
 }
 
-.title{
+.title {
     font-size: 1em;
     text-align: left;
     text-overflow: ellipsis;
     max-height: 2em;
 }
 
-
-header .search{
+header .search {
     display: flex;
     align-items: center;
-    border: solid 1px #313131;
+    border: solid 1px var(--accent);
     border-radius: 100px;
 }
-.search:focus-within{
+
+.search:focus-within {
     outline: solid 1px #000000;
 }
-.search input{
-    padding: 0.5em;
+
+.search input {
+    padding: 0.5rem 1rem;
     border-radius: 5px;
     border: none;
     margin-right: 1em;
     background-color: transparent;
 }
-.search input:focus{
+
+.search input:focus {
     outline: none;
 }
-.search input::placeholder{
-    color: #313131;
+
+.search input::placeholder {
+    color: var(--accent);
 }
-.search button{
-    background-color: transparent;
-    color: white;
-    padding: 0.5em 1em;
-    border: none;
-    border-radius: 100px;
-    cursor: pointer;
+
+.search svg {
+    padding: 0.5rem;
+}
+
+.loader {
+    color: var(--accent);
+    position: absolute;
+    font-weight: bold;
+    font-size: 1rem;
+    letter-spacing: 0.1rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: loader 3s linear infinite;
+}
+
+@keyframes loader {
+    0% {
+        opacity: 0.1;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0.1;
+    }
 }
diff --git a/index.html b/index.html
@@ -11,20 +11,19 @@
 <body>
     <header>
         <h1>Shop</h1>
+        <div class="categories-container"></div>
         <div class="search">
-            <input type="text" placeholder="Search">
-            <button>
-                <svg width="20" height="20" viewBox="0 0 24 25" fill="#343C54" xmlns="http://www.w3.org/2000/svg"
-                    transform="rotate(0 0 0)">
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z"
-                        fill="#313131" />
-                </svg>
-            </button>
+            <input id="search" type="text" placeholder="Search all products">
+            <svg width="20" height="20" viewBox="0 0 24 25" fill="#343C54" xmlns="http://www.w3.org/2000/svg"
+                transform="rotate(0 0 0)">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z"
+                    fill="#313131" />
         </div>
     </header>
     <main>
         <section class="product-grid">
+            <p class="loader">...Loading Products</p>
         </section>
     </main>
     <footer>

diff --git a/js/scripts.js b/js/scripts.js
@@ -1,27 +1,96 @@
-/**
- * You are welcome to change and update any code within this file as part of your solution
- */
+// Cache for filtered product lists by category
+const categoryCache = {};
 
 // Fetch products from the API and display them on the page
-document.addEventListener('DOMContentLoaded', () => {
-    fetchProducts();
+document.addEventListener("DOMContentLoaded", () => {
+    fetchAllProducts();
 });
 
 // Fetch products from the API
-function fetchProducts() {
-    fetch('https://fakestoreapi.com/products')
-        .then(response => response.json())
-        .then(data => {
-            displayProducts(data);
-            displayCategories(getAllCategories(data));
+async function fetchAllProducts() {
+    try {
+        const response = await fetch("https://fakestoreapi.com/products");
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch products. HTTP Status code: ${response.status}. Message: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        displayProducts(data);
+        displayCategories(data, getAllCategories(data));
+        searchProducts(data);
+    } catch (error) {
+        console.log(error);
+        alert("An error occurred while fetching products. Please try again later.");
+    }
+}
+
+// Get unique product categories from data returned by FetchAllProducts
+function getAllCategories(products) {
+    return [...new Set(products.map(product => product.category))];
+}
+
+// Create button element for each category
+function createButtonElement(category) {
+    const button = document.createElement("button");
+    button.dataset.category = category;
+    button.textContent = category;
+    return button;
+}
+
+// Append button for each category to the page
+function displayCategories(data, categories) {
+    const categoryContainer = document.querySelector(".categories-container");
+
+    ["all", ...categories].forEach(category => {
+        categoryContainer.appendChild(createButtonElement(category));
+    });
+
+    // Setup click event listeners once buttons have been added
+    handleClicks(data);
+}
+
+// Handle category button clicks, updating product grid
+function handleClicks(data) {
+    const buttons = document.querySelectorAll("button[data-category]");
+
+    buttons.forEach(button =>
+        button.addEventListener("click", (e) => {
+            // Get category from target element data attribute
+            const selectedCategory = e.target.dataset.category;
+
+            // Add matching products to cache if not present
+            if (!categoryCache[selectedCategory] && selectedCategory !== "all") {
+                categoryCache[selectedCategory] = data.filter(product => product.category === selectedCategory);
+            }
+
+            // Display products matching the selected category
+            const products = selectedCategory === "all" ? data : categoryCache[selectedCategory];
+            displayProducts(products);
         })
-        .catch(error => console.error('Error fetching products:', error));
+    );
+}
+
+// Add Search functionality
+function searchProducts(data) {
+    const input = document.querySelector('#search');
+
+    input.addEventListener('input', () => {
+        const query = input.value.trim().toLowerCase();
+
+        if (!query) {
+            displayProducts(data);
+        } else {
+            const filtered = data.filter(product => product.title.toLowerCase().includes(query));
+            displayProducts(filtered);
+        }
+    });
 }
 
 // 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);
@@ -30,8 +99,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 = `
         <img src="${product.image}" alt="${product.title}" class="product-image">
         <h2 class="title">${product.title}</h2>