# Building a Lightweight Product Filter with Vanilla JavaScript

Building a Lightweight Product Filter with Vanilla JavaScript

While building a small e-commerce project, I wanted users to filter products instantly without refreshing the page. Instead of relying on a frontend framework, I opted for a simple solution using HTML data attributes, vanilla JavaScript, and a little CSS.

The goal was straightforward: let visitors filter items by size while keeping the interface fast, responsive, and easy to maintain.

HTML Structure

Each product card stores its information in data-* attributes. This keeps the markup clean and makes filtering straightforward.