Improve student activity registration system by DUeffing · Pull Request #2 · DUeffing/skills-getting-started-with-github-copilot

DUeffing · 2026-03-31T13:19:18Z

This pull request adds major new features and improvements to the Mergington High School activities application. The main changes include expanding the list of available activities, implementing the ability for students to unregister from activities, enhancing the frontend to display and manage participants, and introducing comprehensive automated tests for the API endpoints.

Backend features and API improvements:

Added several new activities to the activities data structure in src/app.py, including Soccer Team, Basketball Team, Art Club, Drama Club, Debate Club, and Math Olympiad, each with their own schedule, participant list, and limits.
Implemented an endpoint to allow students to unregister from activities (/activities/{activity_name}/signup with DELETE), including validation and error handling. Also added validation to prevent duplicate signups.

Frontend enhancements:

Updated the frontend (src/static/app.js) to display the list of participants for each activity, including a "remove" button next to each participant.
Added frontend logic to handle participant removal via the new API endpoint, updating the UI and displaying success/error messages as appropriate.
Ensured the activities list refreshes after a signup or removal to keep the UI in sync with the backend.
Improved the styling of the participants list and remove button for clarity and usability in src/static/styles.css.

Testing:

Added a new test suite (tests/test_app.py) covering activity listing, signup (including duplicate and nonexistent activity cases), and unregistering (including error cases), ensuring robust API behavior.

This reverts commit 3645f34.

…ments

Copilot

Pull request overview

This PR expands the Mergington High School activities app by adding more activities, introducing an unregister API endpoint, updating the frontend to display/manage participants, and adding API endpoint tests.

Changes:

Add new activities and add backend support for unregistering students (DELETE signup endpoint) plus duplicate-signup validation.
Enhance the frontend to render participants per activity and allow removing participants from the UI.
Introduce a pytest-based test suite covering core API behaviors.

Reviewed changes

Copilot reviewed 4 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`src/app.py`	Adds more activities, prevents duplicate signup, and adds an unregister endpoint.
`src/static/app.js`	Renders participants + remove buttons; wires up DELETE requests and refreshes activity data after changes.
`src/static/styles.css`	Styles the new participants section and remove button.
`tests/test_app.py`	Adds automated tests for listing, signup (success/duplicate/not found), and unregister flows.
`requirements.txt`	Adds `pytest` to dependencies.

Comments suppressed due to low confidence (1)

src/static/app.js:52

fetchActivities() repopulates the <select id="activity"> by appending options but never clears existing options. Now that fetchActivities() is called after signup/removal, the dropdown will accumulate duplicate entries. Clear the select (preserving the placeholder option) before appending new options.

      activitiesList.innerHTML = "";

      // Populate activities list
      Object.entries(activities).forEach(([name, details]) => {
        const activityCard = document.createElement("div");
        activityCard.className = "activity-card";

        const spotsLeft = details.max_participants - details.participants.length;

        const participantsList = details.participants.length
          ? details.participants.map(email =>
              `<li>
                <span class="participant-email">${email}</span>
                <button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant">&#x2715;</button>
              </li>`
            ).join("")
          : "<li class='no-participants'>No participants yet</li>";

        activityCard.innerHTML = `
          <h4>${name}</h4>
          <p>${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>
            <ul class="participants-list">
              ${participantsList}
            </ul>
          </div>
        `;

        activitiesList.appendChild(activityCard);

        // Add option to select dropdown
        const option = document.createElement("option");
        option.value = name;
        option.textContent = name;
        activitySelect.appendChild(option);
      });

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-31T13:22:43Z

+    # Validate student is not already signed up
+    if email in activity["participants"]:
+        raise HTTPException(status_code=400, detail="Student already signed up")
+


signup_for_activity appends the student without enforcing max_participants, so activities can be overbooked (and the frontend will show negative spots left). Add a capacity check before appending and return an appropriate 4xx error when the activity is full.

Suggested change

# Validate activity capacity

if len(activity["participants"]) >= activity["max_participants"]:

raise HTTPException(status_code=400, detail="Activity is full")

Copilot · 2026-03-31T13:22:44Z

