CS50 Problem Set 8#

Here’s my answers for the CS50 Problem Set 8. Hope that will help you a bit.

Problem 1: Trivia #

1
<!DOCTYPE html>
2

3
<html lang="en">
4
  <head>
5
    <link
6
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
7
      rel="stylesheet"
8
    />
9
    <link href="styles.css" rel="stylesheet" />
10
    <title>Trivia!</title>
11
    <script>
12
      // TODO: Add code to check answers to questions
13
      function checkMultipleChoices(event) {
14
        // Get the element which triggered the event
15
        let button = event.target;
16

17
        // Check if the element's inner HTML matches expected answer
18
        if (button.innerHTML == "1 person per 6 sheep") {
19
          button.style.backgroundColor = "Green";
20
          button.parentElement.querySelector(".feedback").innerHTML =
21
            "Correcrt";
22
        } else {
23
          button.style.backgroundColor = "Red";
24
          button.parentElement.querySelector(".feedback").innerHTML =
25
            "Incorrecrt";
26
        }
27
      }
28

29
      function checkFreeResponse(event) {
30
        // Get the element which triggered the event
31
        let button = event.target;
32

33
        // Get the input element corresponding to the button
34
        let input = button.parentElement.querySelector("input");
35

36
        //Check if the answer is correct
37
        if (input.value == "Switzerland") {
38
          input.style.backgroundColor = "Green";
39
          input.parentElement.querySelector(".feedback").innerHTML = "Correcrt";
40
        } else {
41
          input.style.backgroundColor = "Red";
42
          input.parentElement.querySelector(".feedback").innerHTML =
43
            "Incorrecrt";
44
        }
45
      }
46
    </script>
47
  </head>
48

49
  <body>
50
    <div class="header">
51
      <h1>Trivia!</h1>
52
    </div>
53

54
    <div class="container">
55
      <div class="section">
56
        <h2>Part 1: Multiple Choice</h2>
57
        <hr />
58
        <!-- TODO: Add multiple choice question here -->
59
        <h3>
60
          What is the approximate ratio of people to sheep in New Zealand?
61
        </h3>
62
        <button onclick="checkMultipleChoices(event)">
63
          6 people per 1 sheep
64
        </button>
65
        <button onclick="checkMultipleChoices(event)">
66
          3 people per 1 sheep
67
        </button>
68
        <button onclick="checkMultipleChoices(event)">
69
          1 person per 1 sheep
70
        </button>
71
        <button onclick="checkMultipleChoices(event)">
72
          1 person per 3 sheep
73
        </button>
74
        <button onclick="checkMultipleChoices(event)">
75
          1 person per 6 sheep
76
        </button>
77
        <p class="feedback"></p>
78
      </div>
79

80
      <div class="section">
81
        <h2>Part 2: Free Response</h2>
82
        <hr />
83
        <!-- TODO: Add free response question here -->
84
        <h3>
85
          In which country is it illegal to own only one guinea pig, as a lone
86
          guinea pig might get lonely?
87
        </h3>
88
        <input type="text" placeholder="Enter text here" />
89
        <button onclick="checkFreeResponse(event)">Check Answer</button>
90
        <p class="feedback"></p>
91
      </div>
92
    </div>
93
  </body>
94
</html>

Problem 2: Homepage #

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>About Me - My Homepage</title>
7
    <!-- Bootstrap CSS -->
8
    <link
9
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
10
      rel="stylesheet"
11
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
12
      crossorigin="anonymous"
13
    />
14
    <!-- Custom CSS -->
15
    <link href="styles.css" rel="stylesheet" />
16
  </head>
17

18
  <body>
19
    <!-- Navigation Bar -->
20
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
21
      <div class="container">
22
        <a class="navbar-brand" href="index.html">My Homepage</a>
23
        <button
24
          class="navbar-toggler"
25
          type="button"
26
          data-bs-toggle="collapse"
27
          data-bs-target="#navbarNav"
28
        >
29
          <span class="navbar-toggler-icon"></span>
30
        </button>
31
        <div class="navbar-collapse collapse" id="navbarNav">
32
          <ul class="navbar-nav ms-auto">
33
            <li class="nav-item">
34
              <a class="nav-link" href="index.html">Home</a>
35
            </li>
36
            <li class="nav-item">
37
              <a class="nav-link active" href="about.html">About Me</a>
38
            </li>
39
            <li class="nav-item">
40
              <a class="nav-link" href="hobbies.html">Hobbies</a>
41
            </li>
42
            <li class="nav-item">
43
              <a class="nav-link" href="contact.html">Contact</a>
44
            </li>
45
          </ul>
46
        </div>
47
      </div>
48
    </nav>
49

50
    <!-- Page Header -->
51
    <header class="bg-secondary py-5 text-white">
52
      <div class="container text-center">
53
        <h1 class="display-4">About Me</h1>
54
        <p class="lead">Get to know me better</p>
55
      </div>
56
    </header>
57

58
    <!-- Main Content -->
59
    <main class="container my-5">
60
      <div class="row">
61
        <div class="col-lg-8 mx-auto">
62
          <article>
63
            <h2 class="mb-4">Hello There!</h2>
64

65
            <section class="mb-5">
66
              <h3>Who Am I?</h3>
67
              <p>
68
                I'm a passionate learner currently working on expanding my web
69
                development skills through the CS50 course. This homepage
70
                represents my journey into HTML, CSS, and JavaScript
71
                development.
72
              </p>
73
              <p>
74
                As someone interested in technology and programming, I enjoy
75
                exploring new concepts and applying them to create meaningful
76
                projects like this one.
77
              </p>
