UNIT 25 • STAGE 4 OF 7
Category Filter
Filter buttons and JavaScript that shows only matching cards
UNIT 4 / 7
STEP 1
The Same Pattern, Applied Again
The category filter uses the exact same pattern you learned in Unit 23: read btn.dataset.filter, compare it to card.dataset.category, show or hide. The pattern is worth repeating here because recognizing it in new contexts is a key programming skill.
STEP 2
Add the Filter JavaScript
Add a second <script> block after the flip script:
👉 Add after the flip script:
<script>
var filterBtns = document.querySelectorAll('.filter-btn');
var flipCards = document.querySelectorAll('.flip-card');
filterBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
var filter = btn.dataset.filter;
filterBtns.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
flipCards.forEach(function(card) {
card.style.display = (filter === 'all' || card.dataset.category === filter) ? '' : 'none';
});
});
});
</script>
var filterBtns = document.querySelectorAll('.filter-btn');
var flipCards = document.querySelectorAll('.flip-card');
filterBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
var filter = btn.dataset.filter;
filterBtns.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
flipCards.forEach(function(card) {
card.style.display = (filter === 'all' || card.dataset.category === filter) ? '' : 'none';
});
});
});
</script>
Note the ternary operator: (filter === 'all' || ...) ? '' : 'none'. This is shorthand for an if/else: if the condition is true, use the first value; otherwise, use the second. It keeps the logic concise.
Stage 4 Complete
Both JS features work: click a tab to filter, click a card to flip.
Next: Stage 5 adds the about section explaining Lakota language revitalization.
Code Editor
Live Preview
© 2026 Relentless Feather. All rights reserved.