Add active YSWS programs counter

index.html

@@ -13,6 +13,7 @@
     <div class="container">
         <h1 class="ultratitle">YSWS Programs</h1>
         <p class="lead">A comprehensive list of Hack Club's "You Ship, We Ship" programs.</p>
+        <p class="active-count">Currently <span id="active-count">0</span> active programs</p>
         
         <div class="filter-container">
             <button class="filter-btn active" data-category="all">All</button>

script.js

@@ -303,8 +303,18 @@ function createProgramCard(program) {
     `;
 }
 
+function countActivePrograms() {
+    let count = 0;
+    Object.values(programs).forEach(category => {
+        count += category.filter(program => program.status === 'active').length;
+    });
+    return count;
+}
+
 function renderPrograms() {
     const container = document.getElementById('programs-container');
+    const activeCount = countActivePrograms();
+    document.getElementById('active-count').textContent = activeCount;
     
     for (const [category, programsList] of Object.entries(programs)) {
         const section = document.createElement('section');

styles.css

@@ -630,6 +630,13 @@ td {
   display: none;
 }
 
+.active-count {
+  color: var(--primary);
+  font-weight: var(--font-weight-bold);
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-3);
+}
+
 @media screen and (min-width: 32em) {
   .ultratitle {
     font-size: var(--font-5);