78
            </section>
79

80
            <section class="mb-5">
81
              <h3>My Background</h3>
82
              <p>
83
                I have a diverse background with interests spanning multiple
84
                fields. While I'm currently focused on computer science and web
85
                development, I maintain curiosity about various subjects
86
                including:
87
              </p>
88
              <ul>
89
                <li>Computer Science and Programming</li>
90
                <li>Formula 1</li>
91
                <li>Mathmatics and Physics</li>
92
              </ul>
93
            </section>
94

95
            <section class="mb-5">
96
              <h3>Education & Learning</h3>
97
              <p>
98
                I'm currently enrolled in Harvard's CS50 course, which has been
99
                an incredible learning experience. Through this course, I've
100
                gained valuable insights into:
101
              </p>
102
              <div class="row">
103
                <div class="col-md-6">
104
                  <ul>
105
                    <li>Programming fundamentals</li>
106
                    <li>Web development basics</li>
107
                    <li>Problem-solving approaches</li>
108
                  </ul>
109
                </div>
110
                <div class="col-md-6">
111
                  <ul>
112
                    <li>Algorithm thinking</li>
113
                    <li>Code optimization</li>
114
                    <li>Project development</li>
115
                  </ul>
116
                </div>
117
              </div>
118
            </section>
119

120
            <section class="bg-light rounded p-4">
121
              <h3>Fun Facts About Me</h3>
122
              <div class="row">
123
                <div class="col-md-4 text-center">
124
                  <div class="p-3">
125
                    <h4 class="text-primary">📚</h4>
126
                    <p>I love reading books on technology and science</p>
127
                  </div>
128
                </div>
129
                <div class="col-md-4 text-center">
130
                  <div class="p-3">
131
                    <h4 class="text-primary">🎮</h4>
132
                    <p>Enjoy playing strategy games in my free time</p>
133
                  </div>
134
                </div>
135
                <div class="col-md-4 text-center">
136
                  <div class="p-3">
137
                    <h4 class="text-primary">☕</h4>
138
                    <p>Believe that good coffee fuels great ideas</p>
139
                  </div>
140
                </div>
141
              </div>
142
            </section>
143
          </article>
144
        </div>
145
      </div>
146
    </main>
147

148
    <!-- Footer -->
149
    <footer class="bg-dark mt-5 py-4 text-white">
150
      <div class="container text-center">
151
        <p>2026 My Homepage.</p>
152
      </div>
153
    </footer>
154

155
    <!-- Bootstrap JS -->
156
    <script
157
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
158
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
159
      crossorigin="anonymous"
160
    ></script>
161
    <!-- Custom JavaScript -->
162
    <script src="script.js"></script>
163
  </body>
164
</html>

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Contact Me - My Homepage</title>
7
    <!-- Bootstrap CSS -->
8
    <link
9
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
10
      rel="stylesheet"
11
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
12
      crossorigin="anonymous"
13
    />
14
    <!-- Custom CSS -->
15
    <link href="styles.css" rel="stylesheet" />
16
  </head>
17

18
  <body>
19
    <!-- Navigation Bar -->
20
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
21
      <div class="container">
22
        <a class="navbar-brand" href="index.html">My Homepage</a>
23
        <button
24
          class="navbar-toggler"
25
          type="button"
26
          data-bs-toggle="collapse"
27
          data-bs-target="#navbarNav"
28
        >
29
          <span class="navbar-toggler-icon"></span>
30
        </button>
31
        <div class="navbar-collapse collapse" id="navbarNav">
32
          <ul class="navbar-nav ms-auto">
33
            <li class="nav-item">
34
              <a class="nav-link" href="index.html">Home</a>
35
            </li>
36
            <li class="nav-item">
37
              <a class="nav-link" href="about.html">About Me</a>
38
            </li>
39
            <li class="nav-item">
40
              <a class="nav-link" href="hobbies.html">Hobbies</a>
41
            </li>
42
            <li class="nav-item">
43
              <a class="nav-link active" href="contact.html">Contact</a>
44
            </li>
45
          </ul>
46
        </div>
47
      </div>
48
    </nav>
49

50
    <!-- Page Header -->
51
    <header class="bg-warning text-dark py-5">
52
      <div class="container text-center">
53
        <h1 class="display-4">Get In Touch</h1>
54
        <p class="lead">
55
          Feel free to reach out for any inquiries or collaborations
56
        </p>
57
      </div>
58
    </header>
59

60
    <!-- Main Content -->
61
    <main class="container my-5">
62
      <div class="row">
63
        <!-- Contact Form -->
64
        <div class="col-lg-6 mb-5">
65
          <div class="card shadow">
66
            <div class="card-header bg-primary text-white">
67
              <h3 class="mb-0">Send Me a Message</h3>
68
            </div>
69
            <div class="card-body">
70
              <form id="contactForm">
71
                <div class="mb-3">
72
                  <label for="name" class="form-label">Name *</label>
73
                  <input type="text" class="form-control" id="name" required />
74
                </div>
75
                <div class="mb-3">
76
                  <label for="email" class="form-label">Email *</label>
77
                  <input
78
                    type="email"
79
                    class="form-control"
80
                    id="email"
81
                    required
82
                  />
83
                </div>
84
                <div class="mb-3">
85
                  <label for="subject" class="form-label">Subject</label>
86
                  <input type="text" class="form-control" id="subject" />
87
                </div>
88
                <div class="mb-3">
89
                  <label for="message" class="form-label">Message *</label>
90
                  <textarea
91
                    class="form-control"
92
                    id="message"
93
                    rows="5"
94
                    required
