Skip to content

Commit

Permalink
Moved "Day in the Life" to programs
Browse files Browse the repository at this point in the history
  • Loading branch information
@99TheDark
99TheDark committed Sep 22, 2023
1 parent a70adc4 commit 7c0ce82
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 165 deletions.
77 changes: 0 additions & 77 deletions about/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,83 +91,6 @@ <h2 class="h q-title" tabindex="0">How?</h2>
</p>
</div>
</div>
<h1 id="aditl">A Day in the Life of a Renegade</h1>
<div id="day">
<p>
&emsp;&emsp;&ensp; Each week of STEM camp will focus on a theme and each day our campers will explore this theme through a series of hands-on projects and guest speakers. There are also multiple recess times for active bodies, and opportunities for reflection.
</p>
<p>
&emsp;&emsp;&ensp; From the moment our club members arrive, they are surrounded by successful, smart, trailblazing role models who encourage them to pursue their love of science, exploration and building. We create a nurturing environment that focuses on building community.
</p>
<table id="schedule">
<tr>
<td class="timing">9:00AM - 10:00AM</td>
<td class="activity">
Each day begins with a morning meeting and team building/social-emotional activities. It's an opportunity to build community by welcoming each other, discuss the daily projects and set goals. The first day, we get to know each other, set club rules, and become a team.
</td>
</tr>
<tr>
<td class="timing">10:00AM - 10:30AM</td>
<td class="activity">
Campers begin their first project.
</td>
</tr>
<tr>
<td class="timing">10:30AM - 11:00AM</td>
<td class="activity">
Morning recess.
</td>
</tr>
<tr>
<td class="timing">11:00AM - 12:00PM</td>
<td class="activity">
Campers continue their first project, including extension activities for early finishers to take the learning deeper.
</td>
</tr>
<tr>
<td class="timing">12:00PM - 1:00PM</td>
<td class="activity">
Lunch and midday recess.
</td>
</tr>
<tr>
<td class="timing">1:00PM - 2:30PM</td>
<td class="activity">
Campers begin their second project.
</td>
</tr>
<tr>
<td class="timing">2:30PM - 3:00PM</td>
<td class="activity">
Afternoon recess.
</td>
</tr>
<tr>
<td class="timing">3:00PM - 4:00PM</td>
<td class="activity">
Independent project or project completion time, to give all campers an opportunity to finish what they started and explore any extension activities that interest them. Shorter projects, small and large group games, and open-workshop project time are available to adapt to each camper's individual interests and needs.
</td>
</tr>
<tr>
<td class="timing">4:00PM - 4:15PM</td>
<td class="activity">
Clean up time. An important part of creating is keeping your workspace clean. All kids will be involved in creating a space welcoming and respectful of their fellow creators.
</td>
</tr>
<tr>
<td class="timing">4:15PM - 4:45PM</td>
<td class="activity">
Closing Circle/Reflections. A time for Renegades who haven't been picked up yet to come together and ease into the end of the day. It's an opportunity to discuss challenges, support each other, and look to the next day together.
</td>
</tr>
<tr>
<td class="timing">4:45PM - 5:00PM</td>
<td class="activity">
Pick up.
</td>
</tr>
</table>
</div>
</div>
<div data-href="../global/tiles/footer.html"></div>
</body>
Expand Down
72 changes: 0 additions & 72 deletions about/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,78 +45,6 @@
position: relative;
}

#aditl {
display: block;
text-align: center;
font-size: 2.7em;
font-family: "Poppins", sans-serif;
margin-top: 8rem;
}

#aditl::before {
content: "";
position: absolute;
left: 5vw;
padding: 0px;
margin: 0px;
width: 90vw;
height: 0px;
text-align: center;
border: 2px solid var(--i);
border-radius: 5px;
margin-top: -5rem;
}

#day {
font-family: "Comme", sans-serif;
margin-left: 12rem;
margin-right: 12rem;
font-size: 1.1em;
}

