Creating a Category Filter Using HTML CSS and JavaScript

By
Asif Ali
-
0

Hey guys today we are going to discuss all about Category Filter using HTML CSS and JavaScript. It’s a very helpful project, I don’t know if you saw the project that used different types of websites.

In this tutorial, we’ll guide you through the process of creating a category filter using HTML CSS, and JavaScript. A category filter is a useful feature for organizing and displaying content on websites, especially when you have a variety of items or articles to present to your audience. With this filter, users can easily sort and view content based on predefined categories.

Creating a Category Filter Using HTML CSS and JavaScript

Let’s say I’ve many categories of data so, I will create different category pages to display the products. That’s is normal way you can do it, but I’ve another tactic that you can use to display all of the category or product data on one page, the user will able to see each product by clicking the particular category button or link.

Requirements: Before we begin, make sure you have the following tools and knowledge:

  1. Basic understanding of HTML, CSS, and JavaScript.
  2. A text editor for writing code (e.g., Visual Studio Code, Sublime Text, or Notepad++).
  3. A web browser for testing your code (e.g., Google Chrome, Mozilla Firefox, or Microsoft Edge).

Creating a Category Filter Using HTML CSS and JavaScript

Let’s look at that the tutorial about creating a category Filter using HTML CSS and JavaScript. Inside the project, we will learn how to search for Products when users find something from the products. Guys, I’ve made the tutorial, you can watch it, I’ve explained everything step by step from scratch.

I hope you’ve watched the complete tutorial and You’ve learned everything you want. If you face any problems, don’t worry I’m going to share with you the source code of the project.

You May Also Like:

HTML Structure:
Start by creating the HTML structure for your category filter. You’ll need an HTML container to hold your content and category buttons. Each item should have a category assigned to it using a data attribute.

  <header>
      <div class="container">
        <nav>
          <div class="logo">
            <img src="./imgs/logo-1.png" alt="" />
            <h3>Gamez</h3>
          </div>
          <ul>
            <!-- <li><a href="#" data-id="All">All</a></li>
            <li><a href="#" data-id="Racing">Racing</a></li>
            <li><a href="#" data-id="Simulator">Simulator</a></li>
            <li><a href="#" data-id="Action">Action</a></li>
            <li><a href="#" data-id="Adventure">Adventure</a></li> -->
          </ul>
          <div class="search">
            <form action="#">
              <input
                type="search"
                placeholder="Category or Title"
                class="form_control"
              />
              <button type="button" class="btn_search">
                <i class="fas fa-search"></i>
              </button>
            </form>
          </div>
        </nav>
      </div>
    </header>

These are the HTML basic codes that are used to display the buttons or menus. You need to use those codes to display the menus. Once you do that, you need to use CSS to Design that.

CSS Styling:
Style your HTML elements using CSS to make them visually appealing. You can define the layout, colors, and design according to your website’s theme.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

header {
  background-color: #fff;
  padding: 1rem 0;
  box-shadow: 1px 2px 10px #000;
}

a {
  text-decoration: none;
}

body {
  font-family: "poppins", sans-serif;
  background-color: #ddd;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo h3 {
  font-size: 2rem;
  margin-left: 0.5rem;
  color: #2c3e50;
  font-weight: 600;
}

.logo img {
  width: 20%;
  object-fit: cover;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  padding: 0.5rem 1rem;
  border: 1px solid #2c3e50;
  color: #000;
  border-radius: 5px;
}

.search {
  position: relative;
}

.search input {
  outline: none;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-family: inherit;
}

.search button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.55rem;
  outline: none;
  border: none;
  background-color: #2c3e50;
  color: #fff;
  border-radius: 0px 5px 5px 0px;
  font-family: inherit;
  cursor: pointer;
}

