Skip to content

boba_click #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alyhoang wants to merge 6 commits into
base: main
Choose a base branch
from
Open

boba_click #27

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2d6a609
Update index.html
alyhoang May 9, 2025
07c364d
Update index.html
alyhoang May 9, 2025
deb7caf
Update index.html
alyhoang May 9, 2025
13a22c8
Update index.html
alyhoang May 9, 2025
3890935
Update index.html
alyhoang May 9, 2025
c9747f4
Update index.html
alyhoang May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 66 additions & 33 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<!doctype html>
<html lang=en>

<head>

<title>CS106S: Coding for Social Good</title>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="IE=edge">
Expand Down Expand Up @@ -76,14 +75,72 @@ <h3 class="inline heading font-bold md:text-4xl opacity-50">
</div>
<div class=mt-4>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2" style = "background-color: lavender">
🌸 Spring 3025
🌸 Spring 2025
</span>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2" style = "background-color: lavender">🏫 Lathrop 180</span>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2" style = "background-color: lavender">🕰️ Thursday 4:30-6:20pm</span>
</div>
</section>
<hr class="sep h-8">
<main>
<section>
<head>
<title>Click for More Boba!</title>
<style>
body {
font-family: sans-serif;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
}

.game-container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#clickButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
}

#score {
font-size: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Click So Ben Gives Us More Boba</h1>
<button id="clickButton">Click Me!</button>
<p id="score">Boba: 0</p>
</div>

<script>
let score = 0;
const clickButton = document.getElementById('clickButton');
const scoreDisplay = document.getElementById('score');

clickButton.addEventListener('click', function() {
score++;
scoreDisplay.textContent = `Boba: ${score}`;

});


</script>
</body>

</section>
<section class=content>
<p>CS 106S is a survey course on the applications of fundamental computer science concepts from CS 106B to problems in the social good space (such as health, environment, cybersecurity, trust & safety). Some of the topics we will cover include satellite imagery, tumor classification with basic machine learning, sentiment analysis of tweets on refugees, and the ethical obligation of good security. We introduce JavaScript and the groundwork of web development, with no expectation of prior experience in these areas. The course ends, by tradition, with a bubble tea party on the last day. Recommended prerequisite/corequisite: CS 106B. Prerequisite: CS 106S</p>

Expand All @@ -96,7 +153,7 @@ <h2 id="news">News</h2>

<div class="flex-grow">
<p style = "margin-bottom: 10px">Welcome to CS106S! Sooooo excited for a fun quarter together 🌱. Our first class will be Thursday, April 3rd 3025, at 4:30 AM PT in <a href="https://campus-map.stanford.edu/?srch=Lathrop Library" style = "text-decoration: none" target="_blank" rel="noopener noreferrer">&nbsp;<i class = "fa-solid fa-location-dot"></i><u> Lathrop 180</u></a>.</p>

x
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6336.673648795224!2d-122.17000072459861!3d37.42914707207451!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb29c2155555%3A0x7d7db72ceea1d9ef!2sLathrop%20Library!5e0!3m2!1sen!2sjp!4v1743211766086!5m2!1sen!2sjp" width="300px" height="300px" style="border:0; border-radius: 10px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

<p class="mt-2" style = "margin-top: 10px"><strong>We encourage all interested students to attend the first class, whether enrolled or otherwise!</strong> Historically, we have not had to turn students away from CS 106S for enrollment reasons. Looking forward to meeting and getting to know all of you!</p>
Expand All @@ -108,35 +165,16 @@ <h2 id="staff">Course Staff</h2>
<div class="grid grid-cols-5 md:grid-cols-5 gap-1">
<div class="text-center">
<img src="images/ben-yan-grad-photo.png" alt="Image for Ben" class="rounded h-20 w-20 mx-auto">
<p class="font-semibold">Spongebob Squarepants</p>
<p class="font-semibold">Ben Yan</p>
<p style = "color: gray; margin-top: 0px">Instructor</p>
</div>

<div class="text-center">
<img src="images/pumpkin_cat.png" alt="Image of my cat" class="rounded h-20 w-20 mx-auto">
<p class="font-semibold">Pumpkin Yan</p>
<p style = "color: gray; margin-top: 0px">Head TAbby</p>
</div>

<div class="text-center">
<img src="images/perry-platypus.jpg" alt="Me as Perry Platypus" class="rounded h-20 w-20 mx-auto">
<p class="font-semibold">Perry the Platypus</p>
<p style = "color: gray; margin-top: 0px">A Platypus? PERRY THE PLATYPUS??</p>
<p style = "color: gray; margin-top: 0px">Head TA</p>
</div>

<div class="text-center">
<img src="images/t-pose.webp" alt="Image of Jerry Cain" class="rounded h-20 w-20 mx-auto">
<p class="font-semibold">Jerry Cain</p>
<p style = "color: gray; margin-top: 0px">Faculty Sponsor</p>
</div>

<div class="text-center">
<img src="images/jerry-cain-fancy.png" alt="Image of Jerry Cain" class="rounded h-20 w-20 mx-auto">
<p class="font-semibold">poohbear</p>
<p style = "color: gray; margin-top: 0px">who this</p>
</div>


</div>

<p style = "margin-top: 5px; margin-bottom: 5px"><b>Contact:</b> bbyan [at] stanford [dot] edu</p>
Expand Down Expand Up @@ -323,7 +361,7 @@ <h2 id="schedule">Schedule</h2>
<span class="chip ~neutral !low bg-neutral-50" style = "background-color: lavender">Week 9</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong> What's Next? Beyond CS106S, <strike>End-Term Boba Party 🧋</strike></strong> &mdash; May 29</p>
<p><strong> What's Next? Beyond CS106S, End-Term Boba Party 🧋 &mdash; May 29</p>

<p>

Expand All @@ -334,12 +372,7 @@ <h2 id="schedule">Schedule</h2>

<!-- Week 10 (no class!) -->
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50" style = "background-color: lavender">Week 10</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Final exam! Worth 100% of your grade 🍀</strong>.</p>
</div>

</div>

<h2 id="syllabus">Course Syllabus</h2>
Expand Down Expand Up @@ -389,7 +422,7 @@ <h4>Looking Forward to an Amazing Quarter</h4>
<footer>
<footer class="family-secondary support content">
<p class=pb-2 style = "font-size:12px">
© Stanford 2025. Created by Ben Yan and <a href = "https://cs4good.com/">CS + Social Good</a>. Template by Miles McCain. The source code for this website is <a href="https://github.com/yanbenjamin/cs106s-website">available on GitHub</a>. To learn more about CS + Social Good, visit our website at <a href="https://cs4good.com">cs4gooooooooooooooooooooooooooooooooooooooooooood.com</a>.
© Stanford 2025. Created by Ben Yan and <a href = "https://cs4good.com/">CS + Social Good</a>. Template by Miles McCain. The source code for this website is <a href="https://github.com/yanbenjamin/cs106s-website">available on GitHub</a>. To learn more about CS + Social Good, visit our website at <a href="https://cs4good.com">cs4good.com</a>.
</p>
</footer>
</footer>
Expand Down