+        const participantsList = details.participants.length
+          ? details.participants.map(email =>
+              `<li>
+                <span class="participant-email">${email}</span>
+                <button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant">&#x2715;</button>
+              </li>`
+            ).join("")
+          : "<li class='no-participants'>No participants yet</li>";
+
        activityCard.innerHTML = `
          <h4>${name}</h4>
          <p>${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>
+            <ul class="participants-list">
+              ${participantsList}
+            </ul>
+          </div>
        `;



The UI is built via innerHTML with interpolated name, details.description, and especially email (user-controlled via signup). This allows HTML/attribute injection (XSS) if an email contains markup/quotes. Prefer creating DOM nodes and setting textContent, or sanitize/escape values before inserting into HTML.

Suggested change

const participantsList = details.participants.length

? details.participants.map(email =>

`<li>

<span class="participant-email">${email}</span>

<button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant">✕</button>

</li>`

).join("")

: "<li class='no-participants'>No participants yet</li>";

activityCard.innerHTML = `

<h4>${name}</h4>

<p>${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>

<ul class="participants-list">

${participantsList}

</ul>

</div>

`;

// Build activity card content safely using DOM APIs to avoid XSS

const titleEl = document.createElement("h4");

titleEl.textContent = name;

const descEl = document.createElement("p");

descEl.textContent = details.description;

const scheduleEl = document.createElement("p");

const scheduleStrong = document.createElement("strong");

scheduleStrong.textContent = "Schedule:";

scheduleEl.appendChild(scheduleStrong);

scheduleEl.appendChild(document.createTextNode(" " + details.schedule));

const availabilityEl = document.createElement("p");

const availabilityStrong = document.createElement("strong");

availabilityStrong.textContent = "Availability:";

availabilityEl.appendChild(availabilityStrong);

availabilityEl.appendChild(document.createTextNode(" " + spotsLeft + " spots left"));

const participantsSection = document.createElement("div");

participantsSection.className = "participants-section";

const participantsLabel = document.createElement("strong");

participantsLabel.textContent = "Participants:";

participantsSection.appendChild(participantsLabel);

const participantsUl = document.createElement("ul");

participantsUl.className = "participants-list";

if (details.participants.length) {

details.participants.forEach(email => {

const li = document.createElement("li");

const emailSpan = document.createElement("span");

emailSpan.className = "participant-email";

emailSpan.textContent = email;

const removeBtn = document.createElement("button");

removeBtn.className = "remove-btn";

removeBtn.dataset.activity = name;

removeBtn.dataset.email = email;

removeBtn.title = "Remove participant";

removeBtn.textContent = "✕";

li.appendChild(emailSpan);

li.appendChild(removeBtn);

participantsUl.appendChild(li);

});

} else {

const li = document.createElement("li");

li.className = "no-participants";

li.textContent = "No participants yet";

participantsUl.appendChild(li);

}

participantsSection.appendChild(participantsUl);

activityCard.appendChild(titleEl);

activityCard.appendChild(descEl);

activityCard.appendChild(scheduleEl);

activityCard.appendChild(availabilityEl);

activityCard.appendChild(participantsSection);

Copilot · 2026-03-31T13:22:44Z

