Implement participants section in activity cards and update styles

Author: danielalpizarcer-rgb

src/app.py

@@ -77,24 +77,6 @@
             "participants": ["ethan@mergington.edu"]
         }
     }
-    "Chess Club": {
-        "description": "Learn strategies and compete in chess tournaments",
-        "schedule": "Fridays, 3:30 PM - 5:00 PM",
-        "max_participants": 12,
-        "participants": ["michael@mergington.edu", "daniel@mergington.edu"]
-    },
-    "Programming Class": {
-        "description": "Learn programming fundamentals and build software projects",
-        "schedule": "Tuesdays and Thursdays, 3:30 PM - 4:30 PM",
-        "max_participants": 20,
-        "participants": ["emma@mergington.edu", "sophia@mergington.edu"]
-    },
-    "Gym Class": {
-        "description": "Physical education and sports activities",
-        "schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM",
-        "max_participants": 30,
-        "participants": ["john@mergington.edu", "olivia@mergington.edu"]
-    }
 }
 
 

src/static/app.js

@@ -25,6 +25,12 @@ document.addEventListener("DOMContentLoaded", () => {
           <p>${details.description}</p>
           <p><strong>Schedule:</strong> ${details.schedule}</p>
           <p><strong>Availability:</strong> ${spotsLeft} spots left</p>
+
+          <div class="participants-section" aria-live="polite">
+            <h5 class="participants-title">Participants</h5>
+            <ul class="participants-list" aria-label="Participants for ${name}"></ul>
+            <p class="no-participants info ${details.participants.length ? "hidden" : ""}">No participants yet</p>
+          </div>
         `;
 
         activitiesList.appendChild(activityCard);
@@ -34,6 +40,20 @@ document.addEventListener("DOMContentLoaded", () => {
         option.value = name;
         option.textContent = name;
         activitySelect.appendChild(option);
+
+        // Populate participants list
+        const participantsUl = activityCard.querySelector(".participants-list");
+        const noParticipantsP = activityCard.querySelector(".no-participants");
+        if (details.participants && details.participants.length) {
+          details.participants.forEach((email) => {
+            const li = document.createElement("li");
+            li.textContent = email;
+            participantsUl.appendChild(li);
+          });
+          noParticipantsP.classList.add("hidden");
+        } else {
+          noParticipantsP.classList.remove("hidden");
+        }
       });
     } catch (error) {
       activitiesList.innerHTML = "<p>Failed to load activities. Please try again later.</p>";

src/static/styles.css

@@ -142,3 +142,38 @@ footer {
   padding: 20px;
   color: #666;
 }
+
+.participants-section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #eceff1;
+}
+
+.participants-title {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #1a237e;
+  font-weight: 600;
+}
+
+.participants-list {
+  list-style: disc;
+  padding-left: 20px;
+  margin: 0 0 8px 0;
+}
+
+.participants-list li {
+  background: linear-gradient(90deg, #ffffff, #fbfbff);
+  border: 1px solid #ececec;
+  padding: 6px 10px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #333;
+}
+
+.no-participants {
+  margin-top: 6px;
+  font-size: 14px;
+  color: #0c5460;
+}