sharwren · sharwren · Sep 21, 2025 · Sep 21, 2025 · Sep 21, 2025 · Sep 21, 2025
diff --git a/README.md b/README.md
@@ -8,6 +8,8 @@ Mona here. I'm done preparing your exercise. Hope you enjoy! 💚
 
 Remember, it's self-paced so feel free to take a break! ☕️
 
+Signed up Peach and Mario for classes
+
 [![](https://img.shields.io/badge/Go%20to%20Exercise-%E2%86%92-1f883d?style=for-the-badge&logo=github&labelColor=197935)](https://github.com/sharwren/skills-getting-started-with-github-copilot/issues/1)
 
 ---

diff --git a/src/activity-card-sample.html b/src/activity-card-sample.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Activity Card — Participants Demo</title>
+  <link rel="stylesheet" href="static/styles.css" />
+</head>
+<body>
+  <main>
+    <section class="activity-card">
+      <!-- use h3 to match section styling and proper heading order -->
+      <h3>Community Hike</h3>
+      <p>Join us for an easy 5km trail walk through the local park. Bring water and good shoes.</p>
+
+      <div class="participants" role="region" aria-labelledby="participants-heading-1">
+        <div class="participants-header">
+          <h5 id="participants-heading-1">Participants</h5>
+          <span class="participants-count" aria-hidden="true">3</span>
+        </div>
+
+        <ul class="participants-list" aria-labelledby="participants-heading-1">
+          <li>
+            <span class="avatar" aria-hidden="true">AL</span>
+            <div class="participant-meta">
+              <span class="participant-name">Alice Lee</span>
+              <span class="participant-note">Organizer</span>
+            </div>
+          </li>
+
+          <li>
+            <span class="avatar" aria-hidden="true">MJ</span>
+            <div class="participant-meta">
+              <span class="participant-name">Michael Jones</span>
+              <span class="participant-note">Member</span>
+            </div>
+          </li>
+
+          <li>
+            <span class="avatar" aria-hidden="true">SB</span>
+            <div class="participant-meta">
+              <span class="participant-name">Sofia Brown</span>
+              <span class="participant-note">Member</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <!-- Example of an empty participants state -->
+    <section class="activity-card">
+      <h3>Evening Coding Session</h3>
+      <p>Casual coding night: bring your laptop and a problem you'd like to work on.</p>
+
+      <div class="participants" role="region" aria-labelledby="participants-heading-2">
+        <div class="participants-header">
+          <h5 id="participants-heading-2">Participants</h5>
+          <span class="participants-count" aria-hidden="true">0</span>
+        </div>
+
+        <div class="participants-empty">No one has signed up yet — be the first!</div>
+      </div>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/src/app.py b/src/app.py
@@ -25,7 +25,7 @@
         "description": "Learn strategies and compete in chess tournaments",
         "schedule": "Fridays, 3:30 PM - 5:00 PM",
         "max_participants": 12,
-        "participants": ["[email protected]", "[email protected]"]
+        "participants": ["[email protected]", "[email protected]", "[email protected]"]
     },
     "Programming Class": {
         "description": "Learn programming fundamentals and build software projects",
@@ -38,10 +38,51 @@
         "schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM",
         "max_participants": 30,
         "participants": ["[email protected]", "[email protected]"]
+    },
+
+    # --- New Sports Activities ---
+    "Soccer Team": {
+        "description": "Competitive soccer team practices and matches",
+        "schedule": "Tuesdays and Thursdays, 4:00 PM - 6:00 PM",
+        "max_participants": 18,
+        "participants": ["[email protected]"]
+    },
+    "Track and Field": {
+        "description": "Track workouts, field events, and seasonal meets",
+        "schedule": "Mondays, Wednesdays, Fridays, 3:00 PM - 4:30 PM",
+        "max_participants": 25,
+        "participants": ["[email protected]"]
+    },
+
+    # --- New Artistic Activities ---
+    "Drama Club": {
+        "description": "Theater rehearsals, acting workshops, and school productions",
+        "schedule": "Wednesdays, 4:00 PM - 6:00 PM",
+        "max_participants": 30,
+        "participants": ["[email protected]", "[email protected]"]
+    },
+    "Photography Club": {
+        "description": "Learn photography techniques and work on creative projects",
+        "schedule": "Saturdays, 10:00 AM - 12:00 PM",
+        "max_participants": 15,
+        "participants": ["[email protected]"]
+    },
+
+    # --- New Intellectual Activities ---
+    "Robotics Club": {
+        "description": "Design, build, and program robots for competitions and demos",
+        "schedule": "Thursdays, 4:00 PM - 6:00 PM",
+        "max_participants": 12,
+        "participants": ["[email protected]"]
+    },
+    "Math Team": {
+        "description": "Prepare for math competitions and practice challenging problems",
+        "schedule": "Tuesdays, 5:00 PM - 6:30 PM",
+        "max_participants": 15,
+        "participants": ["[email protected]"]
     }
 }
 