#schedule {
margin-top: 3rem;
border-spacing: 0px;
border-radius: 10px;
}

table {
border: 1px solid black;
}

.timing {
width: 20%;
padding-left: 30px;
margin: 0px;
height: 80px;
border-right: 1px solid black;
}

.activity {
padding-left: 20px;
padding-right: 40px;
}

tr:first-child > td:first-child {
border-top-left-radius: 10px;
}

tr:first-child > td:last-child {
border-top-right-radius: 10px;
}

tr:last-child > td:first-child {
border-bottom-left-radius: 10px;
}

tr:last-child > td:last-child {
border-bottom-right-radius: 10px;
}

tr:nth-child(odd) {
background-color: var(--l);
}

@media (max-width: 900px) {
.question {
font-size: 11px;
Expand Down
78 changes: 78 additions & 0 deletions programs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,84 @@
<div data-href="../global/tiles/navigation.html"></div>
<div id="content">
<ul hidden id="programs"></ul>

<h1 id="aditl">A Day in the Life of a Renegade</h1>
<div id="day">
<p>
&emsp;&emsp;&ensp; Each week of STEM camp will focus on a theme and each day our campers will explore this theme through a series of hands-on projects and guest speakers. There are also multiple recess times for active bodies, and opportunities for reflection.
</p>
<p>
&emsp;&emsp;&ensp; From the moment our club members arrive, they are surrounded by successful, smart, trailblazing role models who encourage them to pursue their love of science, exploration and building. We create a nurturing environment that focuses on building community.
</p>
<table id="schedule">
<tr>
<td class="timing">9:00AM - 10:00AM</td>
<td class="activity">
Each day begins with a morning meeting and team building/social-emotional activities. It's an opportunity to build community by welcoming each other, discuss the daily projects and set goals. The first day, we get to know each other, set club rules, and become a team.
</td>
</tr>
<tr>
<td class="timing">10:00AM - 10:30AM</td>
<td class="activity">
Campers begin their first project.
</td>
</tr>
<tr>
<td class="timing">10:30AM - 11:00AM</td>
<td class="activity">
Morning recess.
</td>
</tr>
<tr>
<td class="timing">11:00AM - 12:00PM</td>
<td class="activity">
Campers continue their first project, including extension activities for early finishers to take the learning deeper.
</td>
</tr>
<tr>
<td class="timing">12:00PM - 1:00PM</td>
<td class="activity">
Lunch and midday recess.
</td>
</tr>
<tr>
<td class="timing">1:00PM - 2:30PM</td>
<td class="activity">
Campers begin their second project.
</td>
</tr>
<tr>
<td class="timing">2:30PM - 3:00PM</td>
<td class="activity">
Afternoon recess.
</td>
</tr>
<tr>
<td class="timing">3:00PM - 4:00PM</td>
<td class="activity">
Independent project or project completion time, to give all campers an opportunity to finish what they started and explore any extension activities that interest them. Shorter projects, small and large group games, and open-workshop project time are available to adapt to each camper's individual interests and needs.
</td>
</tr>
<tr>
<td class="timing">4:00PM - 4:15PM</td>
<td class="activity">
Clean up time. An important part of creating is keeping your workspace clean. All kids will be involved in creating a space welcoming and respectful of their fellow creators.
</td>
</tr>
<tr>
<td class="timing">4:15PM - 4:45PM</td>
<td class="activity">
Closing Circle/Reflections. A time for Renegades who haven't been picked up yet to come together and ease into the end of the day. It's an opportunity to discuss challenges, support each other, and look to the next day together.
</td>
</tr>
<tr>
<td class="timing">4:45PM - 5:00PM</td>
<td class="activity">
Pick up.
</td>
</tr>
</table>
</div>
</div>
<div data-href="../global/tiles/footer.html"></div>

Expand Down
26 changes: 12 additions & 14 deletions programs/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
fetch(`${location.origin}/api/programs/`)
fetch(`${ location.origin }/api/programs/`)
.then(data => data.json())
.then(json => generatePrograms(json))

const displayMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const displayDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const displayMonths = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
const displayDays = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ];

const dateSettings = {
timeZone: "America/Los_Angeles",
Expand All @@ -21,7 +21,7 @@ function spotText(spots) {
if(spots == 0) {
return "Sold out!";
} else if(spots <= 3) {
return `Only ${spots} spot${spots == 1 ? "" : "s"} left!`;
return `Only ${ spots } spot${ spots == 1 ? "" : "s" } left!`;
} else {
return "";
}
Expand All @@ -31,8 +31,6 @@ function generatePrograms(json) {
const programs = document.getElementById("programs");
if(json.series.length != 0) programs.hidden = false;

console.log(json.series);

json.series.forEach(program => {
const location = program.location_series.location.name;
const neighborhood = program.location_series.location.neighborhood;
Expand All @@ -53,28 +51,28 @@ function generatePrograms(json) {
programs.innerHTML += `<li class="program">
<div class="timeholder">
<p class="timeframe">
${displayMonths[startTime.getMonth()]} ${startTime.getDate()}–${endTime.getDate()}
${ displayMonths[ startTime.getMonth() ] } ${ startTime.getDate() }–${ endTime.getDate() }
</p>
<p class="days">
${displayDays[startTime.getDay()]}–${displayDays[endTime.getDay()]}, ${time(startTime)}–${time(endTime)}
${ displayDays[ startTime.getDay() ] }–${ displayDays[ endTime.getDay() ] }, ${ time(startTime) }–${ time(endTime) }
</p>
<p class="age-range">
${ageMin} to ${ageMax} years olds
${ ageMin } to ${ ageMax } years olds
</p>
</div>
<div class="info">
<a class="name" target="_blank" href="${url}">
${title}
<a class="name" target="_blank" href="${ url }">
${ title }
</a>
<p class="location">
@ ${location} (${neighborhood})
@ ${ location } (${ neighborhood })
</p>
<p class="price">
$${price}
$${ price }
</p>
</div>
<p class="status">
${spotText(spots)}
${ spotText(spots) }
</p>
</li>`;
});
Expand Down
61 changes: 59 additions & 2 deletions programs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}

#programs {
margin: 4rem 10rem 4rem 10rem;
margin: 4rem 10rem 2rem 10rem;
padding: 3rem 0px 0px 0px;
border-radius: 7px;
filter: drop-shadow(0px 3px 3px #00000037);
Expand All @@ -13,7 +13,6 @@

.program {
list-style-type: none;
border-top: 2px solid var(--i);
display: flex;
flex-direction: row;
padding-top: 1.5rem;
Expand Down Expand Up @@ -79,4 +78,62 @@
margin-left: auto;
margin-right: 5rem;
color: var(--m);
}

#aditl {
display: block;
text-align: center;
font-size: 2.7em;
margin-top: 4rem;
font-family: "Poppins", sans-serif;
}

#day {
font-family: "Comme", sans-serif;
margin-left: 12rem;
margin-right: 12rem;
font-size: 1.1em;
}

#schedule {
margin-top: 3rem;
border-spacing: 0px;
border-radius: 10px;
}

table {
border: 1px solid black;
}

.timing {
width: 20%;
padding-left: 30px;
margin: 0px;
height: 80px;
border-right: 1px solid black;
}

.activity {
padding-left: 20px;
padding-right: 40px;
}

tr:first-child > td:first-child {
border-top-left-radius: 10px;
}

tr:first-child > td:last-child {
border-top-right-radius: 10px;
}

tr:last-child > td:first-child {
border-bottom-left-radius: 10px;
}

tr:last-child > td:last-child {
border-bottom-right-radius: 10px;
}

tr:nth-child(odd) {
background-color: var(--l);
}

0 comments on commit 7c0ce82

Please sign in to comment.