Courses eBook Freelance Mastery Youtube FAQ Blog Guide

Product Filtering UI With Vanilla JS & Tailwind CSS

javascript Feb 26, 2024

It's been a while since I did any vanilla JavaScript projects and I know some of the more intermediate and advanced developers may not be into this, but I know the people in the beginner range appreciate this stuff and honestly I like doing these types of projects.

This project is fairly simple but will get you more familiar with the DOM (Document Object Model) as we will be dynamically updating the page without having to refresh. We'll be dynamically changing CSS values through JavaScript. We'll also be working with high order array methods like forEach, map and filter. If you guys would like me to re-create this project in React, Vue or Svelte or even something else, let me know.

This project was actually just added to my 20 Vanilla JavaScript Projects course. I will have the repo link below, however I have changed some of the naming conventions. The exact code from this tutorial can be found in this Codepen.

So let's go over what we'll be building. It's an interface for an online store product section. We will be creating it from scratch using Tailwind CSS, however if you're not interested in writing the HTML, I'll have timestamps so you can go right to the JavaScript.

Once we create the interface, we're going to first add the ability to add and remove products to and from the cart, which will increment and decrement this number here. You can take that further if you want and have an actual cart with local storage, but that's not the main part of the project. The main part is the filtering. So we want to be able to check these categories on the side and only show products from the selected categories. We also want to be able to search for products with the search box. We also want to do this in a way where if categories are selected, then whatever we add in the searchbox should only apply to products in those categories.

Images and products

You will need the images for this project. I'm including the final code for the project below. You can get the images from the Github Repo or the demo.

Project Demo: https://codepen.io/bradtraversy/pen/oNVKXBo

Github Repo (Some naming conventions are different) https://github.com/bradtraversy/vanillawebprojects

The Files

Let's create the files. All that we need is an index.html, script.js and a folder named images. You can get the images from the link above.

The HTML

Let's add the HTML. I will be hardcoding the products and their info, however, when we get into the JavaScript, we will remove all of the hardcoded HTML because it will be added daynamically through the JS.

Let's start with the main html, head, body tags and include the Tailwind CDN as well as a link to the script.js file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"> </script>
    <title>Tech Store</title>
  </head>
  <body class="bg-gray-800 text-white">
    <script src="/script.js"> </script>
  </body>
</html>

We added a background and text color on to the body.

It's not really a navbar because there is no navigation, but we will add a search input and the cart with the number of items:

<nav class="bg-gray-900 p-4 mb-6">
  <div
    class="container max-w-6xl mx-auto flex flex-col sm:flex-row gap-8 items-center"
  >
    <!-- Search area -->
    <div class="relative w-full">
      <input
        type="text"
        id="search"
        class="bg-gray-700 rounded-full p-2 pl-10 transition focus:w-full"
        placeholder="Search products..."
      />
      <svg
        class="absolute left-2 top-1/2 -translate-y-1/2"
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke="currentColor"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
        <path d="M21 21l-6 -6" />
      </svg>
    </div>

    <!-- Cart icon -->
    <span class="relative text-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        #
        height="24"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke="currentColor"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304z"
        />
        <path d="M9 11v-5a3 3 0 0 1 6 0v5" />
      </svg>
      <small
        id="cart-count"
        class="bg-red-500 text-xs text-white w-4 h-4 absolute -top-2 -right-2 rounded-full"
        >0</small
      >
    </span>
  </div>
</nav>

We also included some SVG icons for the search and the cart.

Products & Categories

Under the <nav>, let's add a <main> the categories with checkboxes and the products wrapper:

<main class="flex flex-col md:flex-row container mx-auto max-w-6xl">
  <div class="space-y-4 p-2 w-full md:max-w-[10rem]">
    <h2 class="text-2xl">Filters</h2>
    <h3 class="text-xl mb-2">Category</h3>
    <div id="filters-container" class="text-xl space-y-2">
      <div>
        <input type="checkbox" class="check" id="cameras" />
        <label for="cameras">Cameras</label>
      </div>
      <div>
        <input type="checkbox" class="check" id="smartphones" />
        <label for="smartphones">Smartphones</label>
      </div>
      <div>
        <input type="checkbox" class="check" id="games" />
        <label for="games">Games</label>
      </div>
      <div>
        <input type="checkbox" class="check" id="televisions" />
        <label for="televisions">Televisions</label>
      </div>
    </div>
  </div>

  <!-- Products wrapper -->
  <div
    id="products-wrapper"
    class="w-full max-w-4xl mx-auto grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-6 place-content-center p-4"
  ></div>
</main>

The wrapper is empty, which is what we want because the actual products will be added from the JavaScript. However, let's put a few hardcoded products in there for now:

<!-- Products wrapper -->
<div
  id="products-wrapper"
  class="w-full max-w-4xl mx-auto grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-6 place-content-center p-4"
