UNIT 25 • STAGE 7 OF 7

Progress Counter

A JavaScript Set that tracks and displays unique cards flipped

← Stage 6Unit 25
UNIT 7 / 7
STEP 1

The JavaScript Set

A Set is a special collection that only stores unique values. If you add the same value twice, it only appears once. This makes it perfect for tracking which cards have been flipped; you want to count each card only once, even if the user flips it back and forth multiple times.

Each card has a data-index attribute (0 through 15). When a card is clicked, you add its index to the Set. Because Set ignores duplicates, the count only increases when a new card is flipped for the first time.

STEP 2

Update the Hero HTML

Replace your hero section with this updated version that includes the progress bar elements:

👉 Updated hero HTML: <section id="hero"><div class="container">
  <p class="hero-tag">Oceti Sakowin &bull; Lakota Language</p>
  <h1>Lakota <em>Word Explorer</em></h1>
  <p class="sub">...</p>
  <div class="progress-bar-hero">
    <div class="progress-bar-hero-fill" id="progressFill" style="width:0%"></div>
  </div>
  <p class="progress-label" id="progressLabel">0 / 16 words explored</p>
</div></section>

Also add the CSS for the progress bar into your <style> block:

👉 Progress bar CSS: .progress-bar-hero { background: rgba(255,255,255,0.1); border-radius: 100px; height: 8px; width: 300px; overflow: hidden; margin-bottom: 12px; }
.progress-bar-hero-fill { height: 100%; background: linear-gradient(90deg, var(--berry), var(--sage)); border-radius: 100px; transition: width 0.4s; }
.progress-label { font-size: 0.875rem; color: rgba(245,241,235,0.6); }
STEP 3

Replace the Flip Script with the Progress-Aware Version

Replace your existing flip script with this version that also updates the progress counter:

👉 Replace the flip script: <script>
  var flippedSet = new Set();
  var total = document.querySelectorAll('.flip-card').length;
  var fill = document.getElementById('progressFill');
  var label = document.getElementById('progressLabel');
  function updateProgress() {
    var count = flippedSet.size;
    var pct = Math.round((count / total) * 100);
    fill.style.width = pct + '%';
    label.textContent = count + ' / ' + total + ' words explored';
  }
  document.querySelectorAll('.flip-card').forEach(function(card) {
    card.addEventListener('click', function() {
      card.classList.toggle('flipped');
      flippedSet.add(card.dataset.index);
      updateProgress();
    });
  });
  updateProgress();
</script>
  • new Set() creates an empty Set. It works like an array but enforces uniqueness.
  • flippedSet.add(card.dataset.index) adds the card's index to the Set. If it is already there, nothing changes.
  • flippedSet.size is the number of unique values in the Set, equivalent to array.length.
  • Math.round((count / total) * 100) converts the fraction to a percentage, then rounds it to a whole number.
  • fill.style.width = pct + '%' updates the progress bar width. The transition: width 0.4s in CSS makes it animate smoothly.

Unit 25 Complete

Flip cards in the preview; the progress bar fills as you explore new words. The counter tracks each card only once, no matter how many times you flip it.

You have built a full language learning tool with 3D CSS animation, category filtering, and a progress tracker powered by JavaScript's Set object.

Code Editor
Live Preview
Relentless Feather © 2026 Relentless Feather. All rights reserved.