95
                  ></textarea>
96
                </div>
97
                <button type="submit" class="btn btn-primary">
98
                  Send Message
99
                </button>
100
                <button type="reset" class="btn btn-outline-secondary ms-2">
101
                  Clear Form
102
                </button>
103
              </form>
104
              <div id="formSuccess" class="alert alert-success d-none mt-3">
105
                Thank you for your message! I'll get back to you soon.
106
              </div>
107
            </div>
108
          </div>
109
        </div>
110

111
        <!-- Contact Information -->
112
        <div class="col-lg-6">
113
          <div class="card shadow">
114
            <div class="card-header bg-success text-white">
115
              <h3 class="mb-0">Contact Information</h3>
116
            </div>
117
            <div class="card-body">
118
              <ul class="list-group list-group-flush">
119
                <li class="list-group-item">
120
                  <strong>📧 Email:</strong>
121
                  <a
122
                    href="mailto:kinghua0629@outlook.com"
123
                    class="text-decoration-none"
124
                    >kinghua0629@outlook.com</a
125
                  >
126
                </li>
127
                <li class="list-group-item">
128
                  <strong>🌐 Website:</strong>
129
                  <a
130
                    href="https://kinghua0629.github.io"
131
                    target="_blank"
132
                    class="text-decoration-none"
133
                    >kinghua0629.github.io</a
134
                  >
135
                </li>
136
                <li class="list-group-item">
137
                  <strong>📍 Location:</strong> Shanghai, China
138
                </li>
139
                <li class="list-group-item">
140
                  <strong>🕒 Availability:</strong> Usually responsive during
141
                  business hours
142
                </li>
143
              </ul>
144

145
              <div class="mt-4">
146
                <h5>Social Links</h5>
147
                <div class="d-flex gap-2">
148
                  <a
149
                    href="https://github.com/kinghua0629"
150
                    class="btn btn-outline-primary"
151
                    >GitHub</a
152
                  >
153
                </div>
154
              </div>
155
            </div>
156
          </div>
157

158
          <!-- FAQ Section -->
159
          <div class="card mt-4 shadow">
160
            <div class="card-header bg-info text-white">
161
              <h3 class="mb-0">Frequently Asked Questions</h3>
162
            </div>
163
            <div class="card-body">
164
              <div class="accordion" id="faqAccordion">
165
                <div class="accordion-item">
166
                  <h2 class="accordion-header" id="faqHeading1">
167
                    <button
168
                      class="accordion-button"
169
                      type="button"
170
                      data-bs-toggle="collapse"
171
                      data-bs-target="#faqCollapse1"
172
                    >
173
                      How long does it take to get a response?
174
                    </button>
175
                  </h2>
176
                  <div
177
                    id="faqCollapse1"
178
                    class="accordion-collapse show collapse"
179
                    data-bs-parent="#faqAccordion"
180
                  >
181
                    <div class="accordion-body">
182
                      I typically respond to emails within 24 hours during
183
                      weekdays.
184
                    </div>
185
                  </div>
186
                </div>
187

188
                <div class="accordion-item">
189
                  <h2 class="accordion-header" id="faqHeading2">
190
                    <button
191
                      class="accordion-button collapsed"
192
                      type="button"
193
                      data-bs-toggle="collapse"
194
                      data-bs-target="#faqCollapse2"
195
                    >
196
                      Do you accept collaboration requests?
197
                    </button>
198
                  </h2>
199
                  <div
200
                    id="faqCollapse2"
201
                    class="accordion-collapse collapse"
202
                    data-bs-parent="#faqAccordion"
203
                  >
204
                    <div class="accordion-body">
205
                      Yes! I'm always interested in interesting projects and
206
                      collaborations. Feel free to describe your idea in the
207
                      message.
208
                    </div>
209
                  </div>
210
                </div>
211
              </div>
212
            </div>
213
          </div>
214
        </div>
215
      </div>
216
    </main>
217

218
    <!-- Footer -->
219
    <footer class="bg-dark mt-5 py-4 text-white">
220
      <div class="container text-center">
221
        <p>&copy; 2026 My Homepage.</p>
222
      </div>
223
    </footer>
224

225
    <!-- Bootstrap JS -->
226
    <script
227
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
228
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
229
      crossorigin="anonymous"
230
    ></script>
231
    <!-- Custom JavaScript -->
232
    <script src="script.js"></script>
233
  </body>
234
</html>

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>My Hobbies - My Homepage</title>
7
    <!-- Bootstrap CSS -->
8
    <link
9
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
10
      rel="stylesheet"
11
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
12
      crossorigin="anonymous"
13
    />
14
    <!-- Custom CSS -->
15
    <link href="styles.css" rel="stylesheet" />
16
  </head>
17

18
  <body>
19
    <!-- Navigation Bar -->
20
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
21
      <div class="container">
22
        <a class="navbar-brand" href="index.html">My Homepage</a>
23
        <button
24
          class="navbar-toggler"
25
          type="button"
26
          data-bs-toggle="collapse"
27
          data-bs-target="#navbarNav"
28
        >
29
          <span class="navbar-toggler-icon"></span>
30
        </button>
31
        <div class="navbar-collapse collapse" id="navbarNav">
32
          <ul class="navbar-nav ms-auto">
33
            <li class="nav-item">
34
              <a class="nav-link" href="index.html">Home</a>
35
            </li>
36
            <li class="nav-item">
37
              <a class="nav-link" href="about.html">About Me</a>
38
            </li>
39
            <li class="nav-item">
40
              <a class="nav-link active" href="hobbies.html">Hobbies</a>
41
            </li>
42
            <li class="nav-item">
43
              <a class="nav-link" href="contact.html">Contact</a>
44
            </li>
45
          </ul>
46
        </div>
47
      </div>
48
    </nav>
49

50
    <!-- Page Header -->
51
    <header class="bg-success py-5 text-white">
52
      <div class="container text-center">
53
        <h1 class="display-4">My Hobbies & Interests</h1>
54
        <p class="lead">Things I enjoy doing in my spare time</p>
55
      </div>
56
    </header>
57

58
    <!-- Main Content -->
59
    <main class="container my-5">
60
      <!-- Hobbies Gallery -->
61
      <div class="row">
62
        <div class="col-md-4 mb-4">
63
          <div class="card h-100">
64
            <div class="card-body">
65
              <h5 class="card-title text-success">💻 Programming</h5>
66
              <p class="card-text">
67
                I love solving problems through code and building applications.
68
                Currently learning web development through CS50.
69
              </p>
70
              <div class="progress">
71
                <div
72
                  class="progress-bar bg-success"
73
                  role="progressbar"
74
                  style="width: 75%"
75
                >
76
                  75%
77
                </div>
78
              </div>
79
            </div>
80
          </div>
81
        </div>
82

83
        <div class="col-md-4 mb-4">
84
          <div class="card h-100">
85
            <div class="card-body">
86
              <h5 class="card-title text-primary">📖 Reading</h5>
87
              <p class="card-text">
88
                Passionate about books on technology, science fiction, and
89
                personal development. Always looking for new recommendations.
90
              </p>
91
              <div class="progress">
92
                <div
93
                  class="progress-bar bg-primary"
94
                  role="progressbar"
95
                  style="width: 70%"
96
                >
97
                  70%
98
                </div>
99
              </div>
100
            </div>
101
          </div>
102
        </div>
103

104
        <div class="col-md-4 mb-4">
105
          <div class="card h-100">
106
            <div class="card-body">
107
              <h5 class="card-title text-warning">🎮 Gaming</h5>
108
              <p class="card-text">
109
                Enjoy strategy games and puzzles. Love the problem-solving
110
                aspect and competitive elements.
111
              </p>
112
              <div class="progress">
113
                <div
114
                  class="progress-bar bg-warning"
115
                  role="progressbar"
116
                  style="width: 50%"
117
                >
118
                  50%
119
                </div>
120
              </div>
121
            </div>
122
          </div>
123
        </div>
124
      </div>
125

126
      <!-- Skills Section -->
127
      <div class="row mt-5">
128
        <div class="col-lg-8 mx-auto">
129
          <h2 class="mb-4 text-center">Skills & Interests</h2>
130
          <div class="accordion" id="skillsAccordion">
131
            <div class="accordion-item">
132
              <h2 class="accordion-header" id="headingOne">
133
                <button
134
                  class="accordion-button"
135
                  type="button"
136
                  data-bs-toggle="collapse"
137
                  data-bs-target="#collapseOne"
138
                >
139
                  🎯 Problem Solving
140
                </button>
141
              </h2>
142
              <div
143
                id="collapseOne"
144
                class="accordion-collapse show collapse"
145
                data-bs-parent="#skillsAccordion"
146
              >
147
                <div class="accordion-body">
148
                  I enjoy tackling complex problems and finding creative
149
                  solutions. This skill translates well to both programming and
150
                  everyday challenges.
151
                </div>
152
              </div>
153
            </div>
154

155
            <div class="accordion-item">
156
              <h2 class="accordion-header" id="headingTwo">
157
                <button
158
                  class="accordion-button collapsed"
159
                  type="button"
160
                  data-bs-toggle="collapse"
161
                  data-bs-target="#collapseTwo"
162
                >
163
                  🎨 Creative Design
164
                </button>
165
              </h2>
166
              <div
167
                id="collapseTwo"
168
                class="accordion-collapse collapse"
169
                data-bs-parent="#skillsAccordion"
170
              >
171
                <div class="accordion-body">
172
                  Interested in UI/UX design and creating visually appealing
173
                  interfaces. Always looking to improve the aesthetic aspects of
174
                  my projects.
175
                </div>
176
              </div>
177
            </div>
178

179
            <div class="accordion-item">
180
              <h2 class="accordion-header" id="headingThree">
181
                <button
182
                  class="accordion-button collapsed"
183
                  type="button"
184
                  data-bs-toggle="collapse"
185
                  data-bs-target="#collapseThree"
186
                >
187
                  📚 Continuous Learning
188
                </button>
189
              </h2>
190
              <div
191
                id="collapseThree"
192
                class="accordion-collapse collapse"
193
                data-bs-parent="#skillsAccordion"
194
              >
195
                <div class="accordion-body">
196
                  Committed to lifelong learning and staying updated with new
197
                  technologies and methodologies in the ever-evolving tech
198
                  landscape.
199
                </div>
200
              </div>
201
            </div>
202
          </div>
203
        </div>
204
      </div>
205

206
      <!-- Interactive Hobby Selector -->
207
      <div class="row mt-5">
208
        <div class="col-lg-6 mx-auto">
209
          <div class="bg-info rounded p-4 text-center text-white">
210
            <h3>What's Your Favorite Hobby?</h3>
211
            <div class="mt-3">
212
              <select id="hobbySelect" class="form-select">
213
                <option value="">Choose a hobby...</option>
214
                <option value="programming">Programming/Coding</option>
215
                <option value="reading">Reading</option>
216
                <option value="gaming">Gaming</option>
217
                <option value="music">Music</option>
218
                <option value="sports">Sports</option>
219
                <option value="travel">Traveling</option>
220
              </select>
221
              <button id="hobbySubmit" class="btn btn-light mt-2">
222
                Share Your Choice
223
              </button>
224
              <p id="hobbyResponse" class="mt-3"></p>
225
            </div>
226
          </div>
227
        </div>
228
      </div>
229
    </main>
230

231
    <!-- Footer -->
232
    <footer class="bg-dark mt-5 py-4 text-white">
233
      <div class="container text-center">
234
        <p>2026 My Homepage.</p>
235
      </div>
236
    </footer>
237

238
    <!-- Bootstrap JS -->
239
    <script
240
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
241
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
242
      crossorigin="anonymous"
243
    ></script>
244
    <!-- Custom JavaScript -->
245
    <script src="script.js"></script>
246
  </body>
247
</html>

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <link
5
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
6
      rel="stylesheet"
7
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
8
      crossorigin="anonymous"
9
    />
10
    <script
11
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
12
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
13
      crossorigin="anonymous"
14
    ></script>
15
    <link href="styles.css" rel="stylesheet" />
16
    <title>Welcome to My Homepage</title>
17
    <meta charset="UTF-8" />
18
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
  </head>
20

21
  <body>
22
    <!-- Navigation Bar -->
23
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
24
      <div class="container">
25
        <a class="navbar-brand" href="index.html">My Homepage</a>
26
        <button
27
          class="navbar-toggler"
28
          type="button"
29
          data-bs-toggle="collapse"
30
          data-bs-target="#navbarNav"
31
        >
32
          <span class="navbar-toggler-icon"></span>
33
        </button>
34
        <div class="navbar-collapse collapse" id="navbarNav">
35
          <ul class="navbar-nav ms-auto">
36
            <li class="nav-item">
37
              <a class="nav-link active" href="index.html">Home</a>
38
            </li>
39
            <li class="nav-item">
40
              <a class="nav-link" href="about.html">About Me</a>
41
            </li>
42
            <li class="nav-item">
43
              <a class="nav-link" href="hobbies.html">Hobbies</a>
44
            </li>
45
            <li class="nav-item">
46
              <a class="nav-link" href="contact.html">Contact</a>
47
            </li>
48
          </ul>
49
        </div>
50
      </div>
51
    </nav>
52

53
    <!-- Hero Section -->
54
    <header class="bg-light py-5">
55
      <div class="container text-center">
56
        <h1 class="display-4 fw-bold">Welcome to My Personal Homepage!</h1>
57
        <p class="lead">
58
          This is my CS50 homepage assignment showcasing HTML, CSS, and
59
          JavaScript skills.
60
        </p>
61
        <button id="welcomeBtn" class="btn btn-primary btn-lg mt-3">
62
          Click for a Surprise!
63
        </button>
64
      </div>
65
    </header>
66

67
    <!-- Main Content -->
68
    <main class="container my-5">
69
      <div class="row">
70
        <div class="col-md-4 mb-4">
71
          <div class="card h-100 shadow-sm">
72
            <div class="card-body text-center">
73
              <h3 class="card-title">About Me</h3>
74
              <p class="card-text">
75
                Learn more about who I am and my background.
76
              </p>
77
              <a href="about.html" class="btn btn-outline-primary"
78
                >View Details</a
79
              >
80
            </div>
81
          </div>
82
        </div>
83
        <div class="col-md-4 mb-4">
84
          <div class="card h-100 shadow-sm">
85
            <div class="card-body text-center">
86
              <h3 class="card-title">My Hobbies</h3>
87
              <p class="card-text">
88
                Discover my interests and favorite activities.
89
              </p>
90
              <a href="hobbies.html" class="btn btn-outline-primary"
91
                >Explore Hobbies</a
92
              >
93
            </div>
94
          </div>
95
        </div>
96
        <div class="col-md-4 mb-4">
97
          <div class="card h-100 shadow-sm">
98
            <div class="card-body text-center">
99
              <h3 class="card-title">Get in Touch</h3>
100
              <p class="card-text">
101
                Feel free to contact me for any inquiries.
102
              </p>
103
              <a href="contact.html" class="btn btn-outline-primary"
104
                >Contact Me</a
105
              >
106
            </div>
107
          </div>
108
        </div>
109
      </div>
110

111
      <!-- Interactive Section -->
112
      <div class="row mt-5">
113
        <div class="col-12">
114
          <div class="bg-primary rounded p-4 text-white">
115
            <h2 class="mb-4 text-center">Interactive Demo</h2>
116
            <div class="text-center">
117
              <button id="colorChangeBtn" class="btn btn-light me-2">
118
                Change Background Color
119
              </button>
120
              <button id="showTimeBtn" class="btn btn-light">
121
                Show Current Time
122
              </button>
123
              <p id="timeDisplay" class="fs-5 mt-3"></p>
124
            </div>
125
          </div>
126
        </div>
127
      </div>
128
    </main>
129

130
    <!-- Footer -->
131
    <footer class="bg-dark mt-5 py-4 text-white">
132
      <div class="container text-center">
133
        <p>2026 My Homepage</p>
134
      </div>
135
    </footer>
136

137
    <!-- Bootstrap JS -->
138
    <script
139
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
140
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
141
      crossorigin="anonymous"
142
    ></script>
143
    <!-- Custom JavaScript -->
144
    <script src="script.js"></script>
145
  </body>
146
</html>

1
// Wait for DOM to be fully loaded
2
document.addEventListener("DOMContentLoaded", function () {
3
  // Welcome button functionality
4
  const welcomeBtn = document.getElementById("welcomeBtn");
5
  if (welcomeBtn) {
6
    welcomeBtn.addEventListener("click", function () {
7
      alert("🎉 Welcome to my homepage! Thanks for visiting! 🎉");
8
    });
9
  }
10

11
  // Color changing functionality
12
  const colorChangeBtn = document.getElementById("colorChangeBtn");
13
  if (colorChangeBtn) {
14
    colorChangeBtn.addEventListener("click", function () {
15
      const colors = [
16
        "#ff6b6b",
17
        "#4ecdc4",
18
        "#45b7d1",
19
        "#96ceb4",
20
        "#feca57",
21
        "#ff9ff3",
22
      ];
23
      const randomColor = colors[Math.floor(Math.random() * colors.length)];
24
      document.body.style.backgroundColor = randomColor;
25

26
      // Add temporary notification
27
      showNotification(`Background changed to ${randomColor}`, "success");
28
    });
29
  }
30

31
  // Show current time functionality
32
  const showTimeBtn = document.getElementById("showTimeBtn");
33
  const timeDisplay = document.getElementById("timeDisplay");
34
  if (showTimeBtn && timeDisplay) {
35
    showTimeBtn.addEventListener("click", function () {
36
      const now = new Date();
37
      const timeString = now.toLocaleTimeString();
38
      timeDisplay.textContent = `Current time: ${timeString}`;
39
      timeDisplay.classList.add("fade-in");
40

41
      // Remove animation class after animation completes
42
      setTimeout(() => {
43
        timeDisplay.classList.remove("fade-in");
44
      }, 600);
45
    });
46
  }
47

48
  // Hobby selector functionality
49
  const hobbySelect = document.getElementById("hobbySelect");
50
  const hobbySubmit = document.getElementById("hobbySubmit");
51
  const hobbyResponse = document.getElementById("hobbyResponse");
52
  if (hobbySelect && hobbySubmit && hobbyResponse) {
53
    hobbySubmit.addEventListener("click", function () {
54
      const selectedHobby = hobbySelect.value;
55
      if (selectedHobby) {
56
        const responses = {
57
          programming:
58
            "Great choice! Programming opens up endless possibilities.",
59
          reading: "Wonderful! Reading expands our minds and knowledge.",
60
          gaming: "Awesome! Games develop strategic thinking skills.",
61
          music: "Fantastic! Music is truly universal language.",
62
          sports: "Excellent! Sports promote health and teamwork.",
63
          travel: "Amazing! Travel broadens our perspectives.",
64
        };
65

66
        hobbyResponse.textContent =
67
          responses[selectedHobby] || "That sounds interesting!";
68
        hobbyResponse.className = "mt-3 alert alert-info";
69
      } else {
70
        hobbyResponse.textContent = "Please select a hobby first!";
71
        hobbyResponse.className = "mt-3 alert alert-warning";
72
      }
73
    });
74
  }
75

76
  // Contact form functionality
77
  const contactForm = document.getElementById("contactForm");
78
  const formSuccess = document.getElementById("formSuccess");
79
  if (contactForm && formSuccess) {
80
    contactForm.addEventListener("submit", function (e) {
81
      e.preventDefault();
82

83
      // Get form values
84
      const name = document.getElementById("name").value;
85
      const email = document.getElementById("email").value;
86
      const message = document.getElementById("message").value;
87

88
      // Simple validation
89
      if (name && email && message) {
90
        // Simulate form submission
91
        showLoadingState(contactForm);
92

93
        setTimeout(() => {
94
          hideLoadingState(contactForm);
95
          formSuccess.classList.remove("d-none");
96
          contactForm.reset();
97

98
          // Hide success message after 5 seconds
99
          setTimeout(() => {
100
            formSuccess.classList.add("d-none");
101
          }, 5000);
102
        }, 1500);
103
      } else {
104
        showNotification("Please fill in all required fields!", "warning");
105
      }
106
    });
107
  }
108

109
  // Smooth scrolling for anchor links
110
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
111
    anchor.addEventListener("click", function (e) {
112
      e.preventDefault();
113
      const target = document.querySelector(this.getAttribute("href"));
114
      if (target) {
115
        target.scrollIntoView({
116
          behavior: "smooth",
117
          block: "start",
118
        });
119
      }
120
    });
121
  });
122

123
  // Add fade-in animation to cards when they come into view
124
  const observerOptions = {
125
    threshold: 0.1,
126
    rootMargin: "0px 0px -50px 0px",
127
  };
128

129
  const observer = new IntersectionObserver(function (entries) {
130
    entries.forEach(entry => {
131
      if (entry.isIntersecting) {
132
        entry.target.classList.add("fade-in");
133
      }
134
    });
135
  }, observerOptions);
136

137
  // Observe all cards
138
  document.querySelectorAll(".card").forEach(card => {
139
    observer.observe(card);
140
  });
141

142
  // Dynamic greeting based on time of day
143
  const greetingElement = document.querySelector("header h1");
144
  if (greetingElement) {
145
    const hour = new Date().getHours();
146
    let greeting = "";
147

148
    if (hour < 12) {
149
      greeting = "Good Morning";
150
    } else if (hour < 18) {
151
      greeting = "Good Afternoon";
152
    } else {
153
      greeting = "Good Evening";
154
    }
155

156
    // Update greeting with smooth transition
157
    setTimeout(() => {
158
      greetingElement.textContent = `${greeting}! Welcome to My Personal Homepage!`;
159
    }, 1000);
160
  }
161

162
  // Keyboard shortcuts