-
 @app.get("/")
 def root():
     return RedirectResponse(url="/static/index.html")
@@ -62,6 +103,14 @@ def signup_for_activity(activity_name: str, email: str):
     # Get the specific activity
     activity = activities[activity_name]
 
+    # Validate student is not already signed up
+    if email in activity["participants"]:
+        raise HTTPException(status_code=400, detail="Student is already signed up")
+
+    # Validate capacity
+    if len(activity["participants"]) >= activity["max_participants"]:
+        raise HTTPException(status_code=400, detail="Activity is full")
+
     # Add student
     activity["participants"].append(email)
     return {"message": f"Signed up {email} for {activity_name}"}
diff --git a/src/static/app.js b/src/static/app.js
@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const signupForm = document.getElementById("signup-form");
   const messageDiv = document.getElementById("message");
 
+  // nohup change because participant 
   // Function to fetch activities from API
   async function fetchActivities() {
     try {

diff --git a/src/static/styles.css b/src/static/styles.css
@@ -37,7 +37,11 @@ main {
 
 @media (min-width: 768px) {
   main {
+    /* switch to grid at wider sizes so grid-template-columns is valid */
+    display: grid;
     grid-template-columns: 2fr 1fr;
+    gap: 30px;
+    align-items: start;
   }
 }
 
@@ -142,3 +146,123 @@ footer {
   padding: 20px;
   color: #666;
 }
+
+/* Participants list inside activity cards */
+.activity-card .participants {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #eee;
+  display: block;
+}
+
+.activity-card .participants-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.activity-card .participants-header h5 {
+  font-size: 14px;
+  color: #1a237e;
+  margin: 0;
+  font-weight: 700;
+}
+
+.activity-card .participants-count {
+  font-size: 12px;
+  color: #1a237e; /* stronger contrast */
+  background: #e8eaf6; /* slightly richer tint for contrast */
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(26,35,126,0.08);
+}
+
+/* Use a custom marker for more consistent cross-browser behavior */
+.activity-card .participants-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.activity-card .participants-list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease, transform 0.06s ease;
+  margin-bottom: 6px;
+}
+
+/* custom circular marker */
+.activity-card .participants-list li::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #1a237e; /* brand color */
+  flex: 0 0 8px;
+  margin-right: 6px;
+  opacity: 0.95;
+}
+
+/* Small avatar / initials to the left of the name */
+.activity-card .participants-list .avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #e8eaf6;
+  color: #1a237e;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 13px;
+  flex: 0 0 28px;
+  border: 1px solid rgba(26,35,126,0.06);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+}
+
+/* Participant name and optional role/note */
+.activity-card .participants-list .participant-meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.activity-card .participants-list .participant-name {
+  font-weight: 600;
+  color: #222;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.activity-card .participants-list .participant-note {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 2px;
+}
+
+/* Hover for each participant row */
+.activity-card .participants-list li:hover {
+  background-color: #f4f6ff;
+  transform: translateY(-1px);
+}
+
+/* If there are no participants, show a subtle empty state */
+.activity-card .participants-empty {
+  padding: 8px;
+  font-size: 13px;
+  color: #666;
+  background: #fbfbfb;
+  border-radius: 6px;
+  border: 1px dashed #f0f0f0;
+}
+
+/* Ensure good spacing on small screens */
+@media (max-width: 480px) {
+  .activity-card .participants-list li {
+    gap: 8px;
+    padding: 8px;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up @@
     Remember, it's self-paced so feel free to take a break! ☕️
+    Signed up Peach and Mario for classes
     [![](https://img.shields.io/badge/Go%20to%20Exercise-%E2%86%92-1f883d?style=for-the-badge&logo=github&labelColor=197935)](https://github.com/sharwren/skills-getting-started-with-github-copilot/issues/1)
     ---
@@ Expand Down @@