+          ? details.participants.map(email =>
+              `<li>
+                <span class="participant-email">${email}</span>
+                <button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant">&#x2715;</button>


The remove button is icon-only and relies on title for labeling, which is not a reliable accessible name. Add an aria-label (and/or visually hidden text) so screen readers announce what the button does (ideally including the participant email).

Suggested change

<button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant">✕</button>

<button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant" aria-label="Remove participant ${email}">✕</button>

Copilot · 2026-03-31T13:22:44Z

+  background-color: #ffebee;
+  color: #b71c1c;
+}
+


.remove-btn has hover styling but no explicit focus styling. Add a :focus-visible (or :focus) style so keyboard users can see which remove button is focused.

Suggested change

.remove-btn:focus-visible,

.remove-btn:focus {

background-color: #ffebee;

color: #b71c1c;

outline: 2px solid #b71c1c;

outline-offset: 2px;

}

DUeffing added 5 commits March 31, 2026 12:38

added more activities

3645f34

Revert "added more activities"

1fa7503

This reverts commit 3645f34.

Add extracurricular activities and signup validation

1ccdfcc

Add participant removal functionality and update UI for activity signups

a637a20

Add tests for Mergington High School API endpoints and update require…

e1d27c0

…ments

DUeffing requested a review from Copilot March 31, 2026 13:19

DUeffing merged commit d469b4b into main Mar 31, 2026
5 checks passed

Copilot started reviewing on behalf of DUeffing March 31, 2026 13:19 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve student activity registration system#2

Improve student activity registration system#2
DUeffing merged 5 commits into
mainfrom
accelerate-with-copilot

DUeffing commented Mar 31, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

+    # Validate activity capacity
+    if len(activity["participants"]) >= activity["max_participants"]:
+        raise HTTPException(status_code=400, detail="Activity is full")

-        const participantsList = details.participants.length
-          ? details.participants.map(email =>
-              `<li>
-                <span class="participant-email">${email}</span>
-                <button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant">&#x2715;</button>
-              </li>`
-            ).join("")
-          : "<li class='no-participants'>No participants yet</li>";
-        activityCard.innerHTML = `
-          <h4>${name}</h4>
-          <p>${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>
-            <ul class="participants-list">
-              ${participantsList}
-            </ul>
-          </div>
-        `;
+        // Build activity card content safely using DOM APIs to avoid XSS
+        const titleEl = document.createElement("h4");
+        titleEl.textContent = name;
+        const descEl = document.createElement("p");
+        descEl.textContent = details.description;
+        const scheduleEl = document.createElement("p");
+        const scheduleStrong = document.createElement("strong");
+        scheduleStrong.textContent = "Schedule:";
+        scheduleEl.appendChild(scheduleStrong);
+        scheduleEl.appendChild(document.createTextNode(" " + details.schedule));
+        const availabilityEl = document.createElement("p");
+        const availabilityStrong = document.createElement("strong");
+        availabilityStrong.textContent = "Availability:";
+        availabilityEl.appendChild(availabilityStrong);
+        availabilityEl.appendChild(document.createTextNode(" " + spotsLeft + " spots left"));
+        const participantsSection = document.createElement("div");
+        participantsSection.className = "participants-section";
+        const participantsLabel = document.createElement("strong");
+        participantsLabel.textContent = "Participants:";
+        participantsSection.appendChild(participantsLabel);
+        const participantsUl = document.createElement("ul");
+        participantsUl.className = "participants-list";
+        if (details.participants.length) {
+          details.participants.forEach(email => {
+            const li = document.createElement("li");
+            const emailSpan = document.createElement("span");
+            emailSpan.className = "participant-email";
+            emailSpan.textContent = email;
+            const removeBtn = document.createElement("button");
+            removeBtn.className = "remove-btn";
+            removeBtn.dataset.activity = name;
+            removeBtn.dataset.email = email;
+            removeBtn.title = "Remove participant";
+            removeBtn.textContent = "✕";
+            li.appendChild(emailSpan);
+            li.appendChild(removeBtn);
+            participantsUl.appendChild(li);
+          });
+        } else {
+          const li = document.createElement("li");
+          li.className = "no-participants";
+          li.textContent = "No participants yet";
+          participantsUl.appendChild(li);
+        }
+        participantsSection.appendChild(participantsUl);
+        activityCard.appendChild(titleEl);
+        activityCard.appendChild(descEl);
+        activityCard.appendChild(scheduleEl);
+        activityCard.appendChild(availabilityEl);
+        activityCard.appendChild(participantsSection);

	<button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant">✕</button>
	<button class="remove-btn" data-activity="${name}" data-email="${email}" title="Remove participant" aria-label="Remove participant ${email}">✕</button>

+.remove-btn:focus-visible,
+.remove-btn:focus {
+  background-color: #ffebee;
+  color: #b71c1c;
+  outline: 2px solid #b71c1c;
+  outline-offset: 2px;
+}

Conversation

DUeffing commented Mar 31, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants