Merge pull request #246 from Ishuuu1213/Filter-Functionality

✨ Added Search and Multi-Filter Functionality with Clear Button on Challenges Page

Author: faisal07777

LEADERBOARD.md

@@ -6,6 +6,7 @@ This leaderboard tracks contributors who have completed issues labeled as `level
 
 | Username | Level 1 | Level 2 | Level 3 | PRs Merged |
 |----------|---------|---------|---------|-------------|
+
 | [@Suhani1234-5](https://github.com/Suhani1234-5) | 0 | 1 | 1 | 5 |
 | [@cosmicTitiksha](https://github.com/cosmicTitiksha) | 1 | 1 | 0 | 4 |
 | [@Shalini22-ui](https://github.com/Shalini22-ui) | 0 | 1 | 0 | 4 |
@@ -39,6 +40,7 @@ This leaderboard tracks contributors who have completed issues labeled as `level
 | [@faisal07777](https://github.com/faisal07777) | 1 | 0 | 0 | 0 |
 | [@AmritRaj29](https://github.com/AmritRaj29) | 1 | 0 | 0 | 0 |
 
+
 ---
 
 **Legend:**

pages/challenges.html

@@ -62,6 +62,10 @@ <h1 class="challenges-hero__title">
     <!-- Filter Controls -->
     <section class="challenges-filter" aria-labelledby="filters-heading">
       <div class="container filter-controls">
+        <div class="filter-group">
+  
+</div>
+
         <h2 id="filters-heading" class="visually-hidden">Filter Challenges</h2>
 
         <div class="filter-group">
@@ -88,14 +92,15 @@ <h2 id="filters-heading" class="visually-hidden">Filter Challenges</h2>
           </select>
         </div>
 
-        <div class="search-group" style="margin-left:auto;">
+        <div class="search-group" style="display: flex; gap: 0.5rem; margin-left: auto;">
           <input
             type="search"
             id="search-challenges"
             class="search-input"
             placeholder="Search challenges..."
             aria-label="Search coding challenges by title or tag"
           />
+          <button id="clearFilters" class="btn btn-secondary">Clear Filters</button>
         </div>
       </div>
     </section>
@@ -279,6 +284,59 @@ <h4>Community</h4>
       localStorage.setItem('theme', newTheme);
     });
   </script>
+  <script>
+  const searchInput = document.getElementById("search-challenges");
+  const difficultyFilter = document.getElementById("difficulty-filter");
+  const categoryFilter = document.getElementById("category-filter");
+  const challengesList = document.getElementById("challengesList");
+  const noResults = document.getElementById("no-results");
+
+  const challengeCards = Array.from(challengesList.getElementsByClassName("challenge-card"));
+
+  function filterChallenges() {
+    const searchTerm = searchInput.value.toLowerCase();
+    const difficulty = difficultyFilter.value;
+    const category = categoryFilter.value;
+
+    let visibleCount = 0;
+
+    challengeCards.forEach(card => {
+      const title = card.querySelector(".challenge-card__title").textContent.toLowerCase();
+      const cardDifficulty = card.dataset.difficulty;
+      const cardCategory = card.dataset.category;
+
+      const matchesSearch = title.includes(searchTerm);
+      const matchesDifficulty = !difficulty || cardDifficulty === difficulty;
+      const matchesCategory = !category || cardCategory === category;
+
+      const isVisible = matchesSearch && matchesDifficulty && matchesCategory;
+
+      card.style.display = isVisible ? "block" : "none";
+
+      if (isVisible) visibleCount++;
+    });
+
+    noResults.style.display = visibleCount === 0 ? "block" : "none";
+  }
+
+  // Event listeners for real-time filtering
+  searchInput.addEventListener("input", filterChallenges);
+  difficultyFilter.addEventListener("change", filterChallenges);
+  categoryFilter.addEventListener("change", filterChallenges);
+  const clearBtn = document.getElementById("clearFilters");
+
+clearBtn.addEventListener("click", () => {
+  // Reset all filters
+  searchInput.value = "";
+  difficultyFilter.value = "";
+  categoryFilter.value = "";
+
+  // Re-run the filtering function to show all challenges again
+  filterChallenges();
+});
+
+</script>
+
 
 </body>
 </html>

styles/challenges.css

@@ -509,3 +509,5 @@ body {
     font-size: 2rem;
   }
 }
+
+