Add registration validation and more activities

src/app.py

@@ -38,6 +38,45 @@
         "schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM",
         "max_participants": 30,
         "participants": ["john@mergington.edu", "olivia@mergington.edu"]
+    },
+    # Sports related activities
+    "Soccer Team": {
+        "description": "Join the school soccer team and compete in local leagues",
+        "schedule": "Tuesdays and Thursdays, 4:00 PM - 5:30 PM",
+        "max_participants": 18,
+        "participants": ["lucas@mergington.edu", "mia@mergington.edu"]
+    },
+    "Basketball Club": {
+        "description": "Practice basketball skills and play friendly matches",
+        "schedule": "Wednesdays, 3:30 PM - 5:00 PM",
+        "max_participants": 15,
+        "participants": ["liam@mergington.edu", "ava@mergington.edu"]
+    },
+    # Artistic activities
+    "Drama Club": {
+        "description": "Participate in school plays and improve acting skills",
+        "schedule": "Mondays, 4:00 PM - 5:30 PM",
+        "max_participants": 20,
+        "participants": ["noah@mergington.edu", "isabella@mergington.edu"]
+    },
+    "Art Workshop": {
+        "description": "Explore painting, drawing, and other visual arts",
+        "schedule": "Fridays, 2:00 PM - 3:30 PM",
+        "max_participants": 16,
+        "participants": ["amelia@mergington.edu", "benjamin@mergington.edu"]
+    },
+    # Intellectual activities
+    "Math Olympiad": {
+        "description": "Prepare for math competitions and solve challenging problems",
+        "schedule": "Thursdays, 3:30 PM - 5:00 PM",
+        "max_participants": 10,
+        "participants": ["charlotte@mergington.edu", "elijah@mergington.edu"]
+    },
+    "Debate Team": {
+        "description": "Develop public speaking and argumentation skills",
+        "schedule": "Wednesdays, 4:00 PM - 5:30 PM",
+        "max_participants": 14,
+        "participants": ["harper@mergington.edu", "jackson@mergington.edu"]
     }
 }
 
@@ -62,6 +101,10 @@ 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 already signed up")
+
     # Add student
     activity["participants"].append(email)
     return {"message": f"Signed up {email} for {activity_name}"}

src/static/app.js

@@ -22,9 +22,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
         activityCard.innerHTML = `
           <h4>${name}</h4>
-          <p>${details.description}</p>
+          <p><strong>Description:</strong> ${details.description}</p>
           <p><strong>Schedule:</strong> ${details.schedule}</p>
           <p><strong>Availability:</strong> ${spotsLeft} spots left</p>
+          <div class="participants-section">
+            <strong>Participants:</strong>
+            ${
+              details.participants && details.participants.length > 0
+                ? `<ul class="participants-list">
+                    ${details.participants.map(email => `<li>${email}</li>`).join('')}
+                  </ul>`
+                : `<span class="no-participants">No participants yet.</span>`
+            }
+          </div>
         `;
 
         activitiesList.appendChild(activityCard);

src/static/index.html

@@ -45,6 +45,51 @@ <h3>Sign Up for an Activity</h3>
       <p>&copy; 2023 Mergington High School</p>
     </footer>
 
-    <script src="app.js"></script>
+    <script>
+      // Fetch and render activities
+      async function loadActivities() {
+        const activitiesList = document.getElementById('activities-list');
+        const activitySelect = document.getElementById('activity');
+        activitiesList.innerHTML = '<p>Loading activities...</p>';
+        try {
+          const res = await fetch('/activities');
+          const activities = await res.json();
+          activitiesList.innerHTML = '';
+          activitySelect.innerHTML = '<option value="">-- Select an activity --</option>';
+          Object.entries(activities).forEach(([name, info]) => {
+            // Create activity card
+            const card = document.createElement('div');
+            card.className = 'activity-card';
+            card.innerHTML = `
+              <h4>${name}</h4>
+              <p><strong>Description:</strong> ${info.description}</p>
+              <p><strong>Schedule:</strong> ${info.schedule}</p>
+              <p><strong>Max Participants:</strong> ${info.max_participants}</p>
+              <div class="participants-section">
+                <strong>Participants:</strong>
+                ${
+                  info.participants && info.participants.length > 0
+                    ? `<ul class="participants-list">
+                        ${info.participants.map(email => `<li>${email}</li>`).join('')}
+                      </ul>`
+                    : `<span class="no-participants">No participants yet.</span>`
+                }
+              </div>
+            `;
+            activitiesList.appendChild(card);
+
+            // Add to select
+            const option = document.createElement('option');
+            option.value = name;
+            option.textContent = name;
+            activitySelect.appendChild(option);
+          });
+        } catch (err) {
+          activitiesList.innerHTML = '<p class="error">Failed to load activities.</p>';
+        }
+      }
+
+      window.addEventListener('DOMContentLoaded', loadActivities);
+    </script>
   </body>
 </html>

src/static/styles.css

@@ -142,3 +142,30 @@ footer {
   padding: 20px;
   color: #666;
 }
+
+.participants-section {
+  margin-top: 12px;
+  padding: 10px;
+  background: #eef3fb;
+  border-radius: 4px;
+  border: 1px solid #c5cae9;
+}
+
+.participants-section strong {
+  color: #3949ab;
+  display: block;
+  margin-bottom: 6px;
+}
+
+.participants-list {
+  margin-left: 18px;
+  margin-bottom: 0;
+  color: #283593;
+  font-size: 0.97em;
+}
+
+.no-participants {
+  color: #888;
+  font-style: italic;
+  margin-left: 4px;
+}