163
  document.addEventListener("keydown", function (e) {
164
    // Press 'H' to go home
165
    if (e.key === "h" || e.key === "H") {
166
      window.location.href = "index.html";
167
    }
168
    // Press 'A' for about
169
    if (e.key === "a" || e.key === "A") {
170
      window.location.href = "about.html";
171
    }
172
    // Press 'C' for contact
173
    if (e.key === "c" || e.key === "C") {
174
      window.location.href = "contact.html";
175
    }
176
  });
177

178
  // Session storage for user preferences
179
  if (typeof Storage !== "undefined") {
180
    // Store visit count
181
    let visitCount = sessionStorage.getItem("visitCount") || 0;
182
    visitCount++;
183
    sessionStorage.setItem("visitCount", visitCount);
184

185
    // Show welcome back message for returning visitors
186
    if (visitCount > 1) {
187
      setTimeout(() => {
188
        showNotification(
189
          `Welcome back! This is your visit #${visitCount}`,
190
          "info"
191
        );
192
      }, 2000);
193
    }
194
  }
195

196
  // Console message for developers
197
  console.log(
198
    "%c👋 Hello Developer!",
199
    "color: #667eea; font-size: 20px; font-weight: bold;"
200
  );
201
  console.log(
202
    "%cThis site was built with HTML, CSS, Bootstrap, and JavaScript for CS50 assignment.",
203
    "color: #333; font-size: 14px;"
204
  );
205
});
206

207
// Helper Functions
208

209
function showNotification(message, type = "info") {
210
  // Create notification element
211
  const notification = document.createElement("div");
212
  notification.className = `alert alert-${type} position-fixed`;
213
  notification.style.cssText = `
214
        top: 20px;
215
        right: 20px;
216
        z-index: 1000;
217
        min-width: 300px;
218
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
219
    `;
220
  notification.textContent = message;
221

222
  document.body.appendChild(notification);
223

224
  // Auto remove after 3 seconds
225
  setTimeout(() => {
226
    notification.remove();
227
  }, 3000);
228
}
229

230
function showLoadingState(form) {
231
  const submitBtn = form.querySelector('button[type="submit"]');
232
  const originalText = submitBtn.textContent;
233

234
  submitBtn.innerHTML = '<span class="loading-spinner"></span> Sending...';
235
  submitBtn.disabled = true;
236

237
  // Store original text for later restoration
238
  submitBtn.dataset.originalText = originalText;
239
}
240

241
function hideLoadingState(form) {
242
  const submitBtn = form.querySelector('button[type="submit"]');
243
  submitBtn.textContent = submitBtn.dataset.originalText || "Send Message";
244
  submitBtn.disabled = false;
245
}
246

247
// Handle page visibility changes
248
document.addEventListener("visibilitychange", function () {
249
  if (!document.hidden) {
250
    // Page became visible
251
    document.title = "Welcome Back! - My Homepage";
252
  } else {
253
    // Page hidden
254
    document.title = "Come Back Soon! - My Homepage";
255
  }
256
});

1
HTML Tags Used (10+ distinct tags):
2
1. <!DOCTYPE> - Defines the document type
3
2. <html> - Root element of the HTML document
4
3. <head> - Contains meta information and links
5
4. <meta> - Provides metadata about the HTML document
6
5. <title> - Sets the title of the webpage
7
6. <link> - Links external resources like CSS and Bootstrap
8
7. <script> - Includes JavaScript files
9
8. <body> - Contains the visible page content
10
9. <nav> - Navigation section with Bootstrap navbar
11
10. <header> - Introductory content or navigation aids
12
11. <main> - Main content area of the document
13
12. <section> - Generic section of content
14
13. <article> - Independent, self-contained content
15
14. <div> - Generic container for flow content
16
15. <span> - Inline container for phrasing content
17
16. <p> - Paragraph element
18
17. <h1>, <h2>, <h3>, <h4>, <h5> - Heading elements
19
18. <ul>, <ol> - Unordered and ordered lists
20
19. <li> - List items
21
20. <a> - Anchor element for hyperlinks
22
21. <img> - Image element
23
22. <button> - Clickable button
24
23. <form> - Form for user input
25
24. <input> - Input field
26
25. <textarea> - Multi-line text input
27
26. <select> - Drop-down list
28
27. <option> - Options in a drop-down list
29
28. <label> - Label for form elements
30
29. <footer> - Footer section of the document
31

32
CSS Properties Used (5+ distinct properties):
33
1. font-family - Sets the font family for text
34
2. background - Sets background colors and gradients
35
3. color - Sets text color
36
4. margin - Sets margins around elements
37
5. padding - Sets padding inside elements
38
6. border-radius - Rounds corners of elements
39
7. box-shadow - Adds shadow effects to elements
40
8. transition - Animates property changes
41
9. transform - Applies 2D/3D transformations
42
10. display - Specifies display behavior of elements
43
11. position - Specifies positioning method
44
12. z-index - Controls stacking order of elements
45
13. width - Sets element width
46
14. height - Sets element height
47
15. text-shadow - Adds shadow to text
48

49
JavaScript Features Used:
50
I integrated multiple JavaScript features to make the site interactive:
51
1. DOM manipulation - Dynamically changing page content and styles
52
2. Event listeners - Handling user interactions like clicks and form submissions
53
3. Alert dialogs - Showing popup notifications and welcome messages
54
4. Dynamic content generation - Creating elements and updating text content
55
5. Form validation - Checking user input before submission
56
6. Animation effects - Adding CSS classes for smooth transitions
57
7. Local storage - Storing visitor count using session storage
58
8. Intersection Observer API - Creating fade-in effects for elements
59
9. Keyboard event handling - Adding keyboard shortcuts (H, A, C keys)
60
10. Page visibility API - Changing page title based on tab visibility
61
11. Timed functions - Using setTimeout for delayed actions and auto-hiding elements
62
12. Console logging - Providing developer information in browser console
63