Once you use above mentioned codes, your menus are ready to do the operations such as displaying the products by clicking the buttons or links. but you need to design the products section, Let’s look at how to design the products section.

 <main>
      <div class="container">
        <div class="products_wrapper">
          <!-- <div class="products">
            <div class="pr_img">
              <img src="./imgs/img-1.jpg" alt="" />
            </div>
            <div class="content">
              <h3 class="title">Forza Horizon5</h3>
              <p class="release_date">Realse Date: Dec 19, 2021</p>
              <p class="price">Price: $15</p>
            </div>
          </div>
          <div class="products">
            <div class="pr_img">
              <img src="./imgs/img-2.jpg" alt="" />
            </div>
            <div class="content">
              <h3 class="title">Forza Horizon5</h3>
              <p class="release_date">Realse Date: Dec 19, 2021</p>
              <p class="price">Price: $15</p>
            </div>
          </div>
          <div class="products">
            <div class="pr_img">
              <img src="./imgs/img-3.jpg" alt="" />
            </div>
            <div class="content">
              <h3 class="title">Forza Horizon5</h3>
              <p class="release_date">Realse Date: Dec 19, 2021</p>
              <p class="price">Price: $15</p>
            </div>
          </div>
          <div class="products">
            <div class="pr_img">
              <img src="./imgs/img-4.jpg" alt="" />
            </div>
            <div class="content">
              <h3 class="title">Forza Horizon5</h3>
              <p class="release_date">Realse Date: Dec 19, 2021</p>
              <p class="price">Price: $15</p>
            </div>
          </div> -->
        </div>
      </div>
    </main>

Here are the products section HTML codes that are used to display the products, but the last thing we need to add to design the product section.

/* product start */
.products_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 5rem 0;
  grid-gap: 2rem;
}

.products {
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.pr_img img {
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.content {
  padding: 1rem;
}

.content .title {
  font-size: 1rem;
  color: #2c3e50;
}

.content .release_date {
  color: #bdc3c7;
}

.content .price {
  background-color: #2c3e50;
  padding: 0.5rem;
  width: 60%;
  color: #fff;
  margin: 0.5rem 0;
}

We’ve successfully designed the page that is used to display all products and menus or links that are used to perform the operations such as filtering the category.

JavaScript Logic:
Implement the filtering functionality using JavaScript. You’ll need event listeners to respond to user interactions (e.g., button clicks). When a category button is clicked, the script should hide/show items based on their assigned categories.

First of All, you need to make a object and inside the object you need to add the key and values, I’ve mentioned object code on below, you can check it now.

const gameData = [
  {
    id: 1,
    title: "Cryber Punck",
    category: "Action",
    releaseDate: "Dec 19, 2014",
    img: "./imgs/img-1.jpg",
    price: "Free",
  },

  {
    id: 2,
    title: "EA SPORTS FC™",
    category: "Sports",
    releaseDate: "29 Sep, 2023",
    img: "./imgs/img-2.jpg",
    price: "$69.99 USD",
  },

  {
    id: 3,
    title: "Lies of P",
    category: "Action",
    releaseDate: "18 Sep, 2023",
    img: "./imgs/img-3.jpg",
    price: "$59.99 USD",
  },

  {
    id: 4,
    title: "Apex Legends™",
    category: "Action",
    releaseDate: "5 Nov, 2020",
    img: "./imgs/img-4.jpg",
    price: "Free",
  },

  {
    id: 5,
    title: "War Thunder",
    category: "Action",
    releaseDate: "15 Aug, 2013",
    img: "./imgs/img-5.jpg",
    price: "Free",
  },

  {
    id: 6,
    title: "Grand Theft Auto V",
    category: "Action",
    releaseDate: "14 Apr, 2015",
    img: "./imgs/img-6.jpg",
    price: "$20.61 USD",
  },

  {
    id: 7,
    title: "Farlight 84",
    category: "Action",
    releaseDate: "21 Sep, 2023",
    img: "./imgs/img-7.jpg",
    price: "Free",
  },

  {
    id: 8,
    title: "Resident Evil 4",
    category: "Action",
    releaseDate: "24 Mar, 2023",
    img: "./imgs/img-8.jpg",
    price: "$59.99 USD",
  },

  {
    id: 9,
    title: "The Elder Scrolls",
    category: "Adventure",
    releaseDate: "4 Apr, 2014",
    img: "./imgs/img-9.jpg",
    price: "$19.99 USD",
  },

  {
    id: 10,
    title: "Forza Horizon 5",
    category: "Racing",
    releaseDate: "9 Nov, 2021",
    img: "./imgs/img-11.jpg",
    price: "$32.78 USD",
  },

  {
    id: 11,
    title: "DiRT Rally 2.0",
    category: "Racing",
    releaseDate: "26 Feb, 2019",
    img: "./imgs/img-12.jpg",
    price: "$04.99 USD",
  },

  {
    id: 12,
    title: "BeamNG.drive",
    category: "Simulator",
    releaseDate: "29 May, 2015",
    img: "./imgs/img-13.jpg",
    price: "$04.99 USD",
  },

  {
    id: 13,
    title: "Need for Speed™ Heat",
    category: "Racing",
    releaseDate: "8 Nov, 2019",
    img: "./imgs/img-14.jpg",
    price: "$24.99 USD",
  },

  {
    id: 14,
    title: "SnowRunner",
    category: "Simulator",
    releaseDate: "8 Nov, 2019",
    img: "./imgs/img-15.jpg",
    price: "$23.99 USD",
  },

  {
    id: 15,
    title: "Cities: Skylines",
    category: "Simulator",
    releaseDate: "10 Mar, 2015",
    img: "./imgs/img-16.jpg",
    price: "$12.99 USD",
  },

  {
    id: 16,
    title: "Farming Simulator 22",
    category: "Simulator",
    releaseDate: "22 Nov, 2021",
    img: "./imgs/img-17.jpg",
    price: "$39.99 USD",
  },

  {
    id: 17,
    title: "Hearts of Iron IV",
    category: "Adventure",
    releaseDate: "6 Jun, 2016",
    img: "./imgs/img-18.jpg",
    price: "$16.99 USD",
  },

  {
    id: 18,
    title: "Assetto Corsa",
    category: "Racing",
    releaseDate: "19 Dec, 2014",
    img: "./imgs/img-19.jpg",
    price: "$16.99 USD",
  },
];

Once you make an object and store multiple keys and values, you need to add events when the user clicks on a particular link or button, who will be able to see the particular category products on the same page.

const productContainer = document.querySelector(".products_wrapper");
const ulEl = document.querySelector("ul");
const btnEl = document.querySelector(".btn_search");
const inputEl = document.querySelector(".form_control");

// display all dynamic data
window.addEventListener("DOMContentLoaded", () => {
  displayGameData(gameData);

  //getting unique category
  const categories = gameData.reduce(
    function (values, item) {
      if (!values.includes(item.category)) {
        values.push(item.category);
      }
      return values;
    },
    ["All"],
  );

  const categoryBtns = categories
    .map(function (category) {
      return `<li><a href="#" data-id="${category}">${category}</a></li>`;
    })
    .join("");
  ulEl.innerHTML = categoryBtns;

  // links
  const linksEl = document.querySelectorAll("li a");
  linksEl.forEach((links) => {
    links.addEventListener("click", (e) => {
      const category = e.target.dataset.id;
      const gameCategory = gameData.filter(function (data) {
        if (data.category === category) {
          return data;
        }
      });

      if (category === "All") {
        displayGameData(gameData);
      } else {
        displayGameData(gameCategory);
      }
    });
  });
});

// function display all games
function displayGameData(gamez) {
  let displayData = gamez.map(function (cat_items) {
    return `<div class="products">
            <div class="pr_img">
              <img src="${cat_items.img}" alt="" />
            </div>
            <div class="content">
              <h3 class="title">${cat_items.title}</h3>
              <p class="release_date">Realse Date: ${cat_items.releaseDate}</p>
              <p class="price">Price: ${cat_items.price}</p>
            </div>
          </div>`;
  });
  displayData = displayData.join("");
  productContainer.innerHTML = displayData;
}

// search
btnEl.addEventListener("click", (e) => {
  let searchValue = inputEl.value;

  if (searchValue !== "") {
    let searchCategory = gameData.filter(function (data) {
      if (data.title.includes(searchValue)) {
        return data;
      } else if (data.category.includes(searchValue)) {
        return data;
      }
    });

    if (searchCategory) {
      displayGameData(searchCategory);
    }

    inputEl.value = "";
  } else {
    alert("Please Search The Category or Title !");
  }
});

Ensure that your category filter is accessible to all users, including those with disabilities. Document your code, especially if you plan to share it with others. Provide clear comments and instructions on how to implement the category filter on different web pages.

Conclusion:
Creating a category filter using HTML CSS and JavaScript can enhance the user experience on your website by allowing users to easily sort and view content based on their interests. By following this tutorial and customizing it to your specific needs, you can create an effective category filter for your web projects.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.