Skip to content

Commit 1990b4f

Browse files
sharwrensharwren
authored
Merge pull request #2 from sharwren/accelerate-with-copilot
Accelerate with copilot
2 parents 860dbc0 + d97e001 commit 1990b4f

File tree

5 files changed

+243
-2
lines changed

5 files changed

+243
-2
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ Mona here. I'm done preparing your exercise. Hope you enjoy! 💚
88

99
Remember, it's self-paced so feel free to take a break! ☕️
1010

11+
Signed up Peach and Mario for classes
12+
1113
[![](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)
1214

1315
---

‎src/activity-card-sample.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Activity Card — Participants Demo</title>
6+
<link rel="stylesheet" href="static/styles.css" />
7+
</head>
8+
<body>
9+
<main>
10+
<section class="activity-card">
11+
<!-- use h3 to match section styling and proper heading order -->
12+
<h3>Community Hike</h3>
13+
<p>Join us for an easy 5km trail walk through the local park. Bring water and good shoes.</p>
14+
15+
<div class="participants" role="region" aria-labelledby="participants-heading-1">
16+
<div class="participants-header">
17+
<h5 id="participants-heading-1">Participants</h5>
18+
<span class="participants-count" aria-hidden="true">3</span>
19+
</div>
20+
21+
<ul class="participants-list" aria-labelledby="participants-heading-1">
22+
<li>
23+
<span class="avatar" aria-hidden="true">AL</span>
24+
<div class="participant-meta">
25+
<span class="participant-name">Alice Lee</span>
26+
<span class="participant-note">Organizer</span>
27+
</div>
28+
</li>
29+
30+
<li>
31+
<span class="avatar" aria-hidden="true">MJ</span>
32+
<div class="participant-meta">
33+
<span class="participant-name">Michael Jones</span>
34+
<span class="participant-note">Member</span>
35+
</div>
36+
</li>
37+
38+
<li>
39+
<span class="avatar" aria-hidden="true">SB</span>
40+
<div class="participant-meta">
41+
<span class="participant-name">Sofia Brown</span>
42+
<span class="participant-note">Member</span>
43+
</div>
44+
</li>
45+
</ul>
46+
</div>
47+
</section>
48+
49+
<!-- Example of an empty participants state -->
50+
<section class="activity-card">
51+
<h3>Evening Coding Session</h3>
52+
<p>Casual coding night: bring your laptop and a problem you'd like to work on.</p>
53+
54+
<div class="participants" role="region" aria-labelledby="participants-heading-2">
55+
<div class="participants-header">
56+
<h5 id="participants-heading-2">Participants</h5>
57+
<span class="participants-count" aria-hidden="true">0</span>
58+
</div>
59+
60+
<div class="participants-empty">No one has signed up yet — be the first!</div>
61+
</div>
62+
</section>
63+
</main>
64+
</body>
65+
</html>

‎src/app.py‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"description": "Learn strategies and compete in chess tournaments",
2626
"schedule": "Fridays, 3:30 PM - 5:00 PM",
2727
"max_participants": 12,
28-
"participants": ["[email protected]", "[email protected]"]
28+
"participants": ["[email protected]", "[email protected]", "[email protected]"]
2929
},
3030
"Programming Class": {
3131
"description": "Learn programming fundamentals and build software projects",
@@ -38,10 +38,51 @@
3838
"schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM",
3939
"max_participants": 30,
4040
"participants": ["[email protected]", "[email protected]"]
41+
},
42+
43+
# --- New Sports Activities ---
44+
"Soccer Team": {
45+
"description": "Competitive soccer team practices and matches",
46+
"schedule": "Tuesdays and Thursdays, 4:00 PM - 6:00 PM",
47+
"max_participants": 18,
48+
"participants": ["[email protected]"]
49+
},
50+
"Track and Field": {
51+
"description": "Track workouts, field events, and seasonal meets",
52+
"schedule": "Mondays, Wednesdays, Fridays, 3:00 PM - 4:30 PM",
53+
"max_participants": 25,
54+
"participants": ["[email protected]"]
55+
},
56+
57+
# --- New Artistic Activities ---
58+
"Drama Club": {
59+
"description": "Theater rehearsals, acting workshops, and school productions",
60+
"schedule": "Wednesdays, 4:00 PM - 6:00 PM",
61+
"max_participants": 30,
62+
"participants": ["[email protected]", "[email protected]"]
63+
},
64+
"Photography Club": {
65+
"description": "Learn photography techniques and work on creative projects",
66+
"schedule": "Saturdays, 10:00 AM - 12:00 PM",
67+
"max_participants": 15,
68+
"participants": ["[email protected]"]
69+
},
70+
71+
# --- New Intellectual Activities ---
72+
"Robotics Club": {
73+
"description": "Design, build, and program robots for competitions and demos",
74+
"schedule": "Thursdays, 4:00 PM - 6:00 PM",
75+
"max_participants": 12,
76+
"participants": ["[email protected]"]
77+
},
78+
"Math Team": {
79+
"description": "Prepare for math competitions and practice challenging problems",
80+
"schedule": "Tuesdays, 5:00 PM - 6:30 PM",
81+
"max_participants": 15,
82+
"participants": ["[email protected]"]
4183
}
4284
}
4385