>
  <div class="item space-y-2">
    <div
      class="bg-gray-100 flex justify-center relative overflow-hidden group cursor-pointer border rounded-xl"
    >
      <img
        src="/images/playstation_5.png"
        alt=""
        class="w-full h-full object-cover"
      />
      <button
        class="status bg-black text-white absolute bottom-0 left-0 right-0 text-center py-2 translate-y-full transition group-hover:translate-y-0"
      >
        Add To Cart
      </button>
    </div>
    <p class="text-xl">Playstation 5</p>
    <strong>$399</strong>
  </div>

  <div class="item space-y-2">
    <div
      class="bg-gray-100 flex justify-center relative overflow-hidden group cursor-pointer border rounded-xl"
    >
      <img
        src="/images/samsung_galaxy.png"
        alt=""
        class="w-full h-full object-cover"
      />
      <button
        class="status bg-black text-white absolute bottom-0 left-0 right-0 text-center py-2 translate-y-full transition group-hover:translate-y-0"
      >
        Add To Cart
      </button>
    </div>
    <p class="text-xl">Samsung Galaxy</p>
    <strong>$399</strong>
  </div>

  <div class="item space-y-2">
    <div
      class="bg-gray-100 flex justify-center relative overflow-hidden group cursor-pointer border rounded-xl"
    >
      <img
        src="/images/playstation_5.png"
        alt=""
        class="w-full h-full object-cover"
      />
      <span
        class="status bg-black text-white absolute bottom-0 left-0 right-0 text-center py-2 translate-y-full transition group-hover:translate-y-0"
        >Add To Cart</span
      >
    </div>
    <p class="text-xl">Playstation 5</p>
    <strong>$399</strong>
  </div>

  <div class="item space-y-2">
    <div
      class="bg-gray-100 flex justify-center relative overflow-hidden group cursor-pointer border rounded-xl"
    >
      <img
        src="/images/cannon_eos_camera.png"
        alt=""
        class="w-full h-full object-cover"
      />
      <button
        class="status bg-black text-white absolute bottom-0 left-0 right-0 text-center py-2 translate-y-full transition group-hover:translate-y-0"
      >
        Add To Cart
      </button>
    </div>
    <p class="text-xl">Cannon EOS Camera</p>
    <strong>$749</strong>
  </div>
</div>

That's it for the HTML. Now we can start on the JavaScript.

The Data

In a real applicatiion, this data would most likely come from an API that interacts with a database, but we're just going to have it hardcoded in an array. Your script.js file should have this products array:

const products = [
  {
    name: 'Sony Playstation 5',
    url: 'images/playstation_5.png',
    category: 'games',
    price: 499.99,
  },
  {
    name: 'Samsung Galaxy',
    url: 'images/samsung_galaxy.png',
    category: 'smartphones',
    price: 399.99,
  },
  {
    name: 'Cannon EOS Camera',
    url: 'images/cannon_eos_camera.png',
    category: 'cameras',
    price: 749.99,
  },
  {
    name: 'Sony A7 Camera',
    url: 'images/sony_a7_camera.png',
    category: 'cameras',
    price: 1999.99,
  },
  {
    name: 'LG TV',
    url: 'images/lg_tv.png',
    category: 'televisions',
    price: 799.99,
  },
  {
    name: 'Nintendo Switch',
    url: 'images/nintendo_switch.png',
    category: 'games',
    price: 299.99,
  },
  {
    name: 'Xbox Series X',
    url: 'images/xbox_series_x.png',
    category: 'games',
    price: 499.99,
  },
  {
    name: 'Samsung TV',
    url: 'images/samsung_tv.png',
    category: 'televisions',
    price: 1099.99,
  },
  {
    name: 'Google Pixel',
    url: 'images/google_pixel.png',
    category: 'smartphones',
    price: 499.99,
  },
  {
    name: 'Sony ZV1F Camera',
    url: 'images/sony_zv1f_camera.png',
    category: 'cameras',
    price: 799.99,
  },
  {
    name: 'Toshiba TV',
    url: 'images/toshiba_tv.png',
    category: 'televisions',
    price: 499.99,
  },
  {
    name: 'iPhone 14',
    url: 'images/iphone_14.png',
    category: 'smartphones',
    price: 999.99,
  },
];

Now we want to display each of these products on the page via JavaScript.

Selecting the DOM Elements

Lets select the items from the DOM that we need:

// Get DOM elements
const productsWrapper = document.getElementById('products-wrapper');
const checkboxes = document.querySelectorAll('.check');
const filtersContainer = document.getElementById('filters-container');
const searchInput = document.getElementById('search');
const cartCount = document.getElementById('cart-count');

We will also intitialze the cart item count and the array of product elements. When I say elements, I mean the actual HTML output for each product:

// Initialize cart item count
let cartItemCount = 0;

// Initialize products
const productElements = [];

Now we need to loop over the products and create a new product element for each one and push it on to the productElements array:

// Loop over the products and create the product elements
products.forEach((product) => {
  const productElement = document.createElement('div');

  productElement.className = 'item space-y-2';

  productElement.innerHTML = `<div
  class="bg-gray-100 flex justify-center relative overflow-hidden group cursor-pointer border rounded-xl"
>
  <img
    src="${product.url}"
    alt="${product.name}"
    class="w-full h-full object-cover"
  />
  <button
    class="status bg-black text-white absolute bottom-0 left-0 right-0 text-center py-2 translate-y-full transition group-hover:translate-y-0"
    >Add To Cart</
  >
</div>
<p class="text-xl">${product.name}</p>
<strong>$${product.price.toLocaleString()}</strong>`;

  productElements.push(productElement);
  productsWrapper.appendChild(productElement);
});

We first create the product element by calling the createProductElement method. We then add a class to the product element and set the innerHTML to the product image, name and price. We then push the product element on to the productElements array and append it to the productsWrapper.

You should now see all of the products on the page.

Function Refactor

This is a bit messy. So let's refactor the code and create a function for creating the product element:

// Create product element
function createProductElement(product) {
  const productElement = document.createElement('div');

  productElement.className = 'item space-y-2';

  productElement.innerHTML = `<div
  class="bg-gray-100 flex justify-center relative overflow-hidden group cursor-pointer border rounded-xl"
>
  <img
    src="${product.url}"
    alt="${product.name}"
    class="w-full h-full object-cover"
  />
  <button
    class="status bg-black text-white absolute bottom-0 left-0 right-0 text-center py-2 translate-y-full transition group-hover:translate-y-0"
    >Add To Cart</button
  >
</div>
<p class="text-xl">${product.name}</p>
<strong>$${product.price.toLocaleString()}</strong>`;

  return productElement;
}

Now we have a function that we can call to create the product element. This makes the code a bit cleaner and easier to read. Let's use it within the loop:

// Loop over the products and create the product elements
products.forEach((product) => {
  const productElement = createProductElement(product);
  productElements.push(productElement);
  productsWrapper.appendChild(productElement);
});

Add & Remove From Cart

Let's add the ability to add and remove products from the cart. We will do this by adding an event listener and a new function.

In the createProductElement function, add the following line right above the return statement:

productElement.querySelector('.status').addEventListener('click', updateCart);

This will add an event listener to the button that will call the updateCart function when clicked.

Now let's create the updateCart function:

// Toggle add/remove from cart
function updateCart(e) {
  const statusEl = e.target;

  if (statusEl.classList.contains('added')) {
    // Remove from cart
    statusEl.classList.remove('added');
    statusEl.innerText = 'Add To Cart';
    statusEl.classList.remove('bg-red-600');
    statusEl.classList.add('bg-gray-800');

    cartItemCount--;
  } else {
    // Add to cart
    statusEl.classList.add('added');
    statusEl.innerText = 'Remove From Cart';
    statusEl.classList.remove('bg-gray-800');
    statusEl.classList.add('bg-red-600');

    cartItemCount++;
  }

  // Update cart item count
  cartCount.innerText = cartItemCount.toString();
}

This function will toggle the class of the button and update the cart item count.

Filtering

Now let's add the ability to filter the products by category. We will do this by adding an event listener to the checkboxes and a new function.

Add this code under the forEach loop:

// Add filter event listeners
filtersContainer.addEventListener('change', filterProducts);
searchInput.addEventListener('input', filterProducts);

We will have both the search box and the checkboxes call the same function. This function will filter the products based on the search input and the checked categories.

Now let's create the filterProducts function:

// Filter products by search or checkbox
function filterProducts( ) {
  // Get search term
  const searchTerm = searchInput.value.trim().toLowerCase();
  // Get checked categories
  const checkedCategories = Array.from(checkboxes)
    .filter((check) => check.checked)
    .map((check) => check.id);

  // Loop over products and check for matches
  productElements.forEach((productElement, index) => {
    const product = products[index];

    // Check to see if product matches the search or checked items
    const matchesSearchTerm = product.name.toLowerCase().includes(searchTerm);
    const isInCheckedCategory =
      checkedCategories.length === 0 ||
      checkedCategories.includes(product.category);

    // Show or hide product based on matches
    if (matchesSearchTerm && isInCheckedCategory) {
      productElement.classList.remove('hidden');
    } else {
      productElement.classList.add('hidden');
    }
  });
}

This function will get the search term and the checked categories. It will then loop over the products and check if the product matches the search term and the checked categories. If it does, it will remove the hidden class, if not, it will add the hidden class.

That's it. You should now have a fully functional product filtering UI. You can add products to the cart, filter by category and search for products. If you want to take it further, you can add a cart with local storage and a checkout page. You can also add more categories and products.

Stay connected with news and updates!

Join our mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.

We hate SPAM. We will never sell your information, for any reason.

Categories

All Categories bootstrap career courses & announcements database html & css htmx javascript javascript build tools next.js node.js open ai productivity python react vue