64
Bootstrap Integration:
65
I incorporated Bootstrap 5.3.8 throughout the site for responsive design:
66
1. Grid system - Using container, row, and col classes for responsive layouts
67
2. Components - Navbar, cards, buttons, forms, accordions, progress bars
68
3. Utilities - Spacing, colors, shadows, and responsive utilities
69
4. JavaScript plugins - Modal, tooltip, and collapse functionality
70
5. Responsive breakpoints - Automatic adaptation to different screen sizes
71

72
Responsive Design:
73
The site is fully responsive and works well on:
74
- Mobile devices (phones)
75
- Tablets
76
- Laptops/desktops
77
- Various screen sizes and orientations

1
/* Body style */
2
body {
3
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
4
  line-height: 1.6;
5
  color: #333;
6
}
7

8
/* Navigation bar style */
9
.navbar-brand {
10
  font-weight: bold;
11
  font-size: 1.5rem;
12
}
13

14
.nav-link:hover {
15
  transform: translateY(-2px);
16
  transition: transform 0.3s ease;
17
}
18

19
/* Header/Hero Section Styling */
20
header {
21
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22
  color: white;
23
}
24

25
header h1 {
26
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
27
}
28

29
/* Card Hover Effects */
30
.card {
31
  transition:
32
    transform 0.3s ease,
33
    box-shadow 0.3s ease;
34
}
35

36
.card:hover {
37
  transform: translateY(-5px);
38
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
39
}
40

41
/* Button Animations */
42
.btn {
43
  transition: all 0.3s ease;
44
}
45

46
.btn:hover {
47
  transform: scale(1.05);
48
}
49

50
/* Progress Bar Customization */
51
.progress {
52
  height: 10px;
53
  border-radius: 5px;
54
}
55

56
.progress-bar {
57
  transition: width 1s ease-in-out;
58
}
59

60
/* Form Styling */
61
.form-control:focus {
62
  border-color: #667eea;
63
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
64
}
65

66
/* Accordion Customization */
67
.accordion-button:not(.collapsed) {
68
  background-color: #e7f1ff;
69
  color: #0c63e4;
70
}
71

72
/* Footer Styling */
73
footer {
74
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
75
}
76

77
/* Responsive Typography */
78
@media (max-width: 768px) {
79
  .display-4 {
80
    font-size: 2.5rem;
81
  }
82

83
  .lead {
84
    font-size: 1.1rem;
85
  }
86
}
87

88
/* Mobile-Specific Adjustments */
89
@media (max-width: 576px) {
90
  .navbar-brand {
91
    font-size: 1.2rem;
92
  }
93

94
  .card {
95
    margin-bottom: 1rem;
96
  }
97

98
  .btn {
99
    width: 100%;
100
    margin-bottom: 0.5rem;
101
  }
102
}
103

104
/* Animation Classes */
105
.fade-in {
106
  opacity: 0;
107
  transform: translateY(20px);
108
  animation: fadeInUp 0.6s ease forwards;
109
}
110

111
@keyframes fadeInUp {
112
  to {
113
    opacity: 1;
114
    transform: translateY(0);
115
  }
116
}
117

118
.pulse {
119
  animation: pulse 2s infinite;
120
}
121

122
@keyframes pulse {
123
  0% {
124
    transform: scale(1);
125
  }
126

127
  50% {
128
    transform: scale(1.05);
129
  }
130

131
  100% {
132
    transform: scale(1);
133
  }
134
}
135

136
/* Custom Utility Classes */
137
.text-shadow {
138
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
139
}
140

141
.bg-gradient-custom {
142
  background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
143
}
144

145
.border-radius-lg {
146
  border-radius: 15px;
147
}
148

149
.shadow-soft {
150
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
151
}
152

153
/* Interactive Elements */
154
.interactive-element {
155
  cursor: pointer;
156
  user-select: none;
157
}
158

159
.interactive-element:hover {
160
  background-color: rgba(0, 0, 0, 0.05);
161
}
162

163
/* Loading Spinner */
164
.loading-spinner {
165
  display: inline-block;
166
  width: 20px;
167
  height: 20px;
168
  border: 3px solid #f3f3f3;
169
  border-top: 3px solid #667eea;
170
  border-radius: 50%;
171
  animation: spin 1s linear infinite;
172
}
173

174
@keyframes spin {
175
  0% {
176
    transform: rotate(0deg);
177
  }
178

179
  100% {
180
    transform: rotate(360deg);
181
  }
182
}
183

184
/* Alert Customization */
185
.alert-success {
186
  background-color: #d4edda;
187
  border-color: #c3e6cb;
188
  color: #155724;
189
}
190

191
.alert-warning {
192
  background-color: #fff3cd;
193
  border-color: #ffeaa7;
194
  color: #856404;
195
}
196

197
/* List Group Customization */
198
.list-group-item:hover {
199
  background-color: #f8f9fa;
200
  transition: background-color 0.2s ease;
201
}
202

203
/* Scroll Behavior */
204
html {
205
  scroll-behavior: smooth;
206
}
207

208
/* Focus Styles for Accessibility */
209
.btn:focus,
210
.form-control:focus,
211
.nav-link:focus {
212
  outline: 2px solid #667eea;
213
  outline-offset: 2px;
214
}

CS50 Problem Set 8#

Problem 1: Trivia#

Problem 2: Homepage#

Problem 1: Trivia #

Problem 2: Homepage #