44-
4586
@app.get("/")
4687
def root():
4788
return RedirectResponse(url="/static/index.html")
@@ -62,6 +103,14 @@ def signup_for_activity(activity_name: str, email: str):
62103
# Get the specific activity
63104
activity = activities[activity_name]
64105

106+
# Validate student is not already signed up
107+
if email in activity["participants"]:
108+
raise HTTPException(status_code=400, detail="Student is already signed up")
109+
110+
# Validate capacity
111+
if len(activity["participants"]) >= activity["max_participants"]:
112+
raise HTTPException(status_code=400, detail="Activity is full")
113+
65114
# Add student
66115
activity["participants"].append(email)
67116
return {"message": f"Signed up {email} for {activity_name}"}

‎src/static/app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", () => {
44
const signupForm = document.getElementById("signup-form");
55
const messageDiv = document.getElementById("message");
66

7+
// nohup change because participant
78
// Function to fetch activities from API
89
async function fetchActivities() {
910
try {

‎src/static/styles.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,11 @@ main {
3737

3838
@media (min-width: 768px) {
3939
main {
40+
/* switch to grid at wider sizes so grid-template-columns is valid */
41+
display: grid;
4042
grid-template-columns: 2fr 1fr;
43+
gap: 30px;
44+
align-items: start;
4145
}
4246
}
4347

@@ -142,3 +146,123 @@ footer {
142146
padding: 20px;
143147
color: #666;
144148
}
149+
150+
/* Participants list inside activity cards */
151+
.activity-card .participants {
152+
margin-top: 12px;
153+
padding-top: 12px;
154+
border-top: 1px dashed #eee;
155+
display: block;
156+
}
157+
158+
.activity-card .participants-header {
159+
display: flex;
160+
align-items: center;
161+
justify-content: space-between;
162+
margin-bottom: 8px;
163+
}
164+
165+
.activity-card .participants-header h5 {
166+
font-size: 14px;
167+
color: #1a237e;
168+
margin: 0;
169+
font-weight: 700;
170+
}
171+
172+
.activity-card .participants-count {
173+
font-size: 12px;
174+
color: #1a237e; /* stronger contrast */
175+
background: #e8eaf6; /* slightly richer tint for contrast */
176+
padding: 4px 8px;
177+
border-radius: 999px;
178+
border: 1px solid rgba(26,35,126,0.08);
179+
}
180+
181+
/* Use a custom marker for more consistent cross-browser behavior */
182+
.activity-card .participants-list {
183+
list-style: none;
184+
padding-left: 0;
185+
margin: 0;
186+
}
187+
188+
.activity-card .participants-list li {
189+
display: flex;
190+
align-items: center;
191+
gap: 10px;
192+
padding: 6px 8px;
193+
border-radius: 6px;
194+
transition: background-color 0.15s ease, transform 0.06s ease;
195+
margin-bottom: 6px;
196+
}
197+
198+
/* custom circular marker */
199+
.activity-card .participants-list li::before {
200+
content: "";
201+
width: 8px;
202+
height: 8px;
203+
border-radius: 50%;
204+
background: #1a237e; /* brand color */
205+
flex: 0 0 8px;
206+
margin-right: 6px;
207+
opacity: 0.95;
208+
}
209+
210+
/* Small avatar / initials to the left of the name */
211+
.activity-card .participants-list .avatar {
212+
width: 28px;
213+
height: 28px;
214+
border-radius: 50%;
215+
background-color: #e8eaf6;
216+
color: #1a237e;
217+
display: inline-flex;
218+
align-items: center;
219+
justify-content: center;
220+
font-weight: 700;
221+
font-size: 13px;
222+
flex: 0 0 28px;
223+
border: 1px solid rgba(26,35,126,0.06);
224+
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
225+
}
226+
227+
/* Participant name and optional role/note */
228+
.activity-card .participants-list .participant-meta {
229+
display: flex;
230+
flex-direction: column;
231+
}
232+
233+
.activity-card .participants-list .participant-name {
234+
font-weight: 600;
235+
color: #222;
236+
font-size: 14px;
237+
line-height: 1;
238+
}
239+
240+
.activity-card .participants-list .participant-note {
241+
font-size: 12px;
242+
color: #6b7280;
243+
margin-top: 2px;
244+
}
245+
246+
/* Hover for each participant row */
247+
.activity-card .participants-list li:hover {
248+
background-color: #f4f6ff;
249+
transform: translateY(-1px);
250+
}
251+
252+
/* If there are no participants, show a subtle empty state */
253+
.activity-card .participants-empty {
254+
padding: 8px;
255+
font-size: 13px;
256+
color: #666;
257+
background: #fbfbfb;
258+
border-radius: 6px;
259+
border: 1px dashed #f0f0f0;
260+
}
261+
262+
/* Ensure good spacing on small screens */
263+
@media (max-width: 480px) {
264+
.activity-card .participants-list li {
265+
gap: 8px;
266+
padding: 8px;
267+
}
268+
}

0 commit comments

Comments
 (0)