Build an Interactive Job Role Filter in JavaScript

Build an Interactive Job Role Filter with JavaScript

We’re going to create a dynamic job role filter using plain HTML, CSS, and JavaScript. Users will be able to:

Select one or multiple categories like Frontend, Backend, DevOps, etc.
Instantly see only the matching roles, without reloading the page.
Enjoy a sleek UI with smooth animations.

💡 This is perfect for career pages, portfolios, or tech learning platforms.

Building the HTML Structure

We’ll define:

A header with the title
A filter bar with clickable tags
A grid to display job cards

<div class="job-filter-container">
  <h1>Explore Tech Job Roles</h1>

  <div class="filter-tags">
    <button data-role="all" class="active">All</button>
    <button data-role="frontend">Frontend</button>
    <button data-role="backend">Backend</button>
    <button data-role="fullstack">Fullstack</button>
    <button data-role="devops">DevOps</button>
  </div>

  <div class="job-cards">
    <div class="job-card" data-role="frontend">Frontend Developer</div>
    <div class="job-card" data-role="backend">Backend Developer</div>
    <div class="job-card" data-role="fullstack">Fullstack Engineer</div>
    <div class="job-card" data-role="devops">DevOps Engineer</div>
    <div class="job-card" data-role="frontend">UI/UX Developer</div>
    <!-- Add more roles -->
  </div>
</div>
Code language: HTML, XML (xml)

🎯 Tip: Keep your structure semantic and minimal for better performance and SEO.

Styling It with CSS (Glassmorphism + Grid)

body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  color: white;
  padding: 2rem;
}

.job-filter-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.filter-tags {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-tags button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  color: white;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s;
}

.filter-tags button.active,
.filter-tags button:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #111;
}

.job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.job-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.job-card:hover {
  transform: scale(1.05);
}
Code language: CSS (css)

✨ Bonus: Add some subtle animations with transition to make it feel smooth and responsive.

Making It Work with JavaScript

const filterButtons = document.querySelectorAll(".filter-tags button");
const jobCards = document.querySelectorAll(".job-card");

filterButtons.forEach(button => {
  button.addEventListener("click", () => {
    // Remove 'active' from all
    filterButtons.forEach(btn => btn.classList.remove("active"));
    button.classList.add("active");

    const selectedRole = button.getAttribute("data-role");

    jobCards.forEach(card => {
      const role = card.getAttribute("data-role");
      if (selectedRole === "all" || role === selectedRole) {
        card.style.display = "block";
      } else {
        card.style.display = "none";
      }
    });
  });
});
Code language: JavaScript (javascript)

🚀 Tip: You can enhance this further with animations using opacity and transform for a smoother fade.

Full Working Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="job-filter-container">
  <h1>Explore Tech Job Roles</h1>

  <div class="filter-tags">
    <button data-role="all" class="active">All</button>
    <button data-role="frontend">Frontend</button>
    <button data-role="backend">Backend</button>
    <button data-role="fullstack">Fullstack</button>
    <button data-role="devops">DevOps</button>
  </div>

  <div class="job-cards">
    <div class="job-card" data-role="frontend">Frontend Developer</div>
    <div class="job-card" data-role="backend">Backend Developer</div>
    <div class="job-card" data-role="fullstack">Fullstack Engineer</div>
    <div class="job-card" data-role="devops">DevOps Engineer</div>
    <div class="job-card" data-role="frontend">UI/UX Developer</div>
    <!-- Add more roles -->
  </div>
</div>

<script>
    const filterButtons = document.querySelectorAll(".filter-tags button");
const jobCards = document.querySelectorAll(".job-card");

filterButtons.forEach(button => {
  button.addEventListener("click", () => {
    // Remove 'active' from all
    filterButtons.forEach(btn => btn.classList.remove("active"));
    button.classList.add("active");

    const selectedRole = button.getAttribute("data-role");

    jobCards.forEach(card => {
      const role = card.getAttribute("data-role");
      if (selectedRole === "all" || role === selectedRole) {
        card.style.display = "block";
      } else {
        card.style.display = "none";
      }
    });
  });
});

</script>
    
</body>
</html>
Code language: HTML, XML (xml)

style.css

body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  color: white;
  padding: 2rem;
}

.job-filter-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.filter-tags {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-tags button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  color: white;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s;
}

.filter-tags button.active,
.filter-tags button:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #111;
}

.job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.job-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.job-card:hover {
  transform: scale(1.05);
}
Code language: CSS (css)

Make It Your Own – Extending Functionality

Here’s how you can level it up:

Feature Idea	Description
✅ Multi-select filter	Allow selecting more than one category
🔍 Search bar	Add real-time keyword filtering
📱 Mobile responsive	Adjust layout for small screens
🧬 Data from JSON/API	Load roles dynamically from an API or JSON file
🧠 Save preferences	Use localStorage to remember selected filters

// Optional: Save last selected filter
localStorage.setItem("selectedRole", selectedRole);
// On load, check localStorage and auto-apply
Code language: JavaScript (javascript)

Build an Interactive Job Role Filter with JavaScript

Building the HTML Structure

Styling It with CSS (Glassmorphism + Grid)

Making It Work with JavaScript

Full Working Code

Make It Your Own – Extending Functionality

Final Thoughts

Like this:

Discover more from Prime Inspire

We’d love to hear your thoughts! Share your ideas below 💡Cancel reply

Building the HTML Structure

Styling It with CSS (Glassmorphism + Grid)

Making It Work with JavaScript

Full Working Code

Make It Your Own – Extending Functionality

Final Thoughts

Share this:

Like this:

Discover more from Prime Inspire

Related Posts

We’d love to hear your thoughts! Share your ideas below 💡Cancel reply