<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <author>
    <name>King Hua</name>
  </author>
  <generator uri="https://hexo.io/">Hexo</generator>
  <id>http://kinghua0629.com/</id>
  <link href="http://kinghua0629.com/" rel="alternate"/>
  <link href="http://kinghua0629.com/atom.xml" rel="self"/>
  <rights>All rights reserved 2026, King Hua</rights>
  <title>King's Blog</title>
  <updated>2026-04-11T06:09:13.466Z</updated>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="University Application" scheme="http://kinghua0629.com/categories/University-Application/"/>
    <category term="Application" scheme="http://kinghua0629.com/tags/Application/"/>
    <content>
      <![CDATA[<p>两个录的都是未定专业，目前最想转到cs，ce和ee也可以接受</p><p><strong>马里兰</strong>：</p><p>主要是internal+external transfer 到cs major每年只有100个名额，不知道进去的难度大不大？除了在gpa上的硬背景要求以外，还要很多软背景实力，如科研项目和经历？实在不好说光靠强gpa就搞定。但转不进去也可以考虑去工院，这个应该会容易些。</p><p><strong>威斯康星麦迪逊</strong>：</p><p>根据招生办的说法，只要满足要求就可以declarecs专业（不知道是不是真的，反正邮件里是这样说的），但据说wisc压gpa压得很厉害。因为我后面还要申请研究生，所以不知道课程难度如何？</p><p>欢迎学长学姐来讨论！</p>]]>
    </content>
    <id>http://kinghua0629.com/2026/04/03/%E9%80%89%E6%A0%A1%E6%B1%82%E5%8A%A9/</id>
    <link href="http://kinghua0629.com/2026/04/03/%E9%80%89%E6%A0%A1%E6%B1%82%E5%8A%A9/"/>
    <published>2026-04-03T13:39:29.000Z</published>
    <summary>
      <![CDATA[<p>两个录的都是未定专业，目前最想转到cs，ce和ee也可以接受</p>
<p><strong>马里兰</strong>：</p>
<p>主要是internal+external transfer 到cs major
每年只有100个名额，不知道进去的难度大不大？除了在gpa上]]>
    </summary>
    <title>选校求助：威斯康星麦迪逊vs马里兰？</title>
    <updated>2026-04-11T06:09:13.466Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="University Application" scheme="http://kinghua0629.com/categories/University-Application/"/>
    <category term="Application" scheme="http://kinghua0629.com/tags/Application/"/>
    <content>
      <![CDATA[<p>我在这里总结一下我的美本申请之旅。</p><h2 id="起因">起因</h2><p>作为一个体制内的普高生，在有了高考成绩并拿到了上海某头部211的录取通知书后，很多人一定会有一个疑问：<strong><em>你不是已经拿到offer了吗？为啥还要走美本？</em></strong></p><p>确实，这个问题我身边的很多人都不太理解。毕竟在许多人的眼里，走国外路线的，要么是中考就去国际学校的，要么是高考考的太差，甚至要上不了大学的。我一开始也是想现在国内读完本科，再去美国读个硕士。然而，真正让我下定决心走美本这条路的原因是：</p><p><strong>我最想去的上海张江附近的某大学的分数线（加上面试分594），和我的分数（加上面试分590）就差了4分！！！🤬🤬🤬</strong></p><p>（听我说谢谢你，因为有你…）</p><p>By the way,几个月后，我又想了一下，幸好当时没进那两所学校。中国大学压GPA的传统算是断绝了我之后申请美硕的希望了（卷不过那帮卷王😂）。还有那惨不忍睹的宿舍环境，简直就是💩，甚至不如我的高中宿舍。（我就不在这里放图片了，网上随处可见）</p><p>言归正传，我爸妈其实也支持我去美国读书，也愿意给我提供资金的支持。我也感谢他们能给我这个机会去挑战一下自己，让我开拓自己的视野。</p><p>于是，在8月收到录取通知书后，我就开始准备美本申请的材料来。</p><h2 id="准备过程">准备过程</h2><p>对于一个高考生来说，美本申请的过程及其复杂且timeline非常紧张。而且据我所知，大部分国际学校的同学都是提前一年就开始准备了。托福，SAT，文书，等等，对一个从普高体系里出来的，平时上英语课都大量使用中文的情况下，难度可想而知。从我8月找到中介开始，到11月初大部分学校的ED/EA的截止日期为止，大概也就3～4个月的时间。从中文体系切换到英语体系，每天都要泡在英语里，那个时候压力确实挺大的。</p><h3 id="托福">1. 托福</h3><p>托福其实是我最早开始准备的。其实我在25年1月份就开始上外面的托福班了。和一帮子国际学校的相比，我的英语，特别是口语，还是太烂了😂。但3月的首次考试还算不错，<strong>Reading27, Listening 25, Speaking 22, Writing 26, Total 100</strong>。 <figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260328230638355.webp" alt="我的第一次托福成绩"><figcaption>我的第一次托福成绩</figcaption></figure></p><p>然后第二次考托福就要到9月了。那个时候我又要准备SAT，又要准备托福，还要写文书，真是累死了。</p><p>但这还不是重点。从第二次考试开始，100分就成了一道永远都跨不过去的坎。第二次：<strong>Reading26, Listening 24, Speaking 22, Writing 28, Total100</strong>。毕竟这只是我重新捡起托福后的第一场考试（整个高三第二学期就没碰托福，要备战高考），我个人认为还OK。<figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260328230805027.webp" alt="我的第二次托福成绩"><figcaption>我的第二次托福成绩</figcaption></figure></p><p>一周后，我就来到了第三次考试。这场考试估计是我最不想回忆的一场考试了。<strong>Reading26, Listening 27, Speaking 22, Writing 24, Total99</strong>。（搞了这么久，居然还少了一分！！！还有作文是怎么到24的？？？😤）<figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260328231405149.webp" alt="我的第三次托福成绩"><figcaption>我的第三次托福成绩</figcaption></figure></p><p>我一开始以为已经没希望上105了，因为后面还剩一场托福可以出分，否则就要到提交申请的deadline了。抱着拼一拼单车变摩托的心态，我去考了第四场。</p><p>这一场是我考的最好的一次。<strong>Reading 30, Listening 28, Speaking23, Writing 28, Total109</strong>（终于阅读和听力都拿高分了！🎉🎉🎉）终于可以安心搞申请的事情了。<figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260328231525862.webp" alt="我的第四次托福成绩"><figcaption>我的第四次托福成绩</figcaption></figure></p><h3 id="sat">2. SAT</h3><p>众所周知，SAT分为文法和数学两部分。数学对于我来说就是小儿科，根本没太在意。而文法部分，语法其实没太大问题，毕竟体制内英语最强的就是语法。在老师教的做题技巧下，还是能很快过的。但到了阅读部分，文章和选项里一堆平时根本见不到的单词，让我题目根本没法做😵‍💫。在背了不少单词后，也是迷迷糊糊的就上考场了。</p><p>相比托福，SAT的考试经历还是相对波澜不惊的。我的第一场考试就那了个<strong>RW660+MATH800TOTAL1460</strong>的成绩。第二次就拿到了<strong>RW710+MATH800TOTAL1510</strong>。老师们都觉得很奇怪，一个普高生能这么快拿到SAT1500+。（但是我以后永远也不想考SAT了，中间的travelling太折磨人了😩）</p><h3 id="文书-activity-list">3. 文书 &amp; Activity List</h3><p>文书，作为申请国外大学的特色项目，我是完全不会写。看到CommonApp的主文书&amp;一堆学校的小文书，以及UC的那4个题目的时候，就是两眼一抹黑，啥也不会。但不会写其实不是最难的地方。最难的反而是没有东西可以写进文书。（众所周知，我们体制内学生没有那么多的活动，志愿服务和实习的经历，更不可能发论文）</p><p>先从Common App的主文书开始说起吧。我选的题目是<strong>The lessons wetake from obstacles we encounter can be fundamental to later success.Recount a time when you faced a challenge, setback, or failure. How didit affect you, and what did you learn from theexperience?</strong>这个题目的内容，我跟写文书的老师讨论了好久，才从活动匮乏的高中三年扒出一些还可以写一写的东西。</p><p>各个学校的Why school? Whymajor?之类的题目，我就不在这里详细的说了。</p><p>ActivityList也是如此，搞了一堆有的没的的活动，拼拼凑凑搞出了一份。</p><h3 id="gpa">4. GPA</h3><p>GPA其实是最难搞的一部分。众所周知，体制内学校压分严重已经是常态了。就拿数学和语文来说，每次班级的均分都是在及格线附近左右横跳。而且学校也不能把分数转化为等第，毕竟教育部没有同一的规定，学校也不敢乱写。这就导致了一个问题：我们最好的人的GPA大概也只有3.7左右，而美国大学，特别是UC系统，基本上只要3.8+，甚至是4.0的人。这。。。</p><p>算了，不说了。先去美国，等之后有转学的机会再说吧。</p><h2 id="申请timeline">申请Timeline</h2><p>在这里记录一下我的申请的Timeline。我申请的CS相关的专业，像CS，CE，ECE等，或者就是Undeclared</p><h3 id="ed">ED</h3><ol type="1"><li>University of Michigan-Ann Arbor密歇根大学安娜堡分校（梦校）<strong>defer</strong>还好吧，本来就在意料之中，等等后面的EA。</li></ol><h3 id="ea">EA</h3><p>好了，这里事情就开始有意思了。 1. University of Texas-Austin德州大学奥斯汀分校 <strong>defer</strong>正常，德州的都不一定进得去，更何况大陆籍的学生呢。 2. Georgia Instituteof Technology 佐治亚理工学院 <strong>拒</strong> 3. University ofIllinois-Urbana-Champaign 伊利诺伊大学香槟分校（梦校）<strong>拒</strong> 4. University of Wisconsin-Madison威斯康辛大学麦迪逊分校 <strong>defer</strong> 5. Rutgers, StateUniversity of New Jersey-New Brunswick新泽西州立大学罗格斯分校新布朗斯维克分校 <strong>录取</strong> <figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260329114550306.webp" alt="这是我收到的第一个offer"><figcaption>这是我收到的第一个offer</figcaption></figure> 6. Ohio State University-Columbus俄亥俄州立大学 <strong>录取</strong> <figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260329114914768.webp" alt="不错，还给了一个CS！"><figcaption>不错，还给了一个CS！</figcaption></figure> 7. University of Maryland-College Park马里兰大学帕克分校 <strong>录取</strong> <figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260329115134434.webp" alt="这应该是我目前最想去的学校了"><figcaption>这应该是我目前最想去的学校了</figcaption></figure> 8. Purdue University-WestLafayette 普渡大学（梦校）<strong>拒</strong> 9. Northeastern University东北大学 <strong>defer</strong> 10. Pennsylvania StateUniversity-University Park 宾州州立大学帕克分校 <strong>录取</strong><figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260329115410123.webp" alt="不错，也是CS！"><figcaption>不错，也是CS！</figcaption></figure></p><h3 id="rd">RD</h3><ol type="1"><li>University of Texas-Austin 德州大学奥斯汀分校<strong>拒</strong></li><li>University of Wisconsin-Madison 威斯康辛大学麦迪逊分校<strong>录取</strong> <figure class="image-caption"><img lazyload="" src="/images/loading.svg" data-src="https://cdn.jsdelivr.net/gh/kinghua0629/kinghua0629-blog-img/20260329115650083.webp" alt="还可以，态度不错"><figcaption>还可以，态度不错</figcaption></figure></li><li>Northeastern University 东北大学 <strong>defer</strong></li><li>University of California - Berkeley 加州大学伯克利分校<strong>拒</strong></li><li>University of California - Los Angeles 加州大学洛杉矶分校<strong>拒</strong></li><li>University of California - San Diego 加州大学圣地亚哥分校<strong>拒</strong></li><li>University of California - Irvine 加州大学尔湾分校<strong>拒</strong></li><li>University of California - Davis 加州大学戴维斯分校<strong>拒</strong></li><li>University of California - Santa Barbara加州大学圣巴巴拉分校<strong>拒</strong></li></ol><p><em>没办法，GPA给的太低了，估计第一波就被当成炮灰了</em></p>]]>
    </content>
    <id>http://kinghua0629.com/2026/04/01/%E6%88%91%E7%9A%84%E7%BE%8E%E6%9C%AC%E7%94%B3%E8%AF%B7/</id>
    <link href="http://kinghua0629.com/2026/04/01/%E6%88%91%E7%9A%84%E7%BE%8E%E6%9C%AC%E7%94%B3%E8%AF%B7/"/>
    <published>2026-04-01T04:30:29.000Z</published>
    <summary>
      <![CDATA[<p>我在这里总结一下我的美本申请之旅。</p>
<h2 id="起因">起因</h2>
<p>作为一个体制内的普高生，在有了高考成绩并拿到了上海某头部211的录取通知书后，很多人一定会有一个疑问：<strong><em>你不是已经拿到offer了吗？为啥还要走美本？</em><]]>
    </summary>
    <title>我的美本申请</title>
    <updated>2026-04-11T06:09:13.466Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-final-project">CS50 Final Project</h1><p>This is the video of my CS50 final project.</p><h2 id="youtube">YouTube</h2><iframe width="560" height="315" src="https://www.youtube.com/embed/tzwww0bJy3c?si=rhqI5xAUwnntphIj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe><h2 id="bilibili">Bilibili</h2><iframe src="//player.bilibili.com/player.html?isOutside=true&amp;aid=116164873161767&amp;bvid=BV1bvAoziEq1&amp;cid=36423732752&amp;p=1" scrolling="false" border="0" frameborder="false" framespacing="0" allowfullscreen="true" width="800px" height="450px"></iframe>]]>
    </content>
    <id>http://kinghua0629.com/2026/03/22/CS50-Final-Project/</id>
    <link href="http://kinghua0629.com/2026/03/22/CS50-Final-Project/"/>
    <published>2026-03-22T13:01:04.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-final-project">CS50 Final Project</h1>
<p>This is the video of my CS50 final project.</p>
<h2 id="youtube">YouTube</h2>
<iframe]]>
    </summary>
    <title>CS50 Final Project</title>
    <updated>2026-04-11T06:09:13.464Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-9">CS50 Problem Set 9</h1><p>Here’s my answers for the CS50 Problem Set 9. Hope that will help youa bit.</p><h2 id="problem-1-birthdays">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/2026/psets/9/birthdays/#birthdays">Birthdays<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><p><strong>index.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&amp;display=swap"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"/static/styles.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Birthdays<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Birthdays<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Add a Birthday<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- <span class="doctag">TODO:</span> Create a form for users to submit a name, a month, and a day --&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- With {action="/" method ="post"}, the form can send data back to the server, and meet the requirement {request.method == "POST"} in app.py--&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"name"</span> <span class="attr">placeholder</span>=<span class="string">"Name"</span> <span class="attr">autofocus</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">min</span>=<span class="string">"1"</span> <span class="attr">max</span>=<span class="string">"12"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"month"</span> <span class="attr">placeholder</span>=<span class="string">"Month"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">min</span>=<span class="string">"1"</span> <span class="attr">max</span>=<span class="string">"31"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"day"</span> <span class="attr">placeholder</span>=<span class="string">"Day"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">type</span>=<span class="string">"number"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"Add Birthday"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="tag">&lt;<span class="name">h2</span>&gt;</span>All Birthdays<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">th</span>&gt;</span>Name<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">th</span>&gt;</span>Birthday<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">                        <span class="comment">&lt;!-- <span class="doctag">TODO:</span> Loop through the database entries to display them in this table --&gt;</span></span><br><span class="line">                        {% for birthday in birthdays %}</span><br><span class="line">                            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ birthday["name"] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ birthday["month"] }}/{{ birthday["day"] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">                        {% endfor %}</span><br><span class="line">                    <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div> <strong>app.py</strong><div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> os</span><br><span class="line"></span><br><span class="line"><span class="keyword">from</span> cs50 <span class="keyword">import</span> SQL</span><br><span class="line"><span class="keyword">from</span> flask <span class="keyword">import</span> Flask, flash, jsonify, redirect, render_template, request, session</span><br><span class="line"></span><br><span class="line"><span class="comment"># Configure application</span></span><br><span class="line">app = Flask(__name__)</span><br><span class="line"></span><br><span class="line"><span class="comment"># Ensure templates are auto-reloaded</span></span><br><span class="line">app.config[<span class="string">"TEMPLATES_AUTO_RELOAD"</span>] = <span class="literal">True</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Configure CS50 Library to use SQLite database</span></span><br><span class="line">db = SQL(<span class="string">"sqlite:///birthdays.db"</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.after_request</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">after_request</span>(<span class="params">response</span>):</span><br><span class="line">    <span class="string">"""Ensure responses aren't cached"""</span></span><br><span class="line">    response.headers[<span class="string">"Cache-Control"</span>] = <span class="string">"no-cache, no-store, must-revalidate"</span></span><br><span class="line">    response.headers[<span class="string">"Expires"</span>] = <span class="number">0</span></span><br><span class="line">    response.headers[<span class="string">"Pragma"</span>] = <span class="string">"no-cache"</span></span><br><span class="line">    <span class="keyword">return</span> response</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/"</span>, methods=[<span class="string">"GET"</span>, <span class="string">"POST"</span>]</span>)</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">index</span>():</span><br><span class="line">    <span class="keyword">if</span> request.method == <span class="string">"POST"</span>:</span><br><span class="line"></span><br><span class="line">        <span class="comment"># <span class="doctag">TODO:</span> Add the user's entry into the database</span></span><br><span class="line">        name = request.form.get(<span class="string">"name"</span>)</span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> name:</span><br><span class="line">            <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br><span class="line"></span><br><span class="line">        month = request.form.get(<span class="string">"month"</span>)</span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> month:</span><br><span class="line">            <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br><span class="line"></span><br><span class="line">        day = request.form.get(<span class="string">"day"</span>)</span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> day:</span><br><span class="line">            <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br><span class="line"></span><br><span class="line">        db.execute(<span class="string">"INSERT INTO birthdays (name, month, day) VALUES(?, ?, ?)"</span>, name, month, day)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line"></span><br><span class="line">        <span class="comment"># <span class="doctag">TODO:</span> Display the entries in the database on index.html</span></span><br><span class="line">        birthdays = db.execute(<span class="string">"SELECT * FROM birthdays"</span>)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> render_template(<span class="string">"index.html"</span>, birthdays=birthdays)</span><br></pre></td></tr></table></figure></div></p><h2 id="problem-2-finance">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/9/finance/#c50-finance">Finance<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><p><strong>app.py</strong> <div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> os</span><br><span class="line"></span><br><span class="line"><span class="keyword">from</span> cs50 <span class="keyword">import</span> SQL</span><br><span class="line"><span class="keyword">from</span> flask <span class="keyword">import</span> Flask, flash, redirect, render_template, request, session</span><br><span class="line"><span class="keyword">from</span> flask_session <span class="keyword">import</span> Session</span><br><span class="line"><span class="keyword">from</span> werkzeug.security <span class="keyword">import</span> check_password_hash, generate_password_hash</span><br><span class="line"></span><br><span class="line"><span class="keyword">from</span> helpers <span class="keyword">import</span> apology, login_required, lookup, usd</span><br><span class="line"></span><br><span class="line"><span class="comment"># Configure application</span></span><br><span class="line">app = Flask(__name__)</span><br><span class="line"></span><br><span class="line"><span class="comment"># Custom filter</span></span><br><span class="line">app.jinja_env.filters[<span class="string">"usd"</span>] = usd</span><br><span class="line"></span><br><span class="line"><span class="comment"># Configure session to use filesystem (instead of signed cookies)</span></span><br><span class="line">app.config[<span class="string">"SESSION_PERMANENT"</span>] = <span class="literal">False</span></span><br><span class="line">app.config[<span class="string">"SESSION_TYPE"</span>] = <span class="string">"filesystem"</span></span><br><span class="line">Session(app)</span><br><span class="line"></span><br><span class="line"><span class="comment"># Configure CS50 Library to use SQLite database</span></span><br><span class="line">db = SQL(<span class="string">"sqlite:///finance.db"</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.after_request</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">after_request</span>(<span class="params">response</span>):</span><br><span class="line">    <span class="string">"""Ensure responses aren't cached"""</span></span><br><span class="line">    response.headers[<span class="string">"Cache-Control"</span>] = <span class="string">"no-cache, no-store, must-revalidate"</span></span><br><span class="line">    response.headers[<span class="string">"Expires"</span>] = <span class="number">0</span></span><br><span class="line">    response.headers[<span class="string">"Pragma"</span>] = <span class="string">"no-cache"</span></span><br><span class="line">    <span class="keyword">return</span> response</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/"</span></span>)</span></span><br><span class="line"><span class="meta">@login_required</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">index</span>():</span><br><span class="line">    <span class="string">"""Show portfolio of stocks"""</span></span><br><span class="line">    <span class="comment"># select user's portfolio and cash</span></span><br><span class="line">    rows = db.execute(<span class="string">"SELECT * FROM portfolio WHERE userid = ?"</span>, session[<span class="string">"user_id"</span>])</span><br><span class="line">    cash_result = db.execute(<span class="string">"SELECT cash FROM users WHERE id = ?"</span>, session[<span class="string">"user_id"</span>])</span><br><span class="line"></span><br><span class="line">    <span class="comment"># get cash value</span></span><br><span class="line">    cash = cash_result[<span class="number">0</span>][<span class="string">'cash'</span>]</span><br><span class="line"></span><br><span class="line">    <span class="comment"># intilize sum = cash</span></span><br><span class="line">    <span class="built_in">sum</span> = cash</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> row <span class="keyword">in</span> rows:</span><br><span class="line">        stock_info = lookup(row[<span class="string">'symbol'</span>])</span><br><span class="line">        <span class="keyword">if</span> stock_info <span class="keyword">is</span> <span class="literal">None</span>:</span><br><span class="line">            <span class="keyword">continue</span>  <span class="comment"># Skip if stock info not available</span></span><br><span class="line">        row[<span class="string">'name'</span>] = stock_info[<span class="string">'name'</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Ensure price is numeric before calculations (handles string prices from API)</span></span><br><span class="line">        <span class="keyword">try</span>:</span><br><span class="line">            price_numeric = <span class="built_in">float</span>(stock_info[<span class="string">'price'</span>])</span><br><span class="line">        <span class="keyword">except</span> (ValueError, TypeError):</span><br><span class="line">            <span class="keyword">continue</span>  <span class="comment"># Skip if price is not a valid number</span></span><br><span class="line"></span><br><span class="line">        row[<span class="string">'price'</span>] = price_numeric</span><br><span class="line">        row[<span class="string">'total'</span>] = price_numeric * row[<span class="string">'shares'</span>]</span><br><span class="line">        <span class="built_in">sum</span> = <span class="built_in">sum</span> + row[<span class="string">'total'</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Format price and total as USD for display (don't modify original numeric values)</span></span><br><span class="line">        row[<span class="string">'price_usd'</span>] = usd(price_numeric)</span><br><span class="line">        row[<span class="string">'total_usd'</span>] = usd(row[<span class="string">'total'</span>])</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> render_template(<span class="string">"index.html"</span>, rows=rows, cash=usd(cash), <span class="built_in">sum</span>=usd(<span class="built_in">sum</span>))</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/buy"</span>, methods=[<span class="string">"GET"</span>, <span class="string">"POST"</span>]</span>)</span></span><br><span class="line"><span class="meta">@login_required</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">buy</span>():</span><br><span class="line">    <span class="string">"""Buy shares of stock"""</span></span><br><span class="line">    <span class="comment"># if the method is GET, display buy.html to the user</span></span><br><span class="line">    <span class="keyword">if</span> request.method == <span class="string">"GET"</span>:</span><br><span class="line">        <span class="keyword">return</span> render_template(<span class="string">"buy.html"</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment"># if the method is POST</span></span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        symbol = request.form.get(<span class="string">"symbol"</span>)</span><br><span class="line">        shares = request.form.get(<span class="string">"shares"</span>)</span><br><span class="line">        quote = lookup(symbol)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> symbol:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Please provide a stock symbol!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> shares:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Please provide number of shares!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> quote == <span class="literal">None</span>:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Invalid stock symbol!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># validate shares: must be a positive integer</span></span><br><span class="line">        <span class="keyword">try</span>:</span><br><span class="line">            shares = <span class="built_in">float</span>(shares)</span><br><span class="line">            <span class="keyword">if</span> shares != <span class="built_in">int</span>(shares):</span><br><span class="line">                <span class="keyword">return</span> apology(<span class="string">"Shares must be a whole number (no fractions)!"</span>, <span class="number">400</span>)</span><br><span class="line">            shares = <span class="built_in">int</span>(shares)</span><br><span class="line">            <span class="keyword">if</span> shares &lt;= <span class="number">0</span>:</span><br><span class="line">                <span class="keyword">return</span> apology(<span class="string">"Shares must be a positive number!"</span>, <span class="number">400</span>)</span><br><span class="line">        <span class="keyword">except</span> (ValueError, TypeError):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Shares must be a numeric value!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># calculate the purchase</span></span><br><span class="line">        symbol = symbol.upper()</span><br><span class="line">        <span class="comment"># Ensure quote['price'] is a number for calculations</span></span><br><span class="line">        <span class="keyword">try</span>:</span><br><span class="line">            price = <span class="built_in">float</span>(quote[<span class="string">'price'</span>])</span><br><span class="line">        <span class="keyword">except</span> (ValueError, TypeError):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Invalid stock price data!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        purchase = price * shares</span><br><span class="line"></span><br><span class="line">        <span class="comment"># get the balance</span></span><br><span class="line">        balance_result = db.execute(<span class="string">"SELECT cash FROM users WHERE id = ?"</span>, session[<span class="string">"user_id"</span>])</span><br><span class="line">        balance = balance_result[<span class="number">0</span>][<span class="string">'cash'</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># calculate the remainder</span></span><br><span class="line">        remainder = balance - purchase</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> remainder &lt; <span class="number">0</span>:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Insufficient money!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># update the database</span></span><br><span class="line">        db.execute(<span class="string">"UPDATE users SET cash = ? WHERE id = ?"</span>, remainder, session[<span class="string">"user_id"</span>])</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check if user already owns this stock</span></span><br><span class="line">        existing = db.execute(<span class="string">"SELECT shares FROM portfolio WHERE userid = ? AND symbol = ?"</span>,</span><br><span class="line">                              session[<span class="string">"user_id"</span>], symbol)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> existing:</span><br><span class="line">            <span class="comment"># update existing position</span></span><br><span class="line">            old_shares = existing[<span class="number">0</span>][<span class="string">'shares'</span>]</span><br><span class="line">            new_shares = old_shares + shares</span><br><span class="line">            db.execute(<span class="string">"UPDATE portfolio SET shares = ? WHERE userid = ? AND symbol = ?"</span>,</span><br><span class="line">                       new_shares, session[<span class="string">"user_id"</span>], symbol)</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            <span class="comment"># create new position</span></span><br><span class="line">            db.execute(<span class="string">"INSERT INTO portfolio (userid, symbol, shares) VALUES (?, ?, ?)"</span>,</span><br><span class="line">                       session[<span class="string">"user_id"</span>], symbol, shares)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># update history</span></span><br><span class="line">        db.execute(<span class="string">"INSERT INTO history (userid, symbol, shares, method, price) VALUES (?, ?, ?, ?, ?)"</span>,</span><br><span class="line">                   session[<span class="string">"user_id"</span>], symbol, shares, <span class="string">'Buy'</span>, price)</span><br><span class="line"></span><br><span class="line">        flash(<span class="string">f"Bought <span class="subst">{shares}</span> shares of <span class="subst">{symbol}</span> costing <span class="subst">{usd(purchase)}</span>"</span>)</span><br><span class="line">        <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/history"</span></span>)</span></span><br><span class="line"><span class="meta">@login_required</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">history</span>():</span><br><span class="line">    <span class="string">"""Show history of transactions"""</span></span><br><span class="line"></span><br><span class="line">    rows = db.execute(<span class="string">"SELECT * FROM history WHERE userid = ?"</span>, session[<span class="string">"user_id"</span>])</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> render_template(<span class="string">"history.html"</span>, rows=rows)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/login"</span>, methods=[<span class="string">"GET"</span>, <span class="string">"POST"</span>]</span>)</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">login</span>():</span><br><span class="line">    <span class="string">"""Log user in"""</span></span><br><span class="line"></span><br><span class="line">    <span class="comment"># Forget any user_id</span></span><br><span class="line">    session.clear()</span><br><span class="line"></span><br><span class="line">    <span class="comment"># User reached route via POST (as by submitting a form via POST)</span></span><br><span class="line">    <span class="keyword">if</span> request.method == <span class="string">"POST"</span>:</span><br><span class="line">        <span class="comment"># Ensure username was submitted</span></span><br><span class="line">        username = request.form.get(<span class="string">"username"</span>)</span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> username:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"must provide username"</span>, <span class="number">403</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Ensure password was submitted</span></span><br><span class="line">        password = request.form.get(<span class="string">"password"</span>)</span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> password:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"must provide password"</span>, <span class="number">403</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Query database for username</span></span><br><span class="line">        rows = db.execute(</span><br><span class="line">            <span class="string">"SELECT * FROM users WHERE username = ?"</span>, username</span><br><span class="line">        )</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Ensure username exists and password is correct</span></span><br><span class="line">        <span class="keyword">if</span> <span class="built_in">len</span>(rows) != <span class="number">1</span> <span class="keyword">or</span> <span class="keyword">not</span> check_password_hash(</span><br><span class="line">            rows[<span class="number">0</span>][<span class="string">"hash"</span>], password</span><br><span class="line">        ):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"invalid username and/or password"</span>, <span class="number">403</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Remember which user has logged in</span></span><br><span class="line">        session[<span class="string">"user_id"</span>] = rows[<span class="number">0</span>][<span class="string">"id"</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Redirect user to home page</span></span><br><span class="line">        <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment"># User reached route via GET (as by clicking a link or via redirect)</span></span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="keyword">return</span> render_template(<span class="string">"login.html"</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/logout"</span></span>)</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">logout</span>():</span><br><span class="line">    <span class="string">"""Log user out"""</span></span><br><span class="line"></span><br><span class="line">    <span class="comment"># Forget any user_id</span></span><br><span class="line">    session.clear()</span><br><span class="line"></span><br><span class="line">    <span class="comment"># Redirect user to login form</span></span><br><span class="line">    <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/quote"</span>, methods=[<span class="string">"GET"</span>, <span class="string">"POST"</span>]</span>)</span></span><br><span class="line"><span class="meta">@login_required</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">quote</span>():</span><br><span class="line">    <span class="string">"""Get stock quote."""</span></span><br><span class="line"></span><br><span class="line">    <span class="comment"># if GET received, send quote.html to the user</span></span><br><span class="line">    <span class="keyword">if</span> request.method == <span class="string">"GET"</span>:</span><br><span class="line">        <span class="keyword">return</span> render_template(<span class="string">"quote.html"</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line"></span><br><span class="line">        <span class="comment"># lookup in the database</span></span><br><span class="line">        symbol = lookup(request.form.get(<span class="string">"symbol"</span>))</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> symbol == <span class="literal">None</span>:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"invalid stock symbol"</span>, <span class="number">400</span>)</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            <span class="keyword">return</span> render_template(<span class="string">"quoted.html"</span>, symbol=symbol)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/register"</span>, methods=[<span class="string">"GET"</span>, <span class="string">"POST"</span>]</span>)</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">register</span>():</span><br><span class="line">    <span class="string">"""Register user"""</span></span><br><span class="line">    <span class="comment"># clear previous session</span></span><br><span class="line">    session.clear()</span><br><span class="line"></span><br><span class="line">    <span class="comment"># submit the register form</span></span><br><span class="line">    <span class="keyword">if</span> request.method == <span class="string">"POST"</span>:</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check whether the username exists</span></span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> request.form.get(<span class="string">"username"</span>):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Username is required!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check whether the password exists</span></span><br><span class="line">        <span class="keyword">elif</span> <span class="keyword">not</span> request.form.get(<span class="string">"password"</span>):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Password is required!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check whether the confirmation exists</span></span><br><span class="line">        <span class="keyword">elif</span> <span class="keyword">not</span> request.form.get(<span class="string">"confirmation"</span>):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Confirmation is required!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        password = request.form.get(<span class="string">"password"</span>)</span><br><span class="line">        confirmation = request.form.get(<span class="string">"confirmation"</span>)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> password <span class="keyword">or</span> <span class="keyword">not</span> confirmation:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Password fields cannot be empty!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check whether the password is the same as confirmation</span></span><br><span class="line">        <span class="keyword">if</span> password != confirmation:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Passwords do not match!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># save the username, and hash the password</span></span><br><span class="line">        username = request.form.get(<span class="string">"username"</span>)</span><br><span class="line">        <span class="built_in">hash</span> = generate_password_hash(password)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check if the username has been taken</span></span><br><span class="line">        rows = db.execute(<span class="string">"SELECT * FROM users WHERE username = ?"</span>, username)</span><br><span class="line">        <span class="keyword">if</span> <span class="built_in">len</span>(rows) != <span class="number">0</span>:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Username already exists!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># insert username and hash into database</span></span><br><span class="line">        db.execute(<span class="string">"INSERT INTO users (username, hash) VALUES (?, ?)"</span>, username, <span class="built_in">hash</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># create new session for the user</span></span><br><span class="line">        <span class="built_in">id</span> = db.execute(<span class="string">"SELECT id FROM users WHERE username = ?"</span>, username)</span><br><span class="line">        session[<span class="string">"user_id"</span>] = <span class="built_in">id</span>[<span class="number">0</span>][<span class="string">"id"</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># redirect to login page</span></span><br><span class="line">        <span class="keyword">return</span> redirect(<span class="string">"/login"</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="keyword">return</span> render_template(<span class="string">"register.html"</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@app.route(<span class="params"><span class="string">"/sell"</span>, methods=[<span class="string">"GET"</span>, <span class="string">"POST"</span>]</span>)</span></span><br><span class="line"><span class="meta">@login_required</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">sell</span>():</span><br><span class="line">    <span class="string">"""Sell shares of stock"""</span></span><br><span class="line"></span><br><span class="line">    <span class="comment"># if method=GET, send sell.html to the user</span></span><br><span class="line">    <span class="keyword">if</span> request.method == <span class="string">"GET"</span>:</span><br><span class="line">        <span class="comment"># get the user's current stock</span></span><br><span class="line">        portfolio = db.execute(<span class="string">"SELECT symbol FROM portfolio WHERE userid = ?"</span>, session[<span class="string">"user_id"</span>])</span><br><span class="line">        <span class="keyword">return</span> render_template(<span class="string">"sell.html"</span>, portfolio=portfolio)</span><br><span class="line"></span><br><span class="line">    <span class="comment"># if method=POST, sell stocks</span></span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="comment"># Save stock symbol, number of shares, and quote dict from form</span></span><br><span class="line">        symbol = request.form.get(<span class="string">"symbol"</span>)</span><br><span class="line">        shares = request.form.get(<span class="string">"shares"</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check for symbol</span></span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> symbol:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Must provide valid stock symbol!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        quote = lookup(symbol)</span><br><span class="line">        <span class="keyword">if</span> quote <span class="keyword">is</span> <span class="literal">None</span>:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Invalid stock symbol!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        rows = db.execute(<span class="string">"SELECT * FROM portfolio WHERE userid = ? AND symbol = ?"</span>,</span><br><span class="line">                          session[<span class="string">"user_id"</span>], symbol.upper())</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check for errors</span></span><br><span class="line">        <span class="keyword">if</span> <span class="built_in">len</span>(rows) != <span class="number">1</span>:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Must provide valid stock symbol!"</span>, <span class="number">400</span>)</span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">not</span> shares:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Must provide number of shares!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># validate shares: must be a positive integer</span></span><br><span class="line">        <span class="keyword">try</span>:</span><br><span class="line">            shares = <span class="built_in">float</span>(shares)</span><br><span class="line">            <span class="keyword">if</span> shares != <span class="built_in">int</span>(shares):</span><br><span class="line">                <span class="keyword">return</span> apology(<span class="string">"Shares must be a whole number (no fractions)!"</span>, <span class="number">400</span>)</span><br><span class="line">            shares = <span class="built_in">int</span>(shares)</span><br><span class="line">            <span class="keyword">if</span> shares &lt;= <span class="number">0</span>:</span><br><span class="line">                <span class="keyword">return</span> apology(<span class="string">"Shares must be a positive number!"</span>, <span class="number">400</span>)</span><br><span class="line">        <span class="keyword">except</span> (ValueError, TypeError):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Shares must be a numeric value!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># get the old shares</span></span><br><span class="line">        oldshares = rows[<span class="number">0</span>][<span class="string">'shares'</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># check for errors</span></span><br><span class="line">        <span class="keyword">if</span> shares &gt; oldshares:</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Shares sold can't exceed shares owned"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        <span class="comment"># calculate sold money</span></span><br><span class="line">        <span class="comment"># Ensure quote['price'] is a number for calculations</span></span><br><span class="line">        <span class="keyword">try</span>:</span><br><span class="line">            price = <span class="built_in">float</span>(quote[<span class="string">'price'</span>])</span><br><span class="line">        <span class="keyword">except</span> (ValueError, TypeError):</span><br><span class="line">            <span class="keyword">return</span> apology(<span class="string">"Invalid stock price data!"</span>, <span class="number">400</span>)</span><br><span class="line"></span><br><span class="line">        sold = price * shares</span><br><span class="line"></span><br><span class="line">        <span class="comment"># get the current cash of the user</span></span><br><span class="line">        cash_result = db.execute(<span class="string">"SELECT cash FROM users WHERE id = ?"</span>, session[<span class="string">"user_id"</span>])</span><br><span class="line">        cash = cash_result[<span class="number">0</span>][<span class="string">'cash'</span>]</span><br><span class="line"></span><br><span class="line">        <span class="comment"># calculate the new amount of cash</span></span><br><span class="line">        cash = cash + sold</span><br><span class="line"></span><br><span class="line">        <span class="comment"># update the database</span></span><br><span class="line">        db.execute(<span class="string">"UPDATE users SET cash = ? WHERE id = ?"</span>, cash, session[<span class="string">"user_id"</span>])</span><br><span class="line"></span><br><span class="line">        <span class="comment"># calcualte new shares</span></span><br><span class="line">        newshares = oldshares - shares</span><br><span class="line"></span><br><span class="line">        <span class="comment"># if there's shares remain, update portfolio</span></span><br><span class="line">        <span class="keyword">if</span> newshares &gt; <span class="number">0</span>:</span><br><span class="line">            db.execute(<span class="string">"UPDATE portfolio SET shares = ? WHERE userid = ? AND symbol = ?"</span>,</span><br><span class="line">                       newshares, session[<span class="string">"user_id"</span>], symbol)</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            db.execute(<span class="string">"DELETE FROM portfolio WHERE symbol = ? AND userid = ?"</span>,</span><br><span class="line">                       symbol, session[<span class="string">"user_id"</span>])</span><br><span class="line"></span><br><span class="line">        <span class="comment"># update history</span></span><br><span class="line">        db.execute(<span class="string">"INSERT INTO history (userid, symbol, shares, method, price) VALUES (?, ?, ?, ?, ?)"</span>,</span><br><span class="line">                   session[<span class="string">"user_id"</span>], symbol, shares, <span class="string">'Sell'</span>, price)</span><br><span class="line"></span><br><span class="line">        flash(<span class="string">f"Sold <span class="subst">{shares}</span> shares of <span class="subst">{symbol.upper()}</span> for <span class="subst">{usd(sold)}</span>"</span>)</span><br><span class="line">        <span class="keyword">return</span> redirect(<span class="string">"/"</span>)</span><br></pre></td></tr></table></figure></div> <strong>buy.html</strong><div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    Buy</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Buy Shares<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/buy"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"symbol"</span> <span class="attr">placeholder</span>=<span class="string">"Symbol"</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">autofocus</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"shares"</span> <span class="attr">placeholder</span>=<span class="string">"Shares"</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">autofocus</span> <span class="attr">min</span>=<span class="string">"0"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"submit"</span>&gt;</span>Buy<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div> <strong>history.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    C$50 Finance: Portfolio</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-bordered table-striped"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">thead</span> <span class="attr">class</span>=<span class="string">"thead-light"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Symbol<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Shares<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Method<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Price<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Transacted<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">                {% for row in rows %}</span><br><span class="line">                    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['symbol'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['shares'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['method'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['price'] | usd }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['transacted'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">                {% endfor %}</span><br><span class="line">            <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div><strong>index.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    C$50 Finance: Portfolio</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-bordered table-striped"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">thead</span> <span class="attr">class</span>=<span class="string">"thead-light"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Symbol<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Name<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Shares<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Price<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>Total Value<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">                {% for row in rows %}</span><br><span class="line">                    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['symbol'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['name'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['shares'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['price_usd'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ row['total_usd'] }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">                {% endfor %}</span><br><span class="line">                <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">"4"</span> <span class="attr">align</span>=<span class="string">"right"</span>&gt;</span>Cash<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ cash }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">"4"</span> <span class="attr">align</span>=<span class="string">"right"</span>&gt;</span>Total Value<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">td</span>&gt;</span>{{ sum }}<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div> <strong>login.html</strong><div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    Log In</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/login"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">autofocus</span> <span class="attr">class</span>=<span class="string">"form-control mx-auto w-auto"</span> <span class="attr">name</span>=<span class="string">"username"</span> <span class="attr">placeholder</span>=<span class="string">"Username"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">"form-control mx-auto w-auto"</span> <span class="attr">name</span>=<span class="string">"password"</span> <span class="attr">placeholder</span>=<span class="string">"Password"</span> <span class="attr">type</span>=<span class="string">"password"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn btn-primary"</span> <span class="attr">type</span>=<span class="string">"submit"</span>&gt;</span>Log In<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div> <strong>quote.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    Quote</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Get a stock quote<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/quote"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">autofocus</span> <span class="attr">name</span>=<span class="string">"symbol"</span> <span class="attr">placeholder</span>=<span class="string">"Symbol"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"submit"</span>&gt;</span>Get Quote<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div><strong>quoted.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    Quote</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    A share of {{ symbol['name']}} ({{symbol['symbol']}}) costs {{ symbol['price'] | usd}}</span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div><strong>register.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    Register</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/register"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">autofocus</span> <span class="attr">class</span>=<span class="string">"form-control mx-auto w-auto"</span> <span class="attr">name</span>=<span class="string">"username"</span> <span class="attr">placeholder</span>=<span class="string">"Username"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">"form-control mx-auto w-auto"</span> <span class="attr">name</span>=<span class="string">"password"</span> <span class="attr">placeholder</span>=<span class="string">"Password"</span> <span class="attr">type</span>=<span class="string">"password"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">"form-control mx-auto w-auto"</span> <span class="attr">name</span>=<span class="string">"confirmation"</span> <span class="attr">placeholder</span>=<span class="string">"Confirmation"</span> <span class="attr">type</span>=<span class="string">"password"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn btn-primary"</span> <span class="attr">type</span>=<span class="string">"submit"</span>&gt;</span>Register<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div> <strong>sell.html</strong><div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">{% extends "layout.html" %}</span><br><span class="line"></span><br><span class="line">{% block title %}</span><br><span class="line">    Sell</span><br><span class="line">{% endblock %}</span><br><span class="line"></span><br><span class="line">{% block main %}</span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Sell Shares<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/sell"</span> <span class="attr">method</span>=<span class="string">"post"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">select</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">name</span>=<span class="string">"symbol"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">""</span> <span class="attr">disabled</span> <span class="attr">selected</span>&gt;</span>Symbol<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                {% for row in portfolio %}</span><br><span class="line">                    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"{{ row['symbol'] }}"</span>&gt;</span>{{ row['symbol'] }}<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                {% endfor %}</span><br><span class="line">            <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"shares"</span> <span class="attr">placeholder</span>=<span class="string">"Shares"</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">min</span>=<span class="string">"1"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"submit"</span>&gt;</span>Sell<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">{% endblock %}</span><br></pre></td></tr></table></figure></div></p>]]>
    </content>
    <id>http://kinghua0629.com/2026/03/06/CS50-Problem-Set-9/</id>
    <link href="http://kinghua0629.com/2026/03/06/CS50-Problem-Set-9/"/>
    <published>2026-03-06T02:58:12.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-9">CS50 Problem Set 9</h1>
<p>Here’s my answers for the CS50 Problem Set 9. Hope that will help you
a bit.</p>
<h2]]>
    </summary>
    <title>CS50 Problem Set 9</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-8">CS50 Problem Set 8</h1><p>Here’s my answers for the CS50 Problem Set 8. Hope that will help youa bit.</p><h2 id="problem-1-trivia">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/8/trivia/#trivia">Trivia<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><p><strong>index.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&amp;display=swap"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"styles.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Trivia!<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// <span class="doctag">TODO:</span> Add code to check answers to questions</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">function</span> <span class="title function_">checkMultipleChoices</span>(<span class="params">event</span>) {</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// Get the element which triggered the event</span></span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">let</span> button = event.<span class="property">target</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// Check if the element's inner HTML matches expected answer</span></span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">if</span> (button.<span class="property">innerHTML</span> == <span class="string">'1 person per 6 sheep'</span>) {</span></span><br><span class="line"><span class="language-javascript">                    button.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">'Green'</span>;</span></span><br><span class="line"><span class="language-javascript">                    button.<span class="property">parentElement</span>.<span class="title function_">querySelector</span>(<span class="string">'.feedback'</span>).<span class="property">innerHTML</span> = <span class="string">'Correcrt'</span>;</span></span><br><span class="line"><span class="language-javascript">                } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="language-javascript">                    button.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">'Red'</span>;</span></span><br><span class="line"><span class="language-javascript">                    button.<span class="property">parentElement</span>.<span class="title function_">querySelector</span>(<span class="string">'.feedback'</span>).<span class="property">innerHTML</span> = <span class="string">'Incorrecrt'</span>;</span></span><br><span class="line"><span class="language-javascript">                }</span></span><br><span class="line"><span class="language-javascript">            }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">function</span> <span class="title function_">checkFreeResponse</span>(<span class="params">event</span>) {</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// Get the element which triggered the event</span></span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">let</span> button = event.<span class="property">target</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// Get the input element corresponding to the button</span></span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">let</span> input = button.<span class="property">parentElement</span>.<span class="title function_">querySelector</span>(<span class="string">'input'</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">//Check if the answer is correct</span></span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">if</span> (input.<span class="property">value</span> == <span class="string">'Switzerland'</span>) {</span></span><br><span class="line"><span class="language-javascript">                    input.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">'Green'</span>;</span></span><br><span class="line"><span class="language-javascript">                    input.<span class="property">parentElement</span>.<span class="title function_">querySelector</span>(<span class="string">'.feedback'</span>).<span class="property">innerHTML</span> = <span class="string">'Correcrt'</span>;</span></span><br><span class="line"><span class="language-javascript">                } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="language-javascript">                    input.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">'Red'</span>;</span></span><br><span class="line"><span class="language-javascript">                    input.<span class="property">parentElement</span>.<span class="title function_">querySelector</span>(<span class="string">'.feedback'</span>).<span class="property">innerHTML</span> = <span class="string">'Incorrecrt'</span>;</span></span><br><span class="line"><span class="language-javascript">                }</span></span><br><span class="line"><span class="language-javascript">            }</span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Trivia!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Part 1: Multiple Choice <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- <span class="doctag">TODO:</span> Add multiple choice question here --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h3</span>&gt;</span></span><br><span class="line">                    What is the approximate ratio of people to sheep in New Zealand?</span><br><span class="line">                <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"checkMultipleChoices(event)"</span>&gt;</span>6 people per 1 sheep<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"checkMultipleChoices(event)"</span>&gt;</span>3 people per 1 sheep<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"checkMultipleChoices(event)"</span>&gt;</span>1 person per 1 sheep<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"checkMultipleChoices(event)"</span>&gt;</span>1 person per 3 sheep<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"checkMultipleChoices(event)"</span>&gt;</span>1 person per 6 sheep<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"feedback"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Part 2: Free Response<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- <span class="doctag">TODO:</span> Add free response question here --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h3</span>&gt;</span></span><br><span class="line">                    In which country is it illegal to own only one guinea pig, as a lone guinea pig might get lonely?</span><br><span class="line">                <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"Enter text here"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"checkFreeResponse(event)"</span>&gt;</span>Check Answer<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"feedback"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div></p><h2 id="problem-2-homepage">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/8/homepage/#homepage">Homepage<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><p><strong>about.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>About Me - My Homepage<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Bootstrap CSS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">integrity</span>=<span class="string">"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Custom CSS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"styles.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Navigation Bar --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"navbar navbar-expand-lg navbar-dark bg-primary sticky-top"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"navbar-brand"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>My Homepage<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"navbar-toggler"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"navbar-toggler-icon"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"collapse navbar-collapse"</span> <span class="attr">id</span>=<span class="string">"navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"navbar-nav ms-auto"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link active"</span> <span class="attr">href</span>=<span class="string">"about.html"</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"hobbies.html"</span>&gt;</span>Hobbies<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"contact.html"</span>&gt;</span>Contact<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Page Header --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">"bg-secondary text-white py-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"display-4"</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"lead"</span>&gt;</span>Get to know me better<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Main Content --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container my-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-lg-8 mx-auto"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"mb-4"</span>&gt;</span>Hello There!<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                        <span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">"mb-5"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>Who Am I?<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span>&gt;</span>I'm a passionate learner currently working on expanding my web development skills through the CS50 course. This homepage represents my journey into HTML, CSS, and JavaScript development.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span>&gt;</span>As someone interested in technology and programming, I enjoy exploring new concepts and applying them to create meaningful projects like this one.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                        <span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">"mb-5"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>My Background<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span>&gt;</span>I have a diverse background with interests spanning multiple fields. While I'm currently focused on computer science and web development, I maintain curiosity about various subjects including:<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span>&gt;</span>Computer Science and Programming<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span>&gt;</span>Formula 1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span>&gt;</span>Mathmatics and Physics<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                        <span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">"mb-5"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>Education &amp; Learning<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span>&gt;</span>I'm currently enrolled in Harvard's CS50 course, which has been an incredible learning experience. Through this course, I've gained valuable insights into:<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-6"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">li</span>&gt;</span>Programming fundamentals<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">li</span>&gt;</span>Web development basics<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">li</span>&gt;</span>Problem-solving approaches<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-6"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">li</span>&gt;</span>Algorithm thinking<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">li</span>&gt;</span>Code optimization<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">li</span>&gt;</span>Project development<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                        <span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">"bg-light p-4 rounded"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>Fun Facts About Me<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 text-center"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"p-3"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">h4</span> <span class="attr">class</span>=<span class="string">"text-primary"</span>&gt;</span>📚<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">p</span>&gt;</span>I love reading books on technology and science<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 text-center"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"p-3"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">h4</span> <span class="attr">class</span>=<span class="string">"text-primary"</span>&gt;</span>🎮<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Enjoy playing strategy games in my free time<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 text-center"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"p-3"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">h4</span> <span class="attr">class</span>=<span class="string">"text-primary"</span>&gt;</span>☕<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Believe that good coffee fuels great ideas<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Footer --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"bg-dark text-white py-4 mt-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span>2026 My Homepage.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Bootstrap JS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"</span> <span class="attr">integrity</span>=<span class="string">"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Custom JavaScript --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"script.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div><strong>contact.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Contact Me - My Homepage<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Bootstrap CSS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">integrity</span>=<span class="string">"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Custom CSS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"styles.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Navigation Bar --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"navbar navbar-expand-lg navbar-dark bg-primary sticky-top"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"navbar-brand"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>My Homepage<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"navbar-toggler"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"navbar-toggler-icon"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"collapse navbar-collapse"</span> <span class="attr">id</span>=<span class="string">"navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"navbar-nav ms-auto"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"about.html"</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"hobbies.html"</span>&gt;</span>Hobbies<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link active"</span> <span class="attr">href</span>=<span class="string">"contact.html"</span>&gt;</span>Contact<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Page Header --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">"bg-warning text-dark py-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"display-4"</span>&gt;</span>Get In Touch<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"lead"</span>&gt;</span>Feel free to reach out for any inquiries or collaborations<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Main Content --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container my-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- Contact Form --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-lg-6 mb-5"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card shadow"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-header bg-primary text-white"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"mb-0"</span>&gt;</span>Send Me a Message<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"contactForm"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"name"</span> <span class="attr">class</span>=<span class="string">"form-label"</span>&gt;</span>Name *<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"name"</span> <span class="attr">required</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"email"</span> <span class="attr">class</span>=<span class="string">"form-label"</span>&gt;</span>Email *<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"email"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"email"</span> <span class="attr">required</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"subject"</span> <span class="attr">class</span>=<span class="string">"form-label"</span>&gt;</span>Subject<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"subject"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mb-3"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"message"</span> <span class="attr">class</span>=<span class="string">"form-label"</span>&gt;</span>Message *<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"message"</span> <span class="attr">rows</span>=<span class="string">"5"</span> <span class="attr">required</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">class</span>=<span class="string">"btn btn-primary"</span>&gt;</span>Send Message<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"reset"</span> <span class="attr">class</span>=<span class="string">"btn btn-outline-secondary ms-2"</span>&gt;</span>Clear Form<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"formSuccess"</span> <span class="attr">class</span>=<span class="string">"alert alert-success mt-3 d-none"</span>&gt;</span></span><br><span class="line">                                Thank you for your message! I'll get back to you soon.</span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="comment">&lt;!-- Contact Information --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-lg-6"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card shadow"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-header bg-success text-white"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"mb-0"</span>&gt;</span>Contact Information<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"list-group list-group-flush"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"list-group-item"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">strong</span>&gt;</span>📧 Email:<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"mailto:kinghua0629@outlook.com"</span> <span class="attr">class</span>=<span class="string">"text-decoration-none"</span>&gt;</span>kinghua0629@outlook.com<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"list-group-item"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">strong</span>&gt;</span>🌐 Website:<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://kinghua0629.github.io"</span> <span class="attr">target</span>=<span class="string">"_blank"</span> <span class="attr">class</span>=<span class="string">"text-decoration-none"</span>&gt;</span>kinghua0629.github.io<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"list-group-item"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">strong</span>&gt;</span>📍 Location:<span class="tag">&lt;/<span class="name">strong</span>&gt;</span> Shanghai, China</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"list-group-item"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">strong</span>&gt;</span>🕒 Availability:<span class="tag">&lt;/<span class="name">strong</span>&gt;</span> Usually responsive during business hours</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mt-4"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">h5</span>&gt;</span>Social Links<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d-flex gap-2"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://github.com/kinghua0629"</span> <span class="attr">class</span>=<span class="string">"btn btn-outline-primary"</span>&gt;</span>GitHub<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                    <span class="comment">&lt;!-- FAQ Section --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card mt-4 shadow"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-header bg-info text-white"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"mb-0"</span>&gt;</span>Frequently Asked Questions<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion"</span> <span class="attr">id</span>=<span class="string">"faqAccordion"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-item"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"accordion-header"</span> <span class="attr">id</span>=<span class="string">"faqHeading1"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"accordion-button"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#faqCollapse1"</span>&gt;</span></span><br><span class="line">                                            How long does it take to get a response?</span><br><span class="line">                                        <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"faqCollapse1"</span> <span class="attr">class</span>=<span class="string">"accordion-collapse collapse show"</span> <span class="attr">data-bs-parent</span>=<span class="string">"#faqAccordion"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-body"</span>&gt;</span></span><br><span class="line">                                            I typically respond to emails within 24 hours during weekdays.</span><br><span class="line">                                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-item"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"accordion-header"</span> <span class="attr">id</span>=<span class="string">"faqHeading2"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"accordion-button collapsed"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#faqCollapse2"</span>&gt;</span></span><br><span class="line">                                            Do you accept collaboration requests?</span><br><span class="line">                                        <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"faqCollapse2"</span> <span class="attr">class</span>=<span class="string">"accordion-collapse collapse"</span> <span class="attr">data-bs-parent</span>=<span class="string">"#faqAccordion"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-body"</span>&gt;</span></span><br><span class="line">                                            Yes! I'm always interested in interesting projects and collaborations. Feel free to describe your idea in the message.</span><br><span class="line">                                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Footer --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"bg-dark text-white py-4 mt-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="symbol">&amp;copy;</span> 2026 My Homepage.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Bootstrap JS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"</span> <span class="attr">integrity</span>=<span class="string">"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Custom JavaScript --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"script.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div><strong>hobbies.html</strong> <div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>My Hobbies - My Homepage<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Bootstrap CSS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">integrity</span>=<span class="string">"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Custom CSS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"styles.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Navigation Bar --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"navbar navbar-expand-lg navbar-dark bg-primary sticky-top"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"navbar-brand"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>My Homepage<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"navbar-toggler"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"navbar-toggler-icon"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"collapse navbar-collapse"</span> <span class="attr">id</span>=<span class="string">"navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"navbar-nav ms-auto"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"about.html"</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link active"</span> <span class="attr">href</span>=<span class="string">"hobbies.html"</span>&gt;</span>Hobbies<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"contact.html"</span>&gt;</span>Contact<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Page Header --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">"bg-success text-white py-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"display-4"</span>&gt;</span>My Hobbies &amp; Interests<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"lead"</span>&gt;</span>Things I enjoy doing in my spare time<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Main Content --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container my-5"</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- Hobbies Gallery --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 mb-4"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card h-100"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h5</span> <span class="attr">class</span>=<span class="string">"card-title text-success"</span>&gt;</span>💻 Programming<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"card-text"</span>&gt;</span>I love solving problems through code and building applications. Currently learning web development through CS50.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress-bar bg-success"</span> <span class="attr">role</span>=<span class="string">"progressbar"</span> <span class="attr">style</span>=<span class="string">"width: 75%"</span>&gt;</span>75%<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 mb-4"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card h-100"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h5</span> <span class="attr">class</span>=<span class="string">"card-title text-primary"</span>&gt;</span>📖 Reading<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"card-text"</span>&gt;</span>Passionate about books on technology, science fiction, and personal development. Always looking for new recommendations.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress-bar bg-primary"</span> <span class="attr">role</span>=<span class="string">"progressbar"</span> <span class="attr">style</span>=<span class="string">"width: 70%"</span>&gt;</span>70%<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 mb-4"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card h-100"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h5</span> <span class="attr">class</span>=<span class="string">"card-title text-warning"</span>&gt;</span>🎮 Gaming<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"card-text"</span>&gt;</span>Enjoy strategy games and puzzles. Love the problem-solving aspect and competitive elements.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress-bar bg-warning"</span> <span class="attr">role</span>=<span class="string">"progressbar"</span> <span class="attr">style</span>=<span class="string">"width: 50%"</span>&gt;</span>50%<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">&lt;!-- Skills Section --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row mt-5"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-lg-8 mx-auto"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"text-center mb-4"</span>&gt;</span>Skills &amp; Interests<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion"</span> <span class="attr">id</span>=<span class="string">"skillsAccordion"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"accordion-header"</span> <span class="attr">id</span>=<span class="string">"headingOne"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"accordion-button"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#collapseOne"</span>&gt;</span></span><br><span class="line">                                    🎯 Problem Solving</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"collapseOne"</span> <span class="attr">class</span>=<span class="string">"accordion-collapse collapse show"</span> <span class="attr">data-bs-parent</span>=<span class="string">"#skillsAccordion"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-body"</span>&gt;</span></span><br><span class="line">                                    I enjoy tackling complex problems and finding creative solutions. This skill translates well to both programming and everyday challenges.</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"accordion-header"</span> <span class="attr">id</span>=<span class="string">"headingTwo"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"accordion-button collapsed"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#collapseTwo"</span>&gt;</span></span><br><span class="line">                                    🎨 Creative Design</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"collapseTwo"</span> <span class="attr">class</span>=<span class="string">"accordion-collapse collapse"</span> <span class="attr">data-bs-parent</span>=<span class="string">"#skillsAccordion"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-body"</span>&gt;</span></span><br><span class="line">                                    Interested in UI/UX design and creating visually appealing interfaces. Always looking to improve the aesthetic aspects of my projects.</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"accordion-header"</span> <span class="attr">id</span>=<span class="string">"headingThree"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"accordion-button collapsed"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#collapseThree"</span>&gt;</span></span><br><span class="line">                                    📚 Continuous Learning</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"collapseThree"</span> <span class="attr">class</span>=<span class="string">"accordion-collapse collapse"</span> <span class="attr">data-bs-parent</span>=<span class="string">"#skillsAccordion"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"accordion-body"</span>&gt;</span></span><br><span class="line">                                    Committed to lifelong learning and staying updated with new technologies and methodologies in the ever-evolving tech landscape.</span><br><span class="line">                                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">&lt;!-- Interactive Hobby Selector --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row mt-5"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-lg-6 mx-auto"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"bg-info text-white p-4 rounded text-center"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">h3</span>&gt;</span>What's Your Favorite Hobby?<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mt-3"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">select</span> <span class="attr">id</span>=<span class="string">"hobbySelect"</span> <span class="attr">class</span>=<span class="string">"form-select"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">""</span>&gt;</span>Choose a hobby...<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"programming"</span>&gt;</span>Programming/Coding<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"reading"</span>&gt;</span>Reading<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"gaming"</span>&gt;</span>Gaming<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"music"</span>&gt;</span>Music<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"sports"</span>&gt;</span>Sports<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"travel"</span>&gt;</span>Traveling<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"hobbySubmit"</span> <span class="attr">class</span>=<span class="string">"btn btn-light mt-2"</span>&gt;</span>Share Your Choice<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"hobbyResponse"</span> <span class="attr">class</span>=<span class="string">"mt-3"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Footer --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"bg-dark text-white py-4 mt-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span>2026 My Homepage.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Bootstrap JS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"</span> <span class="attr">integrity</span>=<span class="string">"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Custom JavaScript --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"script.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div> <strong>index.html</strong><div class="code-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">integrity</span>=<span class="string">"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"</span> <span class="attr">integrity</span>=<span class="string">"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"styles.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Welcome to My Homepage<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Navigation Bar --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"navbar navbar-expand-lg navbar-dark bg-primary sticky-top"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"navbar-brand"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>My Homepage<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"navbar-toggler"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">data-bs-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-bs-target</span>=<span class="string">"#navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"navbar-toggler-icon"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"collapse navbar-collapse"</span> <span class="attr">id</span>=<span class="string">"navbarNav"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"navbar-nav ms-auto"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link active"</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"about.html"</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"hobbies.html"</span>&gt;</span>Hobbies<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"nav-item"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"nav-link"</span> <span class="attr">href</span>=<span class="string">"contact.html"</span>&gt;</span>Contact<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Hero Section --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">"bg-light py-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"display-4 fw-bold"</span>&gt;</span>Welcome to My Personal Homepage!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"lead"</span>&gt;</span>This is my CS50 homepage assignment showcasing HTML, CSS, and JavaScript skills.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"welcomeBtn"</span> <span class="attr">class</span>=<span class="string">"btn btn-primary btn-lg mt-3"</span>&gt;</span>Click for a Surprise!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Main Content --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">main</span> <span class="attr">class</span>=<span class="string">"container my-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 mb-4"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card h-100 shadow-sm"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body text-center"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"card-title"</span>&gt;</span>About Me<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"card-text"</span>&gt;</span>Learn more about who I am and my background.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"about.html"</span> <span class="attr">class</span>=<span class="string">"btn btn-outline-primary"</span>&gt;</span>View Details<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 mb-4"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card h-100 shadow-sm"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body text-center"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"card-title"</span>&gt;</span>My Hobbies<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"card-text"</span>&gt;</span>Discover my interests and favorite activities.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"hobbies.html"</span> <span class="attr">class</span>=<span class="string">"btn btn-outline-primary"</span>&gt;</span>Explore Hobbies<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 mb-4"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card h-100 shadow-sm"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-body text-center"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">h3</span> <span class="attr">class</span>=<span class="string">"card-title"</span>&gt;</span>Get in Touch<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"card-text"</span>&gt;</span>Feel free to contact me for any inquiries.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"contact.html"</span> <span class="attr">class</span>=<span class="string">"btn btn-outline-primary"</span>&gt;</span>Contact Me<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">&lt;!-- Interactive Section --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row mt-5"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-12"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"bg-primary text-white p-4 rounded"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"text-center mb-4"</span>&gt;</span>Interactive Demo<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"text-center"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"colorChangeBtn"</span> <span class="attr">class</span>=<span class="string">"btn btn-light me-2"</span>&gt;</span>Change Background Color<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"showTimeBtn"</span> <span class="attr">class</span>=<span class="string">"btn btn-light"</span>&gt;</span>Show Current Time<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"timeDisplay"</span> <span class="attr">class</span>=<span class="string">"mt-3 fs-5"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Footer --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"bg-dark text-white py-4 mt-5"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container text-center"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span>2026 My Homepage<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- Bootstrap JS --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"</span> <span class="attr">integrity</span>=<span class="string">"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"</span> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Custom JavaScript --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"script.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div> <strong>script.js</strong> <div class="code-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Wait for DOM to be fully loaded</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'DOMContentLoaded'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Welcome button functionality</span></span><br><span class="line">    <span class="keyword">const</span> welcomeBtn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'welcomeBtn'</span>);</span><br><span class="line">    <span class="keyword">if</span> (welcomeBtn) {</span><br><span class="line">        welcomeBtn.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">'🎉 Welcome to my homepage! Thanks for visiting! 🎉'</span>);</span><br><span class="line">        });</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Color changing functionality</span></span><br><span class="line">    <span class="keyword">const</span> colorChangeBtn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'colorChangeBtn'</span>);</span><br><span class="line">    <span class="keyword">if</span> (colorChangeBtn) {</span><br><span class="line">        colorChangeBtn.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line">            <span class="keyword">const</span> colors = [<span class="string">'#ff6b6b'</span>, <span class="string">'#4ecdc4'</span>, <span class="string">'#45b7d1'</span>, <span class="string">'#96ceb4'</span>, <span class="string">'#feca57'</span>, <span class="string">'#ff9ff3'</span>];</span><br><span class="line">            <span class="keyword">const</span> randomColor = colors[<span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * colors.<span class="property">length</span>)];</span><br><span class="line">            <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">backgroundColor</span> = randomColor;</span><br><span class="line"></span><br><span class="line">            <span class="comment">// Add temporary notification</span></span><br><span class="line">            <span class="title function_">showNotification</span>(<span class="string">`Background changed to <span class="subst">${randomColor}</span>`</span>, <span class="string">'success'</span>);</span><br><span class="line">        });</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Show current time functionality</span></span><br><span class="line">    <span class="keyword">const</span> showTimeBtn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'showTimeBtn'</span>);</span><br><span class="line">    <span class="keyword">const</span> timeDisplay = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'timeDisplay'</span>);</span><br><span class="line">    <span class="keyword">if</span> (showTimeBtn &amp;&amp; timeDisplay) {</span><br><span class="line">        showTimeBtn.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line">            <span class="keyword">const</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">            <span class="keyword">const</span> timeString = now.<span class="title function_">toLocaleTimeString</span>();</span><br><span class="line">            timeDisplay.<span class="property">textContent</span> = <span class="string">`Current time: <span class="subst">${timeString}</span>`</span>;</span><br><span class="line">            timeDisplay.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">'fade-in'</span>);</span><br><span class="line"></span><br><span class="line">            <span class="comment">// Remove animation class after animation completes</span></span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> {</span><br><span class="line">                timeDisplay.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">'fade-in'</span>);</span><br><span class="line">            }, <span class="number">600</span>);</span><br><span class="line">        });</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Hobby selector functionality</span></span><br><span class="line">    <span class="keyword">const</span> hobbySelect = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'hobbySelect'</span>);</span><br><span class="line">    <span class="keyword">const</span> hobbySubmit = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'hobbySubmit'</span>);</span><br><span class="line">    <span class="keyword">const</span> hobbyResponse = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'hobbyResponse'</span>);</span><br><span class="line">    <span class="keyword">if</span> (hobbySelect &amp;&amp; hobbySubmit &amp;&amp; hobbyResponse) {</span><br><span class="line">        hobbySubmit.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line">            <span class="keyword">const</span> selectedHobby = hobbySelect.<span class="property">value</span>;</span><br><span class="line">            <span class="keyword">if</span> (selectedHobby) {</span><br><span class="line">                <span class="keyword">const</span> responses = {</span><br><span class="line">                    <span class="string">'programming'</span>: <span class="string">'Great choice! Programming opens up endless possibilities.'</span>,</span><br><span class="line">                    <span class="string">'reading'</span>: <span class="string">'Wonderful! Reading expands our minds and knowledge.'</span>,</span><br><span class="line">                    <span class="string">'gaming'</span>: <span class="string">'Awesome! Games develop strategic thinking skills.'</span>,</span><br><span class="line">                    <span class="string">'music'</span>: <span class="string">'Fantastic! Music is truly universal language.'</span>,</span><br><span class="line">                    <span class="string">'sports'</span>: <span class="string">'Excellent! Sports promote health and teamwork.'</span>,</span><br><span class="line">                    <span class="string">'travel'</span>: <span class="string">'Amazing! Travel broadens our perspectives.'</span></span><br><span class="line">                };</span><br><span class="line"></span><br><span class="line">                hobbyResponse.<span class="property">textContent</span> = responses[selectedHobby] || <span class="string">'That sounds interesting!'</span>;</span><br><span class="line">                hobbyResponse.<span class="property">className</span> = <span class="string">'mt-3 alert alert-info'</span>;</span><br><span class="line">            } <span class="keyword">else</span> {</span><br><span class="line">                hobbyResponse.<span class="property">textContent</span> = <span class="string">'Please select a hobby first!'</span>;</span><br><span class="line">                hobbyResponse.<span class="property">className</span> = <span class="string">'mt-3 alert alert-warning'</span>;</span><br><span class="line">            }</span><br><span class="line">        });</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Contact form functionality</span></span><br><span class="line">    <span class="keyword">const</span> contactForm = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'contactForm'</span>);</span><br><span class="line">    <span class="keyword">const</span> formSuccess = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'formSuccess'</span>);</span><br><span class="line">    <span class="keyword">if</span> (contactForm &amp;&amp; formSuccess) {</span><br><span class="line">        contactForm.<span class="title function_">addEventListener</span>(<span class="string">'submit'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line">            e.<span class="title function_">preventDefault</span>();</span><br><span class="line"></span><br><span class="line">            <span class="comment">// Get form values</span></span><br><span class="line">            <span class="keyword">const</span> name = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'name'</span>).<span class="property">value</span>;</span><br><span class="line">            <span class="keyword">const</span> email = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'email'</span>).<span class="property">value</span>;</span><br><span class="line">            <span class="keyword">const</span> message = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'message'</span>).<span class="property">value</span>;</span><br><span class="line"></span><br><span class="line">            <span class="comment">// Simple validation</span></span><br><span class="line">            <span class="keyword">if</span> (name &amp;&amp; email &amp;&amp; message) {</span><br><span class="line">                <span class="comment">// Simulate form submission</span></span><br><span class="line">                <span class="title function_">showLoadingState</span>(contactForm);</span><br><span class="line"></span><br><span class="line">                <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> {</span><br><span class="line">                    <span class="title function_">hideLoadingState</span>(contactForm);</span><br><span class="line">                    formSuccess.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">'d-none'</span>);</span><br><span class="line">                    contactForm.<span class="title function_">reset</span>();</span><br><span class="line"></span><br><span class="line">                    <span class="comment">// Hide success message after 5 seconds</span></span><br><span class="line">                    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> {</span><br><span class="line">                        formSuccess.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">'d-none'</span>);</span><br><span class="line">                    }, <span class="number">5000</span>);</span><br><span class="line">                }, <span class="number">1500</span>);</span><br><span class="line">            } <span class="keyword">else</span> {</span><br><span class="line">                <span class="title function_">showNotification</span>(<span class="string">'Please fill in all required fields!'</span>, <span class="string">'warning'</span>);</span><br><span class="line">            }</span><br><span class="line">        });</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Smooth scrolling for anchor links</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'a[href^="#"]'</span>).<span class="title function_">forEach</span>(<span class="function"><span class="params">anchor</span> =&gt;</span> {</span><br><span class="line">        anchor.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line">            e.<span class="title function_">preventDefault</span>();</span><br><span class="line">            <span class="keyword">const</span> target = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="variable language_">this</span>.<span class="title function_">getAttribute</span>(<span class="string">'href'</span>));</span><br><span class="line">            <span class="keyword">if</span> (target) {</span><br><span class="line">                target.<span class="title function_">scrollIntoView</span>({</span><br><span class="line">                    <span class="attr">behavior</span>: <span class="string">'smooth'</span>,</span><br><span class="line">                    <span class="attr">block</span>: <span class="string">'start'</span></span><br><span class="line">                });</span><br><span class="line">            }</span><br><span class="line">        });</span><br><span class="line">    });</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Add fade-in animation to cards when they come into view</span></span><br><span class="line">    <span class="keyword">const</span> observerOptions = {</span><br><span class="line">        <span class="attr">threshold</span>: <span class="number">0.1</span>,</span><br><span class="line">        <span class="attr">rootMargin</span>: <span class="string">'0px 0px -50px 0px'</span></span><br><span class="line">    };</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> observer = <span class="keyword">new</span> <span class="title class_">IntersectionObserver</span>(<span class="keyword">function</span>(<span class="params">entries</span>) {</span><br><span class="line">        entries.<span class="title function_">forEach</span>(<span class="function"><span class="params">entry</span> =&gt;</span> {</span><br><span class="line">            <span class="keyword">if</span> (entry.<span class="property">isIntersecting</span>) {</span><br><span class="line">                entry.<span class="property">target</span>.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">'fade-in'</span>);</span><br><span class="line">            }</span><br><span class="line">        });</span><br><span class="line">    }, observerOptions);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Observe all cards</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'.card'</span>).<span class="title function_">forEach</span>(<span class="function"><span class="params">card</span> =&gt;</span> {</span><br><span class="line">        observer.<span class="title function_">observe</span>(card);</span><br><span class="line">    });</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Dynamic greeting based on time of day</span></span><br><span class="line">    <span class="keyword">const</span> greetingElement = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">'header h1'</span>);</span><br><span class="line">    <span class="keyword">if</span> (greetingElement) {</span><br><span class="line">        <span class="keyword">const</span> hour = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getHours</span>();</span><br><span class="line">        <span class="keyword">let</span> greeting = <span class="string">''</span>;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (hour &lt; <span class="number">12</span>) {</span><br><span class="line">            greeting = <span class="string">'Good Morning'</span>;</span><br><span class="line">        } <span class="keyword">else</span> <span class="keyword">if</span> (hour &lt; <span class="number">18</span>) {</span><br><span class="line">            greeting = <span class="string">'Good Afternoon'</span>;</span><br><span class="line">        } <span class="keyword">else</span> {</span><br><span class="line">            greeting = <span class="string">'Good Evening'</span>;</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Update greeting with smooth transition</span></span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> {</span><br><span class="line">            greetingElement.<span class="property">textContent</span> = <span class="string">`<span class="subst">${greeting}</span>! Welcome to My Personal Homepage!`</span>;</span><br><span class="line">        }, <span class="number">1000</span>);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Keyboard shortcuts</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'keydown'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line">        <span class="comment">// Press 'H' to go home</span></span><br><span class="line">        <span class="keyword">if</span> (e.<span class="property">key</span> === <span class="string">'h'</span> || e.<span class="property">key</span> === <span class="string">'H'</span>) {</span><br><span class="line">            <span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">href</span> = <span class="string">'index.html'</span>;</span><br><span class="line">        }</span><br><span class="line">        <span class="comment">// Press 'A' for about</span></span><br><span class="line">        <span class="keyword">if</span> (e.<span class="property">key</span> === <span class="string">'a'</span> || e.<span class="property">key</span> === <span class="string">'A'</span>) {</span><br><span class="line">            <span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">href</span> = <span class="string">'about.html'</span>;</span><br><span class="line">        }</span><br><span class="line">        <span class="comment">// Press 'C' for contact</span></span><br><span class="line">        <span class="keyword">if</span> (e.<span class="property">key</span> === <span class="string">'c'</span> || e.<span class="property">key</span> === <span class="string">'C'</span>) {</span><br><span class="line">            <span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">href</span> = <span class="string">'contact.html'</span>;</span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Session storage for user preferences</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">typeof</span>(<span class="title class_">Storage</span>) !== <span class="string">"undefined"</span>) {</span><br><span class="line">        <span class="comment">// Store visit count</span></span><br><span class="line">        <span class="keyword">let</span> visitCount = <span class="variable language_">sessionStorage</span>.<span class="title function_">getItem</span>(<span class="string">'visitCount'</span>) || <span class="number">0</span>;</span><br><span class="line">        visitCount++;</span><br><span class="line">        <span class="variable language_">sessionStorage</span>.<span class="title function_">setItem</span>(<span class="string">'visitCount'</span>, visitCount);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Show welcome back message for returning visitors</span></span><br><span class="line">        <span class="keyword">if</span> (visitCount &gt; <span class="number">1</span>) {</span><br><span class="line">            <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> {</span><br><span class="line">                <span class="title function_">showNotification</span>(<span class="string">`Welcome back! This is your visit #<span class="subst">${visitCount}</span>`</span>, <span class="string">'info'</span>);</span><br><span class="line">            }, <span class="number">2000</span>);</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Console message for developers</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'%c👋 Hello Developer!'</span>, <span class="string">'color: #667eea; font-size: 20px; font-weight: bold;'</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'%cThis site was built with HTML, CSS, Bootstrap, and JavaScript for CS50 assignment.'</span>, <span class="string">'color: #333; font-size: 14px;'</span>);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// Helper Functions</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">showNotification</span>(<span class="params">message, type = <span class="string">'info'</span></span>) {</span><br><span class="line">    <span class="comment">// Create notification element</span></span><br><span class="line">    <span class="keyword">const</span> notification = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'div'</span>);</span><br><span class="line">    notification.<span class="property">className</span> = <span class="string">`alert alert-<span class="subst">${type}</span> position-fixed`</span>;</span><br><span class="line">    notification.<span class="property">style</span>.<span class="property">cssText</span> = <span class="string">`</span></span><br><span class="line"><span class="string">        top: 20px;</span></span><br><span class="line"><span class="string">        right: 20px;</span></span><br><span class="line"><span class="string">        z-index: 1000;</span></span><br><span class="line"><span class="string">        min-width: 300px;</span></span><br><span class="line"><span class="string">        box-shadow: 0 4px 12px rgba(0,0,0,0.15);</span></span><br><span class="line"><span class="string">    `</span>;</span><br><span class="line">    notification.<span class="property">textContent</span> = message;</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(notification);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Auto remove after 3 seconds</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> {</span><br><span class="line">        notification.<span class="title function_">remove</span>();</span><br><span class="line">    }, <span class="number">3000</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">showLoadingState</span>(<span class="params">form</span>) {</span><br><span class="line">    <span class="keyword">const</span> submitBtn = form.<span class="title function_">querySelector</span>(<span class="string">'button[type="submit"]'</span>);</span><br><span class="line">    <span class="keyword">const</span> originalText = submitBtn.<span class="property">textContent</span>;</span><br><span class="line"></span><br><span class="line">    submitBtn.<span class="property">innerHTML</span> = <span class="string">'&lt;span class="loading-spinner"&gt;&lt;/span&gt; Sending...'</span>;</span><br><span class="line">    submitBtn.<span class="property">disabled</span> = <span class="literal">true</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Store original text for later restoration</span></span><br><span class="line">    submitBtn.<span class="property">dataset</span>.<span class="property">originalText</span> = originalText;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">hideLoadingState</span>(<span class="params">form</span>) {</span><br><span class="line">    <span class="keyword">const</span> submitBtn = form.<span class="title function_">querySelector</span>(<span class="string">'button[type="submit"]'</span>);</span><br><span class="line">    submitBtn.<span class="property">textContent</span> = submitBtn.<span class="property">dataset</span>.<span class="property">originalText</span> || <span class="string">'Send Message'</span>;</span><br><span class="line">    submitBtn.<span class="property">disabled</span> = <span class="literal">false</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Handle page visibility changes</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'visibilitychange'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line">    <span class="keyword">if</span> (!<span class="variable language_">document</span>.<span class="property">hidden</span>) {</span><br><span class="line">        <span class="comment">// Page became visible</span></span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">'Welcome Back! - My Homepage'</span>;</span><br><span class="line">    } <span class="keyword">else</span> {</span><br><span class="line">        <span class="comment">// Page hidden</span></span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">'Come Back Soon! - My Homepage'</span>;</span><br><span class="line">    }</span><br><span class="line">});</span><br></pre></td></tr></table></figure></div><strong>specification.txt</strong> <div class="code-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line">HTML Tags Used (10+ distinct tags):</span><br><span class="line">1. &lt;!DOCTYPE&gt; - Defines the document type</span><br><span class="line">2. &lt;html&gt; - Root element of the HTML document</span><br><span class="line">3. &lt;head&gt; - Contains meta information and links</span><br><span class="line">4. &lt;meta&gt; - Provides metadata about the HTML document</span><br><span class="line">5. &lt;title&gt; - Sets the title of the webpage</span><br><span class="line">6. &lt;link&gt; - Links external resources like CSS and Bootstrap</span><br><span class="line">7. &lt;script&gt; - Includes JavaScript files</span><br><span class="line">8. &lt;body&gt; - Contains the visible page content</span><br><span class="line">9. &lt;nav&gt; - Navigation section with Bootstrap navbar</span><br><span class="line">10. &lt;header&gt; - Introductory content or navigation aids</span><br><span class="line">11. &lt;main&gt; - Main content area of the document</span><br><span class="line">12. &lt;section&gt; - Generic section of content</span><br><span class="line">13. &lt;article&gt; - Independent, self-contained content</span><br><span class="line">14. &lt;div&gt; - Generic container for flow content</span><br><span class="line">15. &lt;span&gt; - Inline container for phrasing content</span><br><span class="line">16. &lt;p&gt; - Paragraph element</span><br><span class="line">17. &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt; - Heading elements</span><br><span class="line">18. &lt;ul&gt;, &lt;ol&gt; - Unordered and ordered lists</span><br><span class="line">19. &lt;li&gt; - List items</span><br><span class="line">20. &lt;a&gt; - Anchor element for hyperlinks</span><br><span class="line">21. &lt;img&gt; - Image element</span><br><span class="line">22. &lt;button&gt; - Clickable button</span><br><span class="line">23. &lt;form&gt; - Form for user input</span><br><span class="line">24. &lt;input&gt; - Input field</span><br><span class="line">25. &lt;textarea&gt; - Multi-line text input</span><br><span class="line">26. &lt;select&gt; - Drop-down list</span><br><span class="line">27. &lt;option&gt; - Options in a drop-down list</span><br><span class="line">28. &lt;label&gt; - Label for form elements</span><br><span class="line">29. &lt;footer&gt; - Footer section of the document</span><br><span class="line"></span><br><span class="line">CSS Properties Used (5+ distinct properties):</span><br><span class="line">1. font-family - Sets the font family for text</span><br><span class="line">2. background - Sets background colors and gradients</span><br><span class="line">3. color - Sets text color</span><br><span class="line">4. margin - Sets margins around elements</span><br><span class="line">5. padding - Sets padding inside elements</span><br><span class="line">6. border-radius - Rounds corners of elements</span><br><span class="line">7. box-shadow - Adds shadow effects to elements</span><br><span class="line">8. transition - Animates property changes</span><br><span class="line">9. transform - Applies 2D/3D transformations</span><br><span class="line">10. display - Specifies display behavior of elements</span><br><span class="line">11. position - Specifies positioning method</span><br><span class="line">12. z-index - Controls stacking order of elements</span><br><span class="line">13. width - Sets element width</span><br><span class="line">14. height - Sets element height</span><br><span class="line">15. text-shadow - Adds shadow to text</span><br><span class="line"></span><br><span class="line">JavaScript Features Used:</span><br><span class="line">I integrated multiple JavaScript features to make the site interactive:</span><br><span class="line">1. DOM manipulation - Dynamically changing page content and styles</span><br><span class="line">2. Event listeners - Handling user interactions like clicks and form submissions</span><br><span class="line">3. Alert dialogs - Showing popup notifications and welcome messages</span><br><span class="line">4. Dynamic content generation - Creating elements and updating text content</span><br><span class="line">5. Form validation - Checking user input before submission</span><br><span class="line">6. Animation effects - Adding CSS classes for smooth transitions</span><br><span class="line">7. Local storage - Storing visitor count using session storage</span><br><span class="line">8. Intersection Observer API - Creating fade-in effects for elements</span><br><span class="line">9. Keyboard event handling - Adding keyboard shortcuts (H, A, C keys)</span><br><span class="line">10. Page visibility API - Changing page title based on tab visibility</span><br><span class="line">11. Timed functions - Using setTimeout for delayed actions and auto-hiding elements</span><br><span class="line">12. Console logging - Providing developer information in browser console</span><br><span class="line"></span><br><span class="line">Bootstrap Integration:</span><br><span class="line">I incorporated Bootstrap 5.3.8 throughout the site for responsive design:</span><br><span class="line">1. Grid system - Using container, row, and col classes for responsive layouts</span><br><span class="line">2. Components - Navbar, cards, buttons, forms, accordions, progress bars</span><br><span class="line">3. Utilities - Spacing, colors, shadows, and responsive utilities</span><br><span class="line">4. JavaScript plugins - Modal, tooltip, and collapse functionality</span><br><span class="line">5. Responsive breakpoints - Automatic adaptation to different screen sizes</span><br><span class="line"></span><br><span class="line">Responsive Design:</span><br><span class="line">The site is fully responsive and works well on:</span><br><span class="line">- Mobile devices (phones)</span><br><span class="line">- Tablets</span><br><span class="line">- Laptops/desktops</span><br><span class="line">- Various screen sizes and orientations</span><br></pre></td></tr></table></figure></div><strong>style.css</strong> <div class="code-container" data-rel="Css"><figure class="iseeu highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Body style */</span></span><br><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'Segoe UI'</span>, Tahoma, Geneva, Verdana, sans-serif;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.6</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Navigation bar style */</span></span><br><span class="line"><span class="selector-class">.navbar-brand</span> {</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1.5rem</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.nav-link</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">2px</span>);</span><br><span class="line">    <span class="attribute">transition</span>: transform <span class="number">0.3s</span> ease;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Header/Hero Section Styling */</span></span><br><span class="line"><span class="selector-tag">header</span> {</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">135deg</span>, <span class="number">#667eea</span> <span class="number">0%</span>, <span class="number">#764ba2</span> <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">header</span> <span class="selector-tag">h1</span> {</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Card Hover Effects */</span></span><br><span class="line"><span class="selector-class">.card</span> {</span><br><span class="line">    <span class="attribute">transition</span>: transform <span class="number">0.3s</span> ease, box-shadow <span class="number">0.3s</span> ease;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">5px</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">10px</span> <span class="number">20px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Button Animations */</span></span><br><span class="line"><span class="selector-class">.btn</span> {</span><br><span class="line">    <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.05</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Progress Bar Customization */</span></span><br><span class="line"><span class="selector-class">.progress</span> {</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.progress-bar</span> {</span><br><span class="line">    <span class="attribute">transition</span>: width <span class="number">1s</span> ease-in-out;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Form Styling */</span></span><br><span class="line"><span class="selector-class">.form-control</span><span class="selector-pseudo">:focus</span> {</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#667eea</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0.2rem</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">126</span>, <span class="number">234</span>, <span class="number">0.25</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Accordion Customization */</span></span><br><span class="line"><span class="selector-class">.accordion-button</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.collapsed</span>) {</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#e7f1ff</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#0c63e4</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Footer Styling */</span></span><br><span class="line"><span class="selector-tag">footer</span> {</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">135deg</span>, <span class="number">#2c3e50</span> <span class="number">0%</span>, <span class="number">#34495e</span> <span class="number">100%</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Responsive Typography */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) {</span><br><span class="line">    <span class="selector-class">.display-4</span> {</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">2.5rem</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.lead</span> {</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">1.1rem</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Mobile-Specific Adjustments */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">576px</span>) {</span><br><span class="line">    <span class="selector-class">.navbar-brand</span> {</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">1.2rem</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.card</span> {</span><br><span class="line">        <span class="attribute">margin-bottom</span>: <span class="number">1rem</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.btn</span> {</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">        <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Animation Classes */</span></span><br><span class="line"><span class="selector-class">.fade-in</span> {</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">20px</span>);</span><br><span class="line">    <span class="attribute">animation</span>: fadeInUp <span class="number">0.6s</span> ease forwards;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> fadeInUp {</span><br><span class="line">    <span class="selector-tag">to</span> {</span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">0</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pulse</span> {</span><br><span class="line">    <span class="attribute">animation</span>: pulse <span class="number">2s</span> infinite;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> pulse {</span><br><span class="line">    <span class="number">0%</span> {</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="number">50%</span> {</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.05</span>);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="number">100%</span> {</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Custom Utility Classes */</span></span><br><span class="line"><span class="selector-class">.text-shadow</span> {</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bg-gradient-custom</span> {</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">45deg</span>, <span class="number">#ff9a9e</span> <span class="number">0%</span>, <span class="number">#fecfef</span> <span class="number">50%</span>, <span class="number">#fecfef</span> <span class="number">100%</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.border-radius-lg</span> {</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">15px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shadow-soft</span> {</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">15px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Interactive Elements */</span></span><br><span class="line"><span class="selector-class">.interactive-element</span> {</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">    <span class="attribute">user-select</span>: none;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.interactive-element</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.05</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Loading Spinner */</span></span><br><span class="line"><span class="selector-class">.loading-spinner</span> {</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">3px</span> solid <span class="number">#f3f3f3</span>;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">3px</span> solid <span class="number">#667eea</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">animation</span>: spin <span class="number">1s</span> linear infinite;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> spin {</span><br><span class="line">    <span class="number">0%</span> {</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="number">100%</span> {</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">360deg</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Alert Customization */</span></span><br><span class="line"><span class="selector-class">.alert-success</span> {</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#d4edda</span>;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#c3e6cb</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#155724</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.alert-warning</span> {</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fff3cd</span>;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#ffeaa7</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#856404</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* List Group Customization */</span></span><br><span class="line"><span class="selector-class">.list-group-item</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f8f9fa</span>;</span><br><span class="line">    <span class="attribute">transition</span>: background-color <span class="number">0.2s</span> ease;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Scroll Behavior */</span></span><br><span class="line"><span class="selector-tag">html</span> {</span><br><span class="line">    <span class="attribute">scroll-behavior</span>: smooth;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Focus Styles for Accessibility */</span></span><br><span class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">:focus</span>,</span><br><span class="line"><span class="selector-class">.form-control</span><span class="selector-pseudo">:focus</span>,</span><br><span class="line"><span class="selector-class">.nav-link</span><span class="selector-pseudo">:focus</span> {</span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">2px</span> solid <span class="number">#667eea</span>;</span><br><span class="line">    <span class="attribute">outline-offset</span>: <span class="number">2px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div></p>]]>
    </content>
    <id>http://kinghua0629.com/2026/03/06/CS50-Problem-Set-8/</id>
    <link href="http://kinghua0629.com/2026/03/06/CS50-Problem-Set-8/"/>
    <published>2026-03-06T02:50:34.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-8">CS50 Problem Set 8</h1>
<p>Here’s my answers for the CS50 Problem Set 8. Hope that will help you
a bit.</p>
<h2]]>
    </summary>
    <title>CS50 Problem Set 8</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-7">CS50 Problem Set 7</h1><p>Here’s my answer for the CS50 Problem Set 7. Hope that will help youa bit.</p><h2 id="problem-1-songs">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/7/songs/#songs">Songs<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><p><strong>1.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> name <span class="keyword">FROM</span> songs;</span><br></pre></td></tr></table></figure></div></p><p><strong>2.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> songs</span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> tempo;</span><br></pre></td></tr></table></figure></div></p><p><strong>3.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> songs</span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> duration_ms <span class="keyword">DESC</span></span><br><span class="line">LIMIT <span class="number">5</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>4.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> songs</span><br><span class="line"><span class="keyword">WHERE</span> danceability <span class="operator">&gt;</span> <span class="number">0.75</span> <span class="keyword">AND</span> energy <span class="operator">&gt;</span> <span class="number">0.75</span> <span class="keyword">AND</span> valence <span class="operator">&gt;</span> <span class="number">0.75</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>5.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">AVG</span>(energy)</span><br><span class="line"><span class="keyword">FROM</span> songs;</span><br></pre></td></tr></table></figure></div></p><p><strong>6.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> songs</span><br><span class="line"><span class="keyword">WHERE</span> artist_id <span class="operator">=</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> id</span><br><span class="line">    <span class="keyword">FROM</span> artists</span><br><span class="line">    <span class="keyword">WHERE</span> name <span class="operator">=</span> <span class="string">'Post Malone'</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure></div></p><p><strong>7.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> <span class="built_in">AVG</span>(energy)</span><br><span class="line"><span class="keyword">FROM</span> songs</span><br><span class="line"><span class="keyword">WHERE</span> artist_id <span class="operator">=</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> id</span><br><span class="line">    <span class="keyword">FROM</span> artists</span><br><span class="line">    <span class="keyword">WHERE</span> name <span class="operator">=</span> <span class="string">'Drake'</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure></div></p><p><strong>8.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> songs</span><br><span class="line"><span class="keyword">WHERE</span> name <span class="keyword">LIKE</span> <span class="string">'%feat.%'</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>answers.txt</strong> <div class="code-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1. I will use the SQL to count the average energy, valence, and danceability of a person’s top 100 songs from the past year.</span><br><span class="line"></span><br><span class="line">2. I should consider how many times they listen to each music. </span><br></pre></td></tr></table></figure></div></p><h2 id="problem-2-movies">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/7/movies/#movies">Movies<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><p><strong>1.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 1. Titles of all movies from 2008</span></span><br><span class="line"><span class="keyword">SELECT</span> title</span><br><span class="line"><span class="keyword">FROM</span> movies</span><br><span class="line"><span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">=</span> <span class="number">2008</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>2.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 2. Birth year of Emma Stone</span></span><br><span class="line"><span class="keyword">SELECT</span> birth</span><br><span class="line"><span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">WHERE</span> name <span class="operator">=</span> <span class="string">'Emma Stone'</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>3.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 3. Titles of all movies since 2018, in alphabetical order</span></span><br><span class="line"><span class="keyword">SELECT</span> title</span><br><span class="line"><span class="keyword">FROM</span> movies</span><br><span class="line"><span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">&gt;=</span> <span class="number">2018</span></span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> title <span class="keyword">ASC</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>4.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 4. Number of movies with a 10.0 rating</span></span><br><span class="line"><span class="keyword">SELECT</span> <span class="built_in">COUNT</span>(rating)</span><br><span class="line"><span class="keyword">FROM</span> ratings</span><br><span class="line"><span class="keyword">WHERE</span> rating <span class="operator">=</span> <span class="number">10.0</span></span><br></pre></td></tr></table></figure></div></p><p><strong>5.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 5. Titles and years of all Harry Potter movies, in chronological order (title beginning with "Harry Potter and the ...")</span></span><br><span class="line"><span class="keyword">SELECT</span> title, <span class="keyword">year</span></span><br><span class="line"><span class="keyword">FROM</span> movies</span><br><span class="line"><span class="keyword">WHERE</span> title <span class="keyword">LIKE</span> "Harry Potter and the%"</span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> <span class="keyword">year</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>6.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 6. Average rating of movies in 2012</span></span><br><span class="line"><span class="keyword">SELECT</span> <span class="built_in">AVG</span>(rating)</span><br><span class="line"><span class="keyword">FROM</span> ratings</span><br><span class="line"><span class="keyword">WHERE</span> movie_id <span class="keyword">IN</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> id <span class="keyword">FROM</span> movies <span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">=</span> <span class="number">2012</span></span><br><span class="line">)</span><br></pre></td></tr></table></figure></div></p><p><strong>7.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 7. All movies and ratings from 2010, in decreasing order by rating (alphabetical for those with same rating)</span></span><br><span class="line"><span class="keyword">SELECT</span> movies.title, ratings.rating</span><br><span class="line"><span class="keyword">FROM</span> movies</span><br><span class="line"><span class="keyword">JOIN</span> ratings</span><br><span class="line"><span class="keyword">ON</span> movies.id <span class="operator">=</span> ratings.movie_id <span class="keyword">AND</span> movies.year <span class="operator">=</span> <span class="number">2010</span> <span class="keyword">AND</span> ratings.rating <span class="operator">&gt;</span> <span class="number">0</span></span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> ratings.rating <span class="keyword">DESC</span>, title <span class="keyword">ASC</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>8.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 8. Names of people who starred in Toy Story</span></span><br><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">WHERE</span> id <span class="keyword">IN</span>(</span><br><span class="line">    <span class="keyword">SELECT</span> person_id</span><br><span class="line">    <span class="keyword">FROM</span> stars</span><br><span class="line">    <span class="keyword">WHERE</span> movie_id <span class="operator">=</span> (</span><br><span class="line">        <span class="keyword">SELECT</span> id</span><br><span class="line">        <span class="keyword">FROM</span> movies</span><br><span class="line">        <span class="keyword">WHERE</span> title <span class="operator">=</span> <span class="string">'Toy Story'</span></span><br><span class="line">    )</span><br><span class="line">);</span><br></pre></td></tr></table></figure></div></p><p><strong>9.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 9. Names of all people who starred in a movie released in 2004, ordered by birth year</span></span><br><span class="line"><span class="keyword">SELECT</span> id, name</span><br><span class="line"><span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">WHERE</span> id <span class="keyword">IN</span>(</span><br><span class="line">    <span class="keyword">SELECT</span> person_id</span><br><span class="line">    <span class="keyword">FROM</span> stars</span><br><span class="line">    <span class="keyword">WHERE</span> movie_id <span class="keyword">IN</span>(</span><br><span class="line">        <span class="keyword">SELECT</span> id</span><br><span class="line">        <span class="keyword">FROM</span> movies</span><br><span class="line">        <span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">=</span> <span class="number">2004</span></span><br><span class="line">    )</span><br><span class="line">)</span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> birth;</span><br></pre></td></tr></table></figure></div></p><p><strong>10.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 10. Names of all directors who have directed a movie that got a rating of at least 9.0</span></span><br><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">WHERE</span> id <span class="keyword">IN</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> person_id</span><br><span class="line">    <span class="keyword">FROM</span> directors</span><br><span class="line">    <span class="keyword">WHERE</span> movie_id <span class="keyword">IN</span> (</span><br><span class="line">        <span class="keyword">SELECT</span> movie_id</span><br><span class="line">        <span class="keyword">FROM</span> ratings</span><br><span class="line">        <span class="keyword">WHERE</span> rating <span class="operator">&gt;=</span> <span class="number">9.0</span></span><br><span class="line">    )</span><br><span class="line">);</span><br></pre></td></tr></table></figure></div></p><p><strong>11.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 11. Titles of the five highest rated movies (in order) that Chadwick Boseman starred in, starting with the highest rated</span></span><br><span class="line"><span class="keyword">SELECT</span> title</span><br><span class="line"><span class="keyword">FROM</span> movies</span><br><span class="line"><span class="keyword">JOIN</span> ratings <span class="keyword">ON</span> ratings.movie_id <span class="operator">=</span> movies.id</span><br><span class="line"><span class="keyword">WHERE</span> id <span class="keyword">IN</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> movie_id</span><br><span class="line">    <span class="keyword">FROM</span> stars</span><br><span class="line">    <span class="keyword">WHERE</span> person_id <span class="operator">=</span> (</span><br><span class="line">        <span class="keyword">SELECT</span> id</span><br><span class="line">        <span class="keyword">FROM</span> people</span><br><span class="line">        <span class="keyword">WHERE</span> name <span class="operator">=</span> <span class="string">'Chadwick Boseman'</span></span><br><span class="line">    )</span><br><span class="line">)</span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> ratings.rating <span class="keyword">DESC</span></span><br><span class="line">LIMIT <span class="number">5</span>;</span><br></pre></td></tr></table></figure></div></p><p><strong>12.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 12. Titles of all of movies in which both Jennifer Lawrence and Bradley Cooper starred</span></span><br><span class="line"><span class="keyword">SELECT</span> title</span><br><span class="line"><span class="keyword">FROM</span> movies</span><br><span class="line"><span class="keyword">WHERE</span> (</span><br><span class="line">    id <span class="keyword">IN</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> movie_id</span><br><span class="line">    <span class="keyword">FROM</span> stars</span><br><span class="line">    <span class="keyword">WHERE</span> person_id <span class="keyword">IN</span> (</span><br><span class="line">        <span class="keyword">SELECT</span> id</span><br><span class="line">        <span class="keyword">FROM</span> people</span><br><span class="line">        <span class="keyword">WHERE</span> name <span class="operator">=</span> <span class="string">'Bradley Cooper'</span></span><br><span class="line">        )</span><br><span class="line">    )</span><br><span class="line">)</span><br><span class="line"><span class="keyword">AND</span> (</span><br><span class="line">    id <span class="keyword">IN</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> movie_id</span><br><span class="line">    <span class="keyword">FROM</span> stars</span><br><span class="line">    <span class="keyword">WHERE</span> person_id <span class="keyword">IN</span> (</span><br><span class="line">        <span class="keyword">SELECT</span> id</span><br><span class="line">        <span class="keyword">FROM</span> people</span><br><span class="line">        <span class="keyword">WHERE</span> name <span class="operator">=</span> <span class="string">'Jennifer Lawrence'</span></span><br><span class="line">        )</span><br><span class="line">    )</span><br><span class="line">);</span><br></pre></td></tr></table></figure></div></p><p><strong>13.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- 13. Names of all people who starred in a movie in which Kevin Bacon also starred</span></span><br><span class="line"><span class="keyword">SELECT</span> name</span><br><span class="line"><span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">JOIN</span> stars <span class="keyword">ON</span> people.id <span class="operator">=</span> stars.person_id</span><br><span class="line"><span class="keyword">JOIN</span> movies <span class="keyword">ON</span> movies.id <span class="operator">=</span> stars.movie_id</span><br><span class="line"><span class="keyword">WHERE</span> movies.id <span class="keyword">IN</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> movies.id</span><br><span class="line">    <span class="keyword">FROM</span> movies</span><br><span class="line">    <span class="keyword">JOIN</span> stars <span class="keyword">ON</span> movies.id <span class="operator">=</span> stars.movie_id</span><br><span class="line">    <span class="keyword">JOIN</span> people <span class="keyword">ON</span> stars.person_id <span class="operator">=</span> people.id</span><br><span class="line">    <span class="keyword">WHERE</span> people.name <span class="operator">=</span> <span class="string">'Kevin Bacon'</span> <span class="keyword">AND</span> people.birth <span class="operator">=</span> <span class="number">1958</span></span><br><span class="line">)</span><br><span class="line"><span class="keyword">AND</span> people.name <span class="operator">!=</span> <span class="string">'Kevin Bacon'</span>;</span><br></pre></td></tr></table></figure></div></p><h2 id="problem-3-fiftyville">Problem 3: <a class="link" href="https://cs50.harvard.edu/x/psets/7/fiftyville/#fiftyville">Fiftyville<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><p><strong>answers.txt</strong> <div class="code-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">The THIEF is: Bruce</span><br><span class="line">The city the thief ESCAPED TO: New York City</span><br><span class="line">The ACCOMPLICE is: Robin</span><br></pre></td></tr></table></figure></div></p><p><strong>log.sql</strong> <div class="code-container" data-rel="Sql"><figure class="iseeu highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- Keep a log of any SQL queries you execute as you solve the mystery.</span></span><br><span class="line"><span class="comment">-- Get the description of the crime scene reports on that day and the street</span></span><br><span class="line"><span class="keyword">SELECT</span> description <span class="keyword">FROM</span> crime_scene_reports</span><br><span class="line">    <span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">=</span> <span class="number">2025</span> <span class="keyword">AND</span> <span class="keyword">month</span> <span class="operator">=</span> <span class="number">7</span> <span class="keyword">AND</span> <span class="keyword">day</span> <span class="operator">=</span> <span class="number">28</span> <span class="keyword">AND</span> street <span class="operator">=</span> <span class="string">'Humphrey Street'</span>;</span><br><span class="line"><span class="comment">-- Theft of the CS50 duck took place at 10:15am at the Humphrey Street bakery. Interviews were conducted today with three witnesses who were present at the time – each of their interview transcripts mentions the bakery.</span></span><br><span class="line"><span class="comment">-- Littering took place at 16:36. No known witnesses.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">--Get the transcript from the reporters</span></span><br><span class="line"><span class="keyword">SELECT</span> transcript <span class="keyword">FROM</span> interviews <span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">=</span> <span class="number">2025</span> <span class="keyword">AND</span> <span class="keyword">month</span> <span class="operator">=</span> <span class="number">7</span> <span class="keyword">AND</span> <span class="keyword">day</span> <span class="operator">=</span> <span class="number">28</span> <span class="keyword">AND</span> transcript <span class="keyword">LIKE</span> "%bakery%";</span><br><span class="line"><span class="comment">-- Sometime within ten minutes of the theft, I saw the thief get into a car in the bakery parking lot and drive away. If you have security footage from the bakery parking lot, you might want to look for cars that left the parking lot in that time frame.</span></span><br><span class="line"><span class="comment">-- I don't know the thief's name, but it was someone I recognized. Earlier this morning, before I arrived at Emma's bakery, I was walking by the ATM on Leggett Street and saw the thief there withdrawing some money.</span></span><br><span class="line"><span class="comment">-- As the thief was leaving the bakery, they called someone who talked to them for less than a minute. In the call, I heard the thief say that they were planning to take the earliest flight out of Fiftyville tomorrow. The thief then asked the person on the other end of the phone to purchase the flight ticket.</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">SELECT</span> bakery_security_logs.activity, bakery_security_logs.license_plate, people.name <span class="keyword">FROM</span> bakery_security_logs</span><br><span class="line"><span class="keyword">JOIN</span> people <span class="keyword">ON</span> bakery_security_logs.license_plate <span class="operator">=</span> people.license_plate</span><br><span class="line"><span class="keyword">WHERE</span> bakery_security_logs.year <span class="operator">=</span> <span class="number">2025</span></span><br><span class="line"><span class="keyword">AND</span> bakery_security_logs.month <span class="operator">=</span> <span class="number">7</span></span><br><span class="line"><span class="keyword">AND</span> bakery_security_logs.day <span class="operator">=</span> <span class="number">28</span></span><br><span class="line"><span class="keyword">AND</span> bakery_security_logs.hour <span class="operator">=</span> <span class="number">10</span></span><br><span class="line"><span class="keyword">AND</span> bakery_security_logs.minute <span class="operator">&gt;=</span> <span class="number">15</span></span><br><span class="line"><span class="keyword">AND</span> bakery_security_logs.minute <span class="operator">&lt;=</span> <span class="number">25</span>;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">+----------+---------------+---------+</span></span><br><span class="line"><span class="comment">| activity | license_plate |  name   |</span></span><br><span class="line"><span class="comment">+----------+---------------+---------+</span></span><br><span class="line"><span class="comment">| exit     | 5P2BI95       | Vanessa |</span></span><br><span class="line"><span class="comment">| exit     | 94KL13X       | Bruce   | *</span></span><br><span class="line"><span class="comment">| exit     | 6P58WS2       | Barry   |</span></span><br><span class="line"><span class="comment">| exit     | 4328GD8       | Luca    |</span></span><br><span class="line"><span class="comment">| exit     | G412CB7       | Sofia   |</span></span><br><span class="line"><span class="comment">| exit     | L93JTIZ       | Iman    |</span></span><br><span class="line"><span class="comment">| exit     | 322W7JE       | Diana   | *</span></span><br><span class="line"><span class="comment">| exit     | 0NTHK55       | Kelsey  |</span></span><br><span class="line"><span class="comment">+----------+---------------+---------+</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">SELECT</span> people.name <span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">JOIN</span> bank_accounts <span class="keyword">ON</span> bank_accounts.person_id <span class="operator">=</span> people.id</span><br><span class="line"><span class="keyword">JOIN</span> atm_transactions <span class="keyword">ON</span> atm_transactions.account_number <span class="operator">=</span> bank_accounts.account_number</span><br><span class="line"><span class="keyword">WHERE</span> atm_transactions.year <span class="operator">=</span> <span class="number">2025</span></span><br><span class="line"><span class="keyword">AND</span> atm_transactions.month <span class="operator">=</span> <span class="number">7</span></span><br><span class="line"><span class="keyword">AND</span> atm_transactions.day <span class="operator">=</span> <span class="number">28</span></span><br><span class="line"><span class="keyword">AND</span> atm_transactions.atm_location <span class="operator">=</span> <span class="string">'Leggett Street'</span></span><br><span class="line"><span class="keyword">AND</span> atm_transactions.transaction_type <span class="operator">=</span> <span class="string">'withdraw'</span>;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">+---------+</span></span><br><span class="line"><span class="comment">|  name   |</span></span><br><span class="line"><span class="comment">+---------+</span></span><br><span class="line"><span class="comment">| Bruce   | *</span></span><br><span class="line"><span class="comment">| Diana   | *</span></span><br><span class="line"><span class="comment">| Brooke  |</span></span><br><span class="line"><span class="comment">| Kenny   |</span></span><br><span class="line"><span class="comment">| Iman    |</span></span><br><span class="line"><span class="comment">| Luca    |</span></span><br><span class="line"><span class="comment">| Taylor  |</span></span><br><span class="line"><span class="comment">| Benista |</span></span><br><span class="line"><span class="comment">+---------+</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">UPDATE</span> phone_calls</span><br><span class="line"><span class="keyword">SET</span> receiver <span class="operator">=</span> people.name</span><br><span class="line"><span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">WHERE</span> phone_calls.receiver <span class="operator">=</span> people.phone_number;</span><br><span class="line"></span><br><span class="line"><span class="keyword">UPDATE</span> phone_calls</span><br><span class="line"><span class="keyword">SET</span> caller <span class="operator">=</span> people.name</span><br><span class="line"><span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">WHERE</span> phone_calls.caller <span class="operator">=</span> people.phone_number;</span><br><span class="line"></span><br><span class="line"><span class="keyword">SELECT</span> caller, receiver <span class="keyword">FROM</span> phone_calls</span><br><span class="line"><span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">=</span> <span class="number">2025</span></span><br><span class="line"><span class="keyword">AND</span> <span class="keyword">month</span> <span class="operator">=</span> <span class="number">7</span></span><br><span class="line"><span class="keyword">AND</span> <span class="keyword">day</span> <span class="operator">=</span> <span class="number">28</span></span><br><span class="line"><span class="keyword">AND</span> duration <span class="operator">&lt;</span> <span class="number">60</span>;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">+---------+------------+</span></span><br><span class="line"><span class="comment">| caller  |  receiver  |</span></span><br><span class="line"><span class="comment">+---------+------------+</span></span><br><span class="line"><span class="comment">| Sofia   | Jack       |</span></span><br><span class="line"><span class="comment">| Kelsey  | Larry      |</span></span><br><span class="line"><span class="comment">| Bruce   | Robin      | *</span></span><br><span class="line"><span class="comment">| Kelsey  | Melissa    |</span></span><br><span class="line"><span class="comment">| Taylor  | James      |</span></span><br><span class="line"><span class="comment">| Diana   | Philip     | *</span></span><br><span class="line"><span class="comment">| Carina  | Jacqueline |</span></span><br><span class="line"><span class="comment">| Kenny   | Doris      |</span></span><br><span class="line"><span class="comment">| Benista | Anna       |</span></span><br><span class="line"><span class="comment">+---------+------------+</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">SELECT</span> id, origin_airport_id, destination_airport_id <span class="keyword">FROM</span> flights</span><br><span class="line"><span class="keyword">WHERE</span> <span class="keyword">year</span> <span class="operator">=</span> <span class="number">2025</span></span><br><span class="line"><span class="keyword">AND</span> <span class="keyword">month</span> <span class="operator">=</span> <span class="number">7</span></span><br><span class="line"><span class="keyword">AND</span> <span class="keyword">day</span> <span class="operator">=</span> <span class="number">29</span></span><br><span class="line"><span class="keyword">AND</span> origin_airport_id <span class="operator">=</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> id <span class="keyword">FROM</span> airports</span><br><span class="line">    <span class="keyword">WHERE</span> city <span class="operator">=</span> <span class="string">'Fiftyville'</span></span><br><span class="line">)</span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> flights.hour <span class="keyword">ASC</span>;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">+----+-------------------+------------------------+</span></span><br><span class="line"><span class="comment">| id | origin_airport_id | destination_airport_id |</span></span><br><span class="line"><span class="comment">+----+-------------------+------------------------+</span></span><br><span class="line"><span class="comment">| 36 | 8                 | 4                      | *</span></span><br><span class="line"><span class="comment">| 43 | 8                 | 1                      |</span></span><br><span class="line"><span class="comment">| 23 | 8                 | 11                     |</span></span><br><span class="line"><span class="comment">| 53 | 8                 | 9                      |</span></span><br><span class="line"><span class="comment">| 18 | 8                 | 6                      |</span></span><br><span class="line"><span class="comment">+----+-------------------+------------------------+</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">SELECT</span> city <span class="keyword">FROM</span> airports</span><br><span class="line"><span class="keyword">WHERE</span> id <span class="operator">=</span> <span class="number">4</span>;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">+---------------+</span></span><br><span class="line"><span class="comment">|     city      |</span></span><br><span class="line"><span class="comment">+---------------+</span></span><br><span class="line"><span class="comment">| New York City |</span></span><br><span class="line"><span class="comment">+---------------+</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">SELECT</span> name <span class="keyword">FROM</span> people</span><br><span class="line"><span class="keyword">WHERE</span> people.passport_number <span class="keyword">IN</span> (</span><br><span class="line">    <span class="keyword">SELECT</span> passengers.passport_number <span class="keyword">from</span> passengers</span><br><span class="line">    <span class="keyword">WHERE</span> flight_id <span class="operator">=</span> <span class="number">36</span></span><br><span class="line">);</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">+--------+</span></span><br><span class="line"><span class="comment">|  name  |</span></span><br><span class="line"><span class="comment">+--------+</span></span><br><span class="line"><span class="comment">| Kenny  |</span></span><br><span class="line"><span class="comment">| Sofia  |</span></span><br><span class="line"><span class="comment">| Taylor |</span></span><br><span class="line"><span class="comment">| Luca   |</span></span><br><span class="line"><span class="comment">| Kelsey |</span></span><br><span class="line"><span class="comment">| Edward |</span></span><br><span class="line"><span class="comment">| Bruce  | *</span></span><br><span class="line"><span class="comment">| Doris  |</span></span><br><span class="line"><span class="comment">+--------+</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure></div></p>]]>
    </content>
    <id>http://kinghua0629.com/2026/02/21/CS50-Problem-Set-7/</id>
    <link href="http://kinghua0629.com/2026/02/21/CS50-Problem-Set-7/"/>
    <published>2026-02-21T06:34:44.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-7">CS50 Problem Set 7</h1>
<p>Here’s my answer for the CS50 Problem Set 7. Hope that will help you
a bit.</p>
<h2 i]]>
    </summary>
    <title>CS50 Problem Set 7</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-6">CS50 Problem Set 6</h1><p>Here’s my answer for the CS50 Problem Set 6. Hope that will help youa bit.</p><h2 id="problem-1-hello-again">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/6/hello/#hello-again">Hello,Again<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">name = <span class="built_in">input</span>(<span class="string">"What is your name? "</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">print</span>(<span class="string">f"hello, <span class="subst">{name}</span>"</span>)</span><br></pre></td></tr></table></figure></div><h2 id="probelm-2-mario">Probelm 2: <a class="link" href="https://cs50.harvard.edu/x/psets/6/mario/more/#mario">Mario<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line">    <span class="keyword">try</span>:</span><br><span class="line">        h = <span class="built_in">int</span>(<span class="built_in">input</span>(<span class="string">"Height: "</span>))</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> <span class="number">1</span> &lt;= h &lt;= <span class="number">8</span>:</span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">""</span>, end=<span class="string">''</span>)</span><br><span class="line">    <span class="keyword">except</span> ValueError:</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">""</span>, end=<span class="string">''</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1</span>, h+<span class="number">1</span>):</span><br><span class="line">    <span class="keyword">for</span> j <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, h-i):</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">" "</span>, end=<span class="string">''</span>)</span><br><span class="line"><span class="comment">#        j += 1</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> k <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, i):</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">"#"</span>, end=<span class="string">''</span>)</span><br><span class="line"><span class="comment">#        k += 1</span></span><br><span class="line"></span><br><span class="line">    <span class="built_in">print</span>(<span class="string">"  "</span>, end=<span class="string">''</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> m <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, i):</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">"#"</span>, end=<span class="string">''</span>)</span><br><span class="line"><span class="comment">#        m += 1</span></span><br><span class="line"></span><br><span class="line">    <span class="built_in">print</span>()</span><br></pre></td></tr></table></figure></div><h2 id="problem-3-credit">Problem 3: <a class="link" href="https://cs50.harvard.edu/x/psets/6/credit/#credit">Credit<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line">    number = <span class="built_in">input</span>(<span class="string">"Number: "</span>)</span><br><span class="line">    <span class="keyword">if</span> number.isdigit() == <span class="literal">True</span>:</span><br><span class="line">        <span class="keyword">break</span></span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        number = <span class="built_in">input</span>(<span class="string">"Number: "</span>)</span><br><span class="line"></span><br><span class="line">reversed_number = number[::-<span class="number">1</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> <span class="built_in">len</span>(number) == <span class="number">15</span>:</span><br><span class="line">    <span class="built_in">sum</span> = <span class="number">0</span></span><br><span class="line">    temp_sum_1 = <span class="number">0</span></span><br><span class="line">    temp_sum_2 = <span class="number">0</span></span><br><span class="line">    <span class="keyword">if</span> number[:<span class="number">2</span>] != <span class="string">"37"</span> <span class="keyword">and</span> number[:<span class="number">2</span>] != <span class="string">"34"</span>:</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1</span>, <span class="number">15</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i]) * <span class="number">2</span></span><br><span class="line">            <span class="keyword">if</span> temp &gt; <span class="number">9</span>:</span><br><span class="line">                temp = temp // <span class="number">10</span> + temp % <span class="number">10</span></span><br><span class="line">            temp_sum_1 += temp</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, <span class="number">15</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i])</span><br><span class="line">            temp_sum_2 += temp</span><br><span class="line"></span><br><span class="line">        <span class="built_in">sum</span> = temp_sum_1 + temp_sum_2</span><br><span class="line">        <span class="keyword">if</span> <span class="built_in">sum</span> % <span class="number">10</span> == <span class="number">0</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"AMEX"</span>)</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">elif</span> <span class="built_in">len</span>(number) == <span class="number">13</span>:</span><br><span class="line">    <span class="built_in">sum</span> = <span class="number">0</span></span><br><span class="line">    temp_sum_1 = <span class="number">0</span></span><br><span class="line">    temp_sum_2 = <span class="number">0</span></span><br><span class="line">    <span class="keyword">if</span> number[:<span class="number">1</span>] != <span class="string">"4"</span>:</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1</span>, <span class="number">13</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i]) * <span class="number">2</span></span><br><span class="line">            <span class="keyword">if</span> temp &gt; <span class="number">9</span>:</span><br><span class="line">                temp = temp // <span class="number">10</span> + temp % <span class="number">10</span></span><br><span class="line">            temp_sum_1 += temp</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, <span class="number">13</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i])</span><br><span class="line">            temp_sum_2 += temp</span><br><span class="line"></span><br><span class="line">        <span class="built_in">sum</span> = temp_sum_1 + temp_sum_2</span><br><span class="line">        <span class="keyword">if</span> <span class="built_in">sum</span> % <span class="number">10</span> == <span class="number">0</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"VISA"</span>)</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">elif</span> <span class="built_in">len</span>(number) == <span class="number">16</span>:</span><br><span class="line">    <span class="built_in">sum</span> = <span class="number">0</span></span><br><span class="line">    temp_sum_1 = <span class="number">0</span></span><br><span class="line">    temp_sum_2 = <span class="number">0</span></span><br><span class="line">    <span class="keyword">if</span> number[:<span class="number">1</span>] != <span class="string">"4"</span> <span class="keyword">and</span> number[:<span class="number">2</span>] != <span class="string">"51"</span> <span class="keyword">and</span> number[:<span class="number">2</span>] != <span class="string">"52"</span> <span class="keyword">and</span> number[:<span class="number">2</span>] != <span class="string">"53"</span> <span class="keyword">and</span> number[:<span class="number">2</span>] != <span class="string">"54"</span> <span class="keyword">and</span> number[:<span class="number">2</span>] != <span class="string">"55"</span>:</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br><span class="line">    <span class="keyword">elif</span> number[:<span class="number">1</span>] == <span class="string">"4"</span>:</span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1</span>, <span class="number">16</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i]) * <span class="number">2</span></span><br><span class="line">            <span class="keyword">if</span> temp &gt; <span class="number">9</span>:</span><br><span class="line">                temp = temp // <span class="number">10</span> + temp % <span class="number">10</span></span><br><span class="line">            temp_sum_1 += temp</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, <span class="number">16</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i])</span><br><span class="line">            temp_sum_2 += temp</span><br><span class="line"></span><br><span class="line">        <span class="built_in">sum</span> = temp_sum_1 + temp_sum_2</span><br><span class="line">        <span class="keyword">if</span> <span class="built_in">sum</span> % <span class="number">10</span> == <span class="number">0</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"VISA"</span>)</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">1</span>, <span class="number">16</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i]) * <span class="number">2</span></span><br><span class="line">            <span class="keyword">if</span> temp &gt; <span class="number">9</span>:</span><br><span class="line">                temp = temp // <span class="number">10</span> + temp % <span class="number">10</span></span><br><span class="line">            temp_sum_1 += temp</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, <span class="number">16</span>, <span class="number">2</span>):</span><br><span class="line">            temp = <span class="built_in">int</span>(reversed_number[i])</span><br><span class="line">            temp_sum_2 += temp</span><br><span class="line"></span><br><span class="line">        <span class="built_in">sum</span> = temp_sum_1 + temp_sum_2</span><br><span class="line">        <span class="keyword">if</span> <span class="built_in">sum</span> % <span class="number">10</span> == <span class="number">0</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"MASTERCARD"</span>)</span><br><span class="line">        <span class="keyword">else</span>:</span><br><span class="line">            <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line">    <span class="built_in">print</span>(<span class="string">"INVALID"</span>)</span><br></pre></td></tr></table></figure></div><h2 id="problem-4-readability">Problem 4: <a class="link" href="https://cs50.harvard.edu/x/psets/6/readability/#readability">Readability<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">def</span> <span class="title function_">words</span>(<span class="params">text</span>):</span><br><span class="line">    words = <span class="number">1</span></span><br><span class="line">    <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, <span class="built_in">len</span>(text)):</span><br><span class="line">        <span class="keyword">if</span> text[i] == <span class="string">' '</span>:</span><br><span class="line">            words += <span class="number">1</span></span><br><span class="line">    <span class="keyword">return</span> words</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">letters</span>(<span class="params">text</span>):</span><br><span class="line">    letters = <span class="number">0</span></span><br><span class="line">    <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, <span class="built_in">len</span>(text)):</span><br><span class="line">        <span class="keyword">if</span> text[i].isalpha() == <span class="literal">True</span>:</span><br><span class="line">            letters += <span class="number">1</span></span><br><span class="line">    <span class="keyword">return</span> letters</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">sentences</span>(<span class="params">text</span>):</span><br><span class="line">    sentences = <span class="number">0</span></span><br><span class="line">    <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">0</span>, <span class="built_in">len</span>(text)):</span><br><span class="line">        <span class="keyword">if</span> text[i] == <span class="string">'.'</span> <span class="keyword">or</span> text[i] == <span class="string">'!'</span> <span class="keyword">or</span> text[i] == <span class="string">'?'</span>:</span><br><span class="line">            sentences += <span class="number">1</span></span><br><span class="line">    <span class="keyword">return</span> sentences</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">text = <span class="built_in">input</span>(<span class="string">"Text: "</span>)</span><br><span class="line"></span><br><span class="line">index = <span class="built_in">round</span>(<span class="number">0.0588</span> * letters(text) / words(text) * <span class="number">100</span> -</span><br><span class="line">              <span class="number">0.296</span> * sentences(text) / words(text) * <span class="number">100</span> - <span class="number">15.8</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> index &lt; <span class="number">1</span>:</span><br><span class="line">    <span class="built_in">print</span>(<span class="string">"Before Grade 1"</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">elif</span> index &gt;= <span class="number">16</span>:</span><br><span class="line">    <span class="built_in">print</span>(<span class="string">"Grade 16+"</span>)</span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line">    <span class="built_in">print</span>(<span class="string">f"Grade <span class="subst">{index}</span>"</span>)</span><br></pre></td></tr></table></figure></div><h2 id="problem-5-dna">Problem 5: <a class="link" href="https://cs50.harvard.edu/x/psets/6/dna/#dna">DNA<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> csv</span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">main</span>():</span><br><span class="line"></span><br><span class="line">    <span class="comment"># <span class="doctag">TODO:</span> Check for command-line usage</span></span><br><span class="line">    <span class="keyword">if</span> <span class="built_in">len</span>(sys.argv) != <span class="number">3</span>:</span><br><span class="line">        <span class="built_in">print</span>(<span class="string">"Missing command line arguments! "</span>)</span><br><span class="line">        sys.exit()</span><br><span class="line"></span><br><span class="line">    <span class="comment"># <span class="doctag">TODO:</span> Read database file into a variable</span></span><br><span class="line">    database = []</span><br><span class="line">    <span class="keyword">with</span> <span class="built_in">open</span>(sys.argv[<span class="number">1</span>], <span class="string">"r"</span>) <span class="keyword">as</span> database_file:</span><br><span class="line">        reader = csv.DictReader(database_file)</span><br><span class="line">        <span class="keyword">for</span> row <span class="keyword">in</span> reader:</span><br><span class="line">            database.append(row)</span><br><span class="line"></span><br><span class="line">    <span class="comment"># <span class="doctag">TODO:</span> Read DNA sequence file into a variable</span></span><br><span class="line">    sequence = []</span><br><span class="line">    <span class="keyword">with</span> <span class="built_in">open</span>(sys.argv[<span class="number">2</span>], <span class="string">"r"</span>) <span class="keyword">as</span> sequence_file:</span><br><span class="line">        sequence = sequence_file.read()</span><br><span class="line"></span><br><span class="line">    <span class="comment"># <span class="doctag">TODO:</span> Find longest match of each STR in DNA sequence</span></span><br><span class="line">    str_count = {}  <span class="comment"># Initlize a list</span></span><br><span class="line">    <span class="keyword">for</span> key <span class="keyword">in</span> database[<span class="number">0</span>].keys():</span><br><span class="line">        <span class="keyword">if</span> key == <span class="string">"name"</span>:</span><br><span class="line">            <span class="keyword">continue</span></span><br><span class="line">        <span class="comment"># When you insert a value but the key doesn't exist, python will create the key automatically and insert the value</span></span><br><span class="line">        str_count[key] = longest_match(sequence, key)</span><br><span class="line"></span><br><span class="line">    <span class="comment"># <span class="doctag">TODO:</span> Check database for matching profiles</span></span><br><span class="line">    <span class="keyword">for</span> row <span class="keyword">in</span> database:</span><br><span class="line">        <span class="keyword">match</span> = <span class="literal">True</span></span><br><span class="line">        <span class="comment"># 遍历所有的key，并去除'name'</span></span><br><span class="line">        <span class="keyword">for</span> key <span class="keyword">in</span> row.keys():</span><br><span class="line">            <span class="keyword">if</span> key == <span class="string">"name"</span>:</span><br><span class="line">                <span class="keyword">continue</span></span><br><span class="line">            <span class="comment"># 当row[key]与str_count[key]不相等时，返回false，继续下一个key</span></span><br><span class="line">            <span class="keyword">if</span> str_count[key] != <span class="built_in">int</span>(row[key]):</span><br><span class="line">                <span class="keyword">match</span> = <span class="literal">False</span></span><br><span class="line">                <span class="keyword">break</span></span><br><span class="line">        <span class="keyword">if</span> <span class="keyword">match</span>:</span><br><span class="line">            <span class="built_in">print</span>(row[<span class="string">"name"</span>])</span><br><span class="line">            <span class="keyword">return</span></span><br><span class="line">    <span class="built_in">print</span>(<span class="string">"No match"</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">longest_match</span>(<span class="params">sequence, subsequence</span>):</span><br><span class="line">    <span class="string">"""Returns length of longest run of subsequence in sequence."""</span></span><br><span class="line"></span><br><span class="line">    <span class="comment"># Initialize variables</span></span><br><span class="line">    longest_run = <span class="number">0</span></span><br><span class="line">    subsequence_length = <span class="built_in">len</span>(subsequence)</span><br><span class="line">    sequence_length = <span class="built_in">len</span>(sequence)</span><br><span class="line"></span><br><span class="line">    <span class="comment"># Check each character in sequence for most consecutive runs of subsequence</span></span><br><span class="line">    <span class="keyword">for</span> i <span class="keyword">in</span> <span class="built_in">range</span>(sequence_length):</span><br><span class="line"></span><br><span class="line">        <span class="comment"># Initialize count of consecutive runs</span></span><br><span class="line">        count = <span class="number">0</span></span><br><span class="line"></span><br><span class="line">        <span class="comment"># Check for a subsequence match in a "substring" (a subset of characters) within sequence</span></span><br><span class="line">        <span class="comment"># If a match, move substring to next potential match in sequence</span></span><br><span class="line">        <span class="comment"># Continue moving substring and checking for matches until out of consecutive matches</span></span><br><span class="line">        <span class="keyword">while</span> <span class="literal">True</span>:</span><br><span class="line"></span><br><span class="line">            <span class="comment"># Adjust substring start and end</span></span><br><span class="line">            start = i + count * subsequence_length</span><br><span class="line">            end = start + subsequence_length</span><br><span class="line"></span><br><span class="line">            <span class="comment"># If there is a match in the substring</span></span><br><span class="line">            <span class="keyword">if</span> sequence[start:end] == subsequence:</span><br><span class="line">                count += <span class="number">1</span></span><br><span class="line"></span><br><span class="line">            <span class="comment"># If there is no match in the substring</span></span><br><span class="line">            <span class="keyword">else</span>:</span><br><span class="line">                <span class="keyword">break</span></span><br><span class="line"></span><br><span class="line">        <span class="comment"># Update most consecutive matches found</span></span><br><span class="line">        longest_run = <span class="built_in">max</span>(longest_run, count)</span><br><span class="line"></span><br><span class="line">    <span class="comment"># After checking for runs at each character in sequence, return longest run found</span></span><br><span class="line">    <span class="keyword">return</span> longest_run</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">main()</span><br></pre></td></tr></table></figure></div>]]>
    </content>
    <id>http://kinghua0629.com/2026/02/16/CS50-Problem-Set-6/</id>
    <link href="http://kinghua0629.com/2026/02/16/CS50-Problem-Set-6/"/>
    <published>2026-02-16T12:44:57.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-6">CS50 Problem Set 6</h1>
<p>Here’s my answer for the CS50 Problem Set 6. Hope that will help you
a bit.</p>
<h2 i]]>
    </summary>
    <title>CS50 Problem Set 6</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-5">CS50 Problem Set 5</h1><p>Here’s my answer for the CS50 Problem Set 5. Hope that will help youa bit.</p><h2 id="problem-1-inheritance">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/5/inheritance/#inheritance">Inheritance<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Simulate genetic inheritance of blood type</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> _DEFAULT_SOURCE</span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdbool.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdlib.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;time.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Each person has two parents and two alleles</span></span><br><span class="line"><span class="keyword">typedef</span> <span class="class"><span class="keyword">struct</span> <span class="title">person</span></span></span><br><span class="line"><span class="class">{</span></span><br><span class="line">    <span class="class"><span class="keyword">struct</span> <span class="title">person</span> *<span class="title">parents</span>[2];</span></span><br><span class="line">    <span class="type">char</span> alleles[<span class="number">2</span>];</span><br><span class="line">} person;</span><br><span class="line"></span><br><span class="line"><span class="type">const</span> <span class="type">int</span> GENERATIONS = <span class="number">3</span>;</span><br><span class="line"><span class="type">const</span> <span class="type">int</span> INDENT_LENGTH = <span class="number">4</span>;</span><br><span class="line"></span><br><span class="line">person *<span class="title function_">create_family</span><span class="params">(<span class="type">int</span> generations)</span>;</span><br><span class="line"><span class="type">void</span> <span class="title function_">print_family</span><span class="params">(person *p, <span class="type">int</span> generation)</span>;</span><br><span class="line"><span class="type">void</span> <span class="title function_">free_family</span><span class="params">(person *p)</span>;</span><br><span class="line"><span class="type">char</span> <span class="title function_">random_allele</span><span class="params">()</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// Seed random number generator</span></span><br><span class="line">    srandom(time(<span class="number">0</span>));</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Create a new family with three generations</span></span><br><span class="line">    person *p = create_family(GENERATIONS);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Print family tree of blood types</span></span><br><span class="line">    print_family(p, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Free memory</span></span><br><span class="line">    free_family(p);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Create a new individual with `generations`</span></span><br><span class="line">person *<span class="title function_">create_family</span><span class="params">(<span class="type">int</span> generations)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Allocate memory for new person</span></span><br><span class="line">    person *p = <span class="built_in">malloc</span>(<span class="keyword">sizeof</span>(person));</span><br><span class="line"></span><br><span class="line">    <span class="comment">// If there are still generations left to create</span></span><br><span class="line">    <span class="keyword">if</span> (generations &gt; <span class="number">1</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="comment">// Create two new parents for current person by recursively calling create_family</span></span><br><span class="line">        person *parent0 = create_family(generations - <span class="number">1</span>);</span><br><span class="line">        person *parent1 = create_family(generations - <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// <span class="doctag">TODO:</span> Set parent pointers for current person</span></span><br><span class="line">        p-&gt;parents[<span class="number">0</span>] = parent0;</span><br><span class="line">        p-&gt;parents[<span class="number">1</span>] = parent1;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// <span class="doctag">TODO:</span> Randomly assign current person's alleles based on the alleles of their parents</span></span><br><span class="line">        p-&gt;alleles[<span class="number">0</span>] = parent0-&gt;alleles[random() % <span class="number">2</span>];</span><br><span class="line">        p-&gt;alleles[<span class="number">1</span>] = parent1-&gt;alleles[random() % <span class="number">2</span>];</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// If there are no generations left to create</span></span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">        <span class="comment">// <span class="doctag">TODO:</span> Set parent pointers to NULL</span></span><br><span class="line">        p-&gt;parents[<span class="number">0</span>] = <span class="literal">NULL</span>;</span><br><span class="line">        p-&gt;parents[<span class="number">1</span>] = <span class="literal">NULL</span>;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// <span class="doctag">TODO:</span> Randomly assign alleles</span></span><br><span class="line">        p-&gt;alleles[<span class="number">0</span>] = random_allele();</span><br><span class="line">        p-&gt;alleles[<span class="number">1</span>] = random_allele();</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Return newly created person</span></span><br><span class="line">    <span class="keyword">return</span> p;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="literal">NULL</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Free `p` and all ancestors of `p`.</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">free_family</span><span class="params">(person *p)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Handle base case</span></span><br><span class="line">    <span class="keyword">if</span> (p == <span class="literal">NULL</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Free parents recursively</span></span><br><span class="line">    free_family(p-&gt;parents[<span class="number">0</span>]);</span><br><span class="line">    free_family(p-&gt;parents[<span class="number">1</span>]);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Free child</span></span><br><span class="line">    <span class="built_in">free</span>(p);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Print each family member and their alleles.</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">print_family</span><span class="params">(person *p, <span class="type">int</span> generation)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// Handle base case</span></span><br><span class="line">    <span class="keyword">if</span> (p == <span class="literal">NULL</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Print indentation</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; generation * INDENT_LENGTH; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">" "</span>);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Print person</span></span><br><span class="line">    <span class="keyword">if</span> (generation == <span class="number">0</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Child (Generation %i): blood type %c%c\n"</span>, generation, p-&gt;alleles[<span class="number">0</span>],</span><br><span class="line">               p-&gt;alleles[<span class="number">1</span>]);</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span> (generation == <span class="number">1</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Parent (Generation %i): blood type %c%c\n"</span>, generation, p-&gt;alleles[<span class="number">0</span>],</span><br><span class="line">               p-&gt;alleles[<span class="number">1</span>]);</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; generation - <span class="number">2</span>; i++)</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">printf</span>(<span class="string">"Great-"</span>);</span><br><span class="line">        }</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Grandparent (Generation %i): blood type %c%c\n"</span>, generation, p-&gt;alleles[<span class="number">0</span>],</span><br><span class="line">               p-&gt;alleles[<span class="number">1</span>]);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Print parents of current generation</span></span><br><span class="line">    print_family(p-&gt;parents[<span class="number">0</span>], generation + <span class="number">1</span>);</span><br><span class="line">    print_family(p-&gt;parents[<span class="number">1</span>], generation + <span class="number">1</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Randomly chooses a blood type allele.</span></span><br><span class="line"><span class="type">char</span> <span class="title function_">random_allele</span><span class="params">()</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> r = random() % <span class="number">3</span>;</span><br><span class="line">    <span class="keyword">if</span> (r == <span class="number">0</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'A'</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span> (r == <span class="number">1</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'B'</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'O'</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-2-speller">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/5/speller/#speller">Speller<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Implements a dictionary's functionality</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;ctype.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdbool.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdlib.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;string.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;strings.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">"dictionary.h"</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Represents a node in a hash table</span></span><br><span class="line"><span class="keyword">typedef</span> <span class="class"><span class="keyword">struct</span> <span class="title">node</span></span></span><br><span class="line"><span class="class">{</span></span><br><span class="line">    <span class="type">char</span> word[LENGTH + <span class="number">1</span>];</span><br><span class="line">    <span class="class"><span class="keyword">struct</span> <span class="title">node</span> *<span class="title">next</span>;</span></span><br><span class="line">} node;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> word_counter = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// <span class="doctag">TODO:</span> Choose number of buckets in hash table</span></span><br><span class="line"><span class="type">const</span> <span class="type">unsigned</span> <span class="type">int</span> N = <span class="number">26</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Hash table</span></span><br><span class="line">node *table[N];</span><br><span class="line"></span><br><span class="line"><span class="comment">// Returns true if word is in dictionary, else false</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">check</span><span class="params">(<span class="type">const</span> <span class="type">char</span> *word)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">    <span class="comment">// Hash the word to obtain its hash value</span></span><br><span class="line">    <span class="type">int</span> hash_value = hash(word);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Search the hash table at the location specified by the word’s hash value</span></span><br><span class="line">    <span class="comment">// Return "true" if the word is found</span></span><br><span class="line">    node *cursor = table[hash_value];</span><br><span class="line">    <span class="keyword">while</span> (cursor != <span class="literal">NULL</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (strcasecmp(cursor-&gt;word, word) == <span class="number">0</span>)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        }</span><br><span class="line">        <span class="keyword">else</span></span><br><span class="line">        {</span><br><span class="line">            cursor = cursor-&gt;next;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Hashes word to a number</span></span><br><span class="line"><span class="type">unsigned</span> <span class="type">int</span> <span class="title function_">hash</span><span class="params">(<span class="type">const</span> <span class="type">char</span> *word)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Improve this hash function</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">toupper</span>(word[<span class="number">0</span>]) - <span class="string">'A'</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Loads dictionary into memory, returning true if successful, else false</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">load</span><span class="params">(<span class="type">const</span> <span class="type">char</span> *dictionary)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">    <span class="comment">// Make sure there is no garbage values</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; N; i++)</span><br><span class="line">    {</span><br><span class="line">        table[i] = <span class="literal">NULL</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Open the dictionary file</span></span><br><span class="line">    FILE *dict = fopen(dictionary, <span class="string">"r"</span>);</span><br><span class="line">    <span class="keyword">if</span> (dict == <span class="literal">NULL</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"The dictinary does not exist.\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Read strings from file one at a time</span></span><br><span class="line">    <span class="type">char</span> temp_word[LENGTH];</span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (<span class="built_in">fscanf</span>(dict, <span class="string">"%s"</span>, temp_word) != EOF)</span><br><span class="line">    {</span><br><span class="line">        <span class="comment">// Create space for a new hash table node</span></span><br><span class="line">        node *new_word = <span class="built_in">malloc</span>(<span class="keyword">sizeof</span>(node));</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Copy the word into the new node</span></span><br><span class="line">        <span class="built_in">strcpy</span>(new_word-&gt;word, temp_word);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Hash the word to obtain its hash value</span></span><br><span class="line">        <span class="type">int</span> hash_value = hash(temp_word);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Insert the new node into the hash table (using the index specified by its hash value)</span></span><br><span class="line">        new_word-&gt;next = table[hash_value];</span><br><span class="line">        table[hash_value] = new_word;</span><br><span class="line">        word_counter += <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// close the dictinary file</span></span><br><span class="line">    fclose(dict);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Returns number of words in dictionary if loaded, else 0 if not yet loaded</span></span><br><span class="line"><span class="type">unsigned</span> <span class="type">int</span> <span class="title function_">size</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">    <span class="keyword">return</span> word_counter;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Unloads dictionary from memory, returning true if successful, else false</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">unload</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; N; i++)</span><br><span class="line">    {</span><br><span class="line">        node *tmp = table[i];</span><br><span class="line">        node *cursor = table[i];</span><br><span class="line"></span><br><span class="line">        <span class="keyword">while</span> (cursor != <span class="literal">NULL</span>)</span><br><span class="line">        {</span><br><span class="line">            cursor = cursor-&gt;next;</span><br><span class="line">            <span class="built_in">free</span>(tmp);</span><br><span class="line">            tmp = cursor;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>]]>
    </content>
    <id>http://kinghua0629.com/2026/02/16/CS50-Problem-Set-5/</id>
    <link href="http://kinghua0629.com/2026/02/16/CS50-Problem-Set-5/"/>
    <published>2026-02-16T12:40:38.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-5">CS50 Problem Set 5</h1>
<p>Here’s my answer for the CS50 Problem Set 5. Hope that will help you
a bit.</p>
<h2 i]]>
    </summary>
    <title>CS50 Problem Set 5</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-4">CS50 Problem Set 4</h1><p>Here’s my answer for the CS50 Problem Set 4. Hope that will help youa bit.</p><h2 id="problem-1-volume">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/4/volume/#volume">Volume<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Modifies the volume of an audio file</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdint.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdlib.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Number of bytes in .wav header</span></span><br><span class="line"><span class="type">const</span> <span class="type">int</span> HEADER_SIZE = <span class="number">44</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">int</span> argc, <span class="type">char</span> *argv[])</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// Check command-line arguments</span></span><br><span class="line">    <span class="keyword">if</span> (argc != <span class="number">4</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Usage: ./volume input.wav output.wav factor\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Open files and determine scaling factor</span></span><br><span class="line">    FILE *input = fopen(argv[<span class="number">1</span>], <span class="string">"r"</span>);</span><br><span class="line">    <span class="keyword">if</span> (input == <span class="literal">NULL</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Could not open file.\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    FILE *output = fopen(argv[<span class="number">2</span>], <span class="string">"w"</span>);</span><br><span class="line">    <span class="keyword">if</span> (output == <span class="literal">NULL</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Could not open file.\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="type">float</span> factor = atof(argv[<span class="number">3</span>]);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Copy header from input file to output file</span></span><br><span class="line">    <span class="type">uint8_t</span> header[<span class="number">44</span>];</span><br><span class="line">    fread(&amp;header, <span class="number">44</span>, <span class="number">1</span>, input);</span><br><span class="line">    fwrite(&amp;header, <span class="number">44</span>, <span class="number">1</span>, output);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// <span class="doctag">TODO:</span> Read samples from input file and write updated data to output file</span></span><br><span class="line">    <span class="type">int16_t</span> buffer;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (fread(&amp;buffer, <span class="keyword">sizeof</span>(<span class="type">int16_t</span>), <span class="number">1</span>, input))</span><br><span class="line">    {</span><br><span class="line">        buffer *= factor;</span><br><span class="line">        fwrite(&amp;buffer, <span class="keyword">sizeof</span>(<span class="type">int16_t</span>), <span class="number">1</span>, output);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Close files</span></span><br><span class="line">    fclose(input);</span><br><span class="line">    fclose(output);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-2-filter">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/4/filter/less/#filter">Filter<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">"helpers.h"</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;math.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Convert image to grayscale</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">grayscale</span><span class="params">(<span class="type">int</span> height, <span class="type">int</span> width, RGBTRIPLE image[height][width])</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> avg = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; height; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; width; j++)</span><br><span class="line">        {</span><br><span class="line">            avg = (<span class="type">int</span>) round((image[i][j].rgbtRed + image[i][j].rgbtGreen + image[i][j].rgbtBlue) /</span><br><span class="line">                              <span class="number">3.0</span>);</span><br><span class="line"></span><br><span class="line">            image[i][j].rgbtRed = avg;</span><br><span class="line">            image[i][j].rgbtGreen = avg;</span><br><span class="line">            image[i][j].rgbtBlue = avg;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Convert image to sepia</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">sepia</span><span class="params">(<span class="type">int</span> height, <span class="type">int</span> width, RGBTRIPLE image[height][width])</span></span><br><span class="line">{</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; height; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; width; j++)</span><br><span class="line">        {</span><br><span class="line">            <span class="type">int</span> sepiaRed = (<span class="type">int</span>) round(.<span class="number">393</span> * image[i][j].rgbtRed + .<span class="number">769</span> * image[i][j].rgbtGreen +</span><br><span class="line">                                       .<span class="number">189</span> * image[i][j].rgbtBlue);</span><br><span class="line">            <span class="type">int</span> sepiaGreen = (<span class="type">int</span>) round(.<span class="number">349</span> * image[i][j].rgbtRed + .<span class="number">686</span> * image[i][j].rgbtGreen +</span><br><span class="line">                                         .<span class="number">168</span> * image[i][j].rgbtBlue);</span><br><span class="line">            <span class="type">int</span> sepiaBlue = (<span class="type">int</span>) round(.<span class="number">272</span> * image[i][j].rgbtRed + .<span class="number">534</span> * image[i][j].rgbtGreen +</span><br><span class="line">                                        .<span class="number">131</span> * image[i][j].rgbtBlue);</span><br><span class="line">            <span class="comment">// sepiaRed = .393 * originalRed + .769 * originalGreen + .189 * originalBlue</span></span><br><span class="line">            <span class="comment">// sepiaGreen = .349 * originalRed + .686 * originalGreen + .168 * originalBlue</span></span><br><span class="line">            <span class="comment">// sepiaBlue = .272 * originalRed + .534 * originalGreen + .131 * originalBlue</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">// Make sure that if the value of sepiaRed, sepiaGreen and sepiaBlue exceed 255, their</span></span><br><span class="line">            <span class="comment">// value will be capped at 255</span></span><br><span class="line">            <span class="keyword">if</span> (sepiaRed &gt; <span class="number">255</span>)</span><br><span class="line">            {</span><br><span class="line">                sepiaRed = <span class="number">255</span>;</span><br><span class="line">            }</span><br><span class="line">            <span class="keyword">if</span> (sepiaGreen &gt; <span class="number">255</span>)</span><br><span class="line">            {</span><br><span class="line">                sepiaGreen = <span class="number">255</span>;</span><br><span class="line">            }</span><br><span class="line">            <span class="keyword">if</span> (sepiaBlue &gt; <span class="number">255</span>)</span><br><span class="line">            {</span><br><span class="line">                sepiaBlue = <span class="number">255</span>;</span><br><span class="line">            }</span><br><span class="line"></span><br><span class="line">            image[i][j].rgbtRed = sepiaRed;</span><br><span class="line">            image[i][j].rgbtGreen = sepiaGreen;</span><br><span class="line">            image[i][j].rgbtBlue = sepiaBlue;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Reflect image horizontally</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">reflect</span><span class="params">(<span class="type">int</span> height, <span class="type">int</span> width, RGBTRIPLE image[height][width])</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> temp_width = <span class="number">0</span>;</span><br><span class="line">    RGBTRIPLE temp[height][width];</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (width % <span class="number">2</span> == <span class="number">0</span>)</span><br><span class="line">    {</span><br><span class="line">        temp_width = width / <span class="number">2</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">        temp_width = (width + <span class="number">1</span>) / <span class="number">2</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; height; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; temp_width; j++)</span><br><span class="line">        {</span><br><span class="line">            <span class="comment">// Swap pixels</span></span><br><span class="line">            temp[i][j] = image[i][j];</span><br><span class="line">            image[i][j] = image[i][width - <span class="number">1</span> - j];</span><br><span class="line">            image[i][width - <span class="number">1</span> - j] = temp[i][j];</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Blur image</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">blur</span><span class="params">(<span class="type">int</span> height, <span class="type">int</span> width, RGBTRIPLE image[height][width])</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// Create a copy of image</span></span><br><span class="line">    RGBTRIPLE copy[height][width];</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; height; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; width; j++)</span><br><span class="line">        {</span><br><span class="line">            <span class="type">int</span> tempRed = <span class="number">0</span>, tempGreen = <span class="number">0</span>, tempBlue = <span class="number">0</span>;</span><br><span class="line">            <span class="type">float</span> pixel_count = <span class="number">0</span>;</span><br><span class="line">            copy[i][j] = image[i][j];</span><br><span class="line"></span><br><span class="line">            <span class="comment">// get the average of the pixel RGB values</span></span><br><span class="line">            <span class="keyword">for</span> (<span class="type">int</span> m = i - <span class="number">1</span>; m &lt;= i + <span class="number">1</span>; m++)</span><br><span class="line">            {</span><br><span class="line">                <span class="keyword">for</span> (<span class="type">int</span> n = j - <span class="number">1</span>; n &lt;= j + <span class="number">1</span>; n++)</span><br><span class="line">                {</span><br><span class="line">                    <span class="keyword">if</span> (m &gt;= <span class="number">0</span> &amp;&amp; m &lt; height &amp;&amp; n &gt;= <span class="number">0</span> &amp;&amp;</span><br><span class="line">                        n &lt; width) <span class="comment">// avoiding the pixels that cross the edge</span></span><br><span class="line">                    {</span><br><span class="line">                        tempRed += image[m][n].rgbtRed;</span><br><span class="line">                        tempGreen += image[m][n].rgbtGreen;</span><br><span class="line">                        tempBlue += image[m][n].rgbtBlue;</span><br><span class="line"></span><br><span class="line">                        pixel_count += <span class="number">1</span>;</span><br><span class="line">                    }</span><br><span class="line">                }</span><br><span class="line">            }</span><br><span class="line">            copy[i][j].rgbtRed = round(tempRed / pixel_count);</span><br><span class="line">            copy[i][j].rgbtGreen = round(tempGreen / pixel_count);</span><br><span class="line">            copy[i][j].rgbtBlue = round(tempBlue / pixel_count);</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// give the value of copy[i][j] back to image[i][j]</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; height; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; width; j++)</span><br><span class="line">        {</span><br><span class="line">            image[i][j] = copy[i][j];</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-3-recover">Problem 3: <a class="link" href="https://cs50.harvard.edu/x/psets/4/recover/#recover">Recover<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdint.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdlib.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">int</span> argc, <span class="type">char</span> *argv[])</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// Accept a single command-line argument</span></span><br><span class="line">    <span class="keyword">if</span> (argc != <span class="number">2</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Usage: ./recover FILE\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Open the memory card</span></span><br><span class="line">    FILE *card = fopen(argv[<span class="number">1</span>], <span class="string">"r"</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Create a buffer for a block of data</span></span><br><span class="line">    <span class="type">uint8_t</span> buffer[<span class="number">512</span>];</span><br><span class="line">    <span class="type">int</span> counter = <span class="number">0</span>;</span><br><span class="line">    <span class="type">int</span> found_image = <span class="number">1</span>;</span><br><span class="line">    FILE *img;</span><br><span class="line">    <span class="type">char</span> filename[<span class="number">8</span>];</span><br><span class="line">    <span class="comment">// While there's still data left to read from the memory card</span></span><br><span class="line">    <span class="keyword">while</span> (fread(buffer, <span class="number">1</span>, <span class="number">512</span>, card) == <span class="number">512</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="comment">// Create JPEGs from the data</span></span><br><span class="line">        <span class="keyword">if</span> (buffer[<span class="number">0</span>] == <span class="number">0xff</span> &amp;&amp; buffer[<span class="number">1</span>] == <span class="number">0xd8</span> &amp;&amp; buffer[<span class="number">2</span>] == <span class="number">0xff</span> &amp;&amp;</span><br><span class="line">            (buffer[<span class="number">3</span>] &amp; <span class="number">0xf0</span>) == <span class="number">0xe0</span>)</span><br><span class="line">        {</span><br><span class="line">            found_image = <span class="number">0</span>;</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (found_image == <span class="number">0</span>)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">if</span> (counter != <span class="number">0</span>)</span><br><span class="line">            {</span><br><span class="line">                fclose(img);</span><br><span class="line">            } <span class="comment">// close the previous file and start a new file to write (except the first file)</span></span><br><span class="line"></span><br><span class="line">            <span class="built_in">sprintf</span>(filename, <span class="string">"%03i.jpg"</span>, counter);</span><br><span class="line">            img = fopen(filename, <span class="string">"w"</span>);</span><br><span class="line">            fwrite(buffer, <span class="number">1</span>, <span class="number">512</span>, img);</span><br><span class="line">            counter += <span class="number">1</span>;</span><br><span class="line">            found_image = <span class="number">1</span>;</span><br><span class="line">        }</span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">if</span> (counter != <span class="number">0</span>)</span><br><span class="line">        <span class="comment">// the block does not contain the signature of jpg, so it will be continuously written into</span></span><br><span class="line">        <span class="comment">// the previously opened file if the first block does not contain the signature, it won't be</span></span><br><span class="line">        <span class="comment">// written to the image</span></span><br><span class="line">        {</span><br><span class="line">            fwrite(buffer, <span class="number">1</span>, <span class="number">512</span>, img);</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// there's nothing to write, so close all the files</span></span><br><span class="line">    fclose(img);</span><br><span class="line">    fclose(card);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>]]>
    </content>
    <id>http://kinghua0629.com/2026/02/16/CS50-Problem-Set-4/</id>
    <link href="http://kinghua0629.com/2026/02/16/CS50-Problem-Set-4/"/>
    <published>2026-02-16T12:34:03.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-4">CS50 Problem Set 4</h1>
<p>Here’s my answer for the CS50 Problem Set 4. Hope that will help you
a bit.</p>
<h2 i]]>
    </summary>
    <title>CS50 Problem Set 4</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-3">CS50 Problem Set 3</h1><p>Here’s my answer for the CS50 Problem Set 3. Hope that will help youa bit.</p><h2 id="problem-1-sort">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/3/sort/#sort">Sort<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="Txt"><figure class="iseeu highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">sort1 uses: bubble sort</span><br><span class="line"></span><br><span class="line">How do you know?: When sorting the sorted numbers, bubble sort's time complexity is omega(n); while sorting the random numbers, bubble sort's time complexity is O(n^2).</span><br><span class="line"></span><br><span class="line">sort2 uses: merge sort</span><br><span class="line"></span><br><span class="line">How do you know?: the time sort2 uses to sort every kind of txt is the least between the three sorts.</span><br><span class="line"></span><br><span class="line">sort3 uses: selection sort</span><br><span class="line"></span><br><span class="line">How do you know?: the time it uses to sort three kinds of txt is almost the same, but it cost more time than sort2. </span><br></pre></td></tr></table></figure></div><h2 id="problem-2-plurality">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/3/plurality/#plurality">Plurality<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;string.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Max number of candidates</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> MAX 9</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Candidates have name and vote count</span></span><br><span class="line"><span class="keyword">typedef</span> <span class="class"><span class="keyword">struct</span></span></span><br><span class="line"><span class="class">{</span></span><br><span class="line">    <span class="built_in">string</span> name;</span><br><span class="line">    <span class="type">int</span> votes;</span><br><span class="line">} candidate;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Array of candidates</span></span><br><span class="line">candidate candidates[MAX];</span><br><span class="line"></span><br><span class="line"><span class="comment">// Number of candidates</span></span><br><span class="line"><span class="type">int</span> candidate_count;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Function prototypes</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">vote</span><span class="params">(<span class="built_in">string</span> name)</span>;</span><br><span class="line"><span class="type">void</span> <span class="title function_">print_winner</span><span class="params">(<span class="type">void</span>)</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">int</span> argc, <span class="built_in">string</span> argv[])</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// Check for invalid usage</span></span><br><span class="line">    <span class="keyword">if</span> (argc &lt; <span class="number">2</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Usage: plurality [candidate ...]\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Populate array of candidates</span></span><br><span class="line">    candidate_count = argc - <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">if</span> (candidate_count &gt; MAX)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Maximum number of candidates is %i\n"</span>, MAX);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">2</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        candidates[i].name = argv[i + <span class="number">1</span>];</span><br><span class="line">        candidates[i].votes = <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="type">int</span> voter_count = get_int(<span class="string">"Number of voters: "</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Loop over all voters</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; voter_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">string</span> name = get_string(<span class="string">"Vote: "</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Check for invalid vote</span></span><br><span class="line">        <span class="keyword">if</span> (!vote(name))</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">printf</span>(<span class="string">"Invalid vote.\n"</span>);</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Display winner of election</span></span><br><span class="line">    print_winner();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Update vote totals given a new vote</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">vote</span><span class="params">(<span class="built_in">string</span> name)</span></span><br><span class="line">{</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">strcmp</span>(candidates[i].name, name) == <span class="number">0</span>)</span><br><span class="line">        {</span><br><span class="line">            candidates[i].votes += <span class="number">1</span>;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Print the winner (or winners) of the election</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">print_winner</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> highest = <span class="number">0</span>;</span><br><span class="line">    <span class="built_in">string</span> name;</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (candidates[i].votes &gt; highest)</span><br><span class="line">        {</span><br><span class="line">            highest = candidates[i].votes;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (candidates[i].votes == highest)</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">printf</span>(<span class="string">"%s\n"</span>, candidates[i].name);</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-3-runoff">Problem 3: <a class="link" href="https://cs50.harvard.edu/x/psets/3/runoff/#runoff">Runoff<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;string.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Max voters and candidates</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> MAX_VOTERS 100</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> MAX_CANDIDATES 9</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// preferences[i][j] is jth preference for voter i</span></span><br><span class="line"><span class="type">int</span> preferences[MAX_VOTERS][MAX_CANDIDATES];</span><br><span class="line"></span><br><span class="line"><span class="comment">// Candidates have name, vote count, eliminated status</span></span><br><span class="line"><span class="keyword">typedef</span> <span class="class"><span class="keyword">struct</span></span></span><br><span class="line"><span class="class">{</span></span><br><span class="line">    <span class="built_in">string</span> name;</span><br><span class="line">    <span class="type">int</span> votes;</span><br><span class="line">    <span class="type">bool</span> eliminated;</span><br><span class="line">} candidate;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Array of candidates</span></span><br><span class="line">candidate candidates[MAX_CANDIDATES];</span><br><span class="line"></span><br><span class="line"><span class="comment">// Numbers of voters and candidates</span></span><br><span class="line"><span class="type">int</span> voter_count;</span><br><span class="line"><span class="type">int</span> candidate_count;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Function prototypes</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">vote</span><span class="params">(<span class="type">int</span> voter, <span class="type">int</span> rank, <span class="built_in">string</span> name)</span>;</span><br><span class="line"><span class="type">void</span> <span class="title function_">tabulate</span><span class="params">(<span class="type">void</span>)</span>;</span><br><span class="line"><span class="type">bool</span> <span class="title function_">print_winner</span><span class="params">(<span class="type">void</span>)</span>;</span><br><span class="line"><span class="type">int</span> <span class="title function_">find_min</span><span class="params">(<span class="type">void</span>)</span>;</span><br><span class="line"><span class="type">bool</span> <span class="title function_">is_tie</span><span class="params">(<span class="type">int</span> min)</span>;</span><br><span class="line"><span class="type">void</span> <span class="title function_">eliminate</span><span class="params">(<span class="type">int</span> min)</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">int</span> argc, <span class="built_in">string</span> argv[])</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">// Check for invalid usage</span></span><br><span class="line">    <span class="keyword">if</span> (argc &lt; <span class="number">2</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Usage: runoff [candidate ...]\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Populate array of candidates</span></span><br><span class="line">    candidate_count = argc - <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">if</span> (candidate_count &gt; MAX_CANDIDATES)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Maximum number of candidates is %i\n"</span>, MAX_CANDIDATES);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">2</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        candidates[i].name = argv[i + <span class="number">1</span>];</span><br><span class="line">        candidates[i].votes = <span class="number">0</span>;</span><br><span class="line">        candidates[i].eliminated = <span class="literal">false</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    voter_count = get_int(<span class="string">"Number of voters: "</span>);</span><br><span class="line">    <span class="keyword">if</span> (voter_count &gt; MAX_VOTERS)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Maximum number of voters is %i\n"</span>, MAX_VOTERS);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">3</span>;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Keep querying for votes</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; voter_count; i++)</span><br><span class="line">    {</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Query for each rank</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; candidate_count; j++)</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">string</span> name = get_string(<span class="string">"Rank %i: "</span>, j + <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line">            <span class="comment">// Record vote, unless it's invalid</span></span><br><span class="line">            <span class="keyword">if</span> (!vote(i, j, name))</span><br><span class="line">            {</span><br><span class="line">                <span class="built_in">printf</span>(<span class="string">"Invalid vote.\n"</span>);</span><br><span class="line">                <span class="keyword">return</span> <span class="number">4</span>;</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"\n"</span>);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Keep holding runoffs until winner exists</span></span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="comment">// Calculate votes given remaining candidates</span></span><br><span class="line">        tabulate();</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Check if election has been won</span></span><br><span class="line">        <span class="type">bool</span> won = print_winner();</span><br><span class="line">        <span class="keyword">if</span> (won)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Eliminate last-place candidates</span></span><br><span class="line">        <span class="type">int</span> min = find_min();</span><br><span class="line">        <span class="type">bool</span> tie = is_tie(min);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// If tie, everyone wins</span></span><br><span class="line">        <span class="keyword">if</span> (tie)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">            {</span><br><span class="line">                <span class="keyword">if</span> (!candidates[i].eliminated)</span><br><span class="line">                {</span><br><span class="line">                    <span class="built_in">printf</span>(<span class="string">"%s\n"</span>, candidates[i].name);</span><br><span class="line">                }</span><br><span class="line">            }</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Eliminate anyone with minimum number of votes</span></span><br><span class="line">        eliminate(min);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Reset vote counts back to zero</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">        {</span><br><span class="line">            candidates[i].votes = <span class="number">0</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Record preference if vote is valid</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">vote</span><span class="params">(<span class="type">int</span> voter, <span class="type">int</span> rank, <span class="built_in">string</span> name)</span></span><br><span class="line">{</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">strcmp</span>(candidates[i].name, name) == <span class="number">0</span>)</span><br><span class="line">        {</span><br><span class="line">            preferences[voter][rank] = i;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Tabulate votes for non-eliminated candidates</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">tabulate</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; voter_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; candidate_count; j++)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">if</span> (!candidates[preferences[i][j]].eliminated == <span class="literal">true</span>)</span><br><span class="line">            {</span><br><span class="line">                candidates[preferences[i][j]].votes += <span class="number">1</span>;</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Print the winner of the election, if there is one</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">print_winner</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> limit = voter_count / <span class="number">2</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (!candidates[i].eliminated &amp;&amp; (candidates[i].votes &gt; limit))</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">printf</span>(<span class="string">"%s\n"</span>, candidates[i].name);</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Return the minimum number of votes any remaining candidate has</span></span><br><span class="line"><span class="type">int</span> <span class="title function_">find_min</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> min = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (!candidates[i].eliminated)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">if</span> (i == <span class="number">0</span>)</span><br><span class="line">            {</span><br><span class="line">                min = candidates[i].votes;</span><br><span class="line">            }</span><br><span class="line">            <span class="keyword">if</span> (candidates[i].votes &lt; min)</span><br><span class="line">            {</span><br><span class="line">                min = candidates[i].votes;</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> min;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Return true if the election is tied between all candidates, false otherwise</span></span><br><span class="line"><span class="type">bool</span> <span class="title function_">is_tie</span><span class="params">(<span class="type">int</span> min)</span></span><br><span class="line">{</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (!candidates[i].eliminated &amp;&amp; candidates[i].votes != min)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// Eliminate the candidate (or candidates) in last place</span></span><br><span class="line"><span class="type">void</span> <span class="title function_">eliminate</span><span class="params">(<span class="type">int</span> min)</span></span><br><span class="line">{</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; candidate_count; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (!candidates[i].eliminated &amp;&amp; candidates[i].votes == min)</span><br><span class="line">        {</span><br><span class="line">            candidates[i].eliminated = <span class="literal">true</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>]]>
    </content>
    <id>http://kinghua0629.com/2026/02/16/CS50-Problem-Set-3/</id>
    <link href="http://kinghua0629.com/2026/02/16/CS50-Problem-Set-3/"/>
    <published>2026-02-16T12:28:26.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-3">CS50 Problem Set 3</h1>
<p>Here’s my answer for the CS50 Problem Set 3. Hope that will help you
a bit.</p>
<h2 i]]>
    </summary>
    <title>CS50 Problem Set 3</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-2">CS50 Problem Set 2</h1><p>Here’s my answer for the CS50 Problem Set 2. Hope that will help youa bit.</p><h2 id="problem-1-scrabble">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/2/scrabble/#scrabble">Scrabble<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;ctype.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;string.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">compute_score</span><span class="params">(<span class="built_in">string</span> word)</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> points[] = {<span class="number">1</span>, <span class="number">3</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">4</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">1</span>, <span class="number">8</span>, <span class="number">5</span>, <span class="number">1</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">3</span>, <span class="number">10</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">4</span>, <span class="number">4</span>, <span class="number">8</span>, <span class="number">4</span>, <span class="number">10</span>};</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="built_in">string</span> word1 = get_string(<span class="string">"Player 1: "</span>);</span><br><span class="line">    <span class="built_in">string</span> word2 = get_string(<span class="string">"Player 2: "</span>);</span><br><span class="line"></span><br><span class="line">    <span class="type">int</span> score1 = compute_score(word1);</span><br><span class="line">    <span class="type">int</span> score2 = compute_score(word2);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (score1 &gt; score2)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Player 1 wins!\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span> (score1 &lt; score2)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Player 2 wins!\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Tie!\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">compute_score</span><span class="params">(<span class="built_in">string</span> word)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> score = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; <span class="built_in">strlen</span>(word); i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">isupper</span>(word[i]))</span><br><span class="line">        {</span><br><span class="line">            score += points[word[i] - <span class="string">'A'</span>];</span><br><span class="line">        }</span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">islower</span>(word[i]))</span><br><span class="line">        {</span><br><span class="line">            score += points[word[i] - <span class="string">'a'</span>];</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> score;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-2-readability">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/2/readability/#readability">Readability<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;ctype.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;math.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;string.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">letters</span><span class="params">(<span class="built_in">string</span> text)</span>;</span><br><span class="line"><span class="type">int</span> <span class="title function_">sentences</span><span class="params">(<span class="built_in">string</span> text)</span>;</span><br><span class="line"><span class="type">int</span> <span class="title function_">words</span><span class="params">(<span class="built_in">string</span> text)</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="built_in">string</span> text = get_string(<span class="string">"Text: "</span>);</span><br><span class="line"></span><br><span class="line">    <span class="type">int</span> index = (<span class="type">int</span>) round(<span class="number">0.0588</span> * letters(text) / words(text) * <span class="number">100</span> -</span><br><span class="line">                            <span class="number">0.296</span> * sentences(text) / words(text) * <span class="number">100</span> - <span class="number">15.8</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (index &lt; <span class="number">1</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Before Grade 1\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span> (index &gt;= <span class="number">16</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Grade 16+\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Grade %i\n"</span>, index);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">words</span><span class="params">(<span class="built_in">string</span> text)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> words = <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; <span class="built_in">strlen</span>(text); i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (text[i] == <span class="string">' '</span>)</span><br><span class="line">        {</span><br><span class="line">            words += <span class="number">1</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> words;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">letters</span><span class="params">(<span class="built_in">string</span> text)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> letters = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; <span class="built_in">strlen</span>(text); i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">isalpha</span>(text[i]))</span><br><span class="line">        {</span><br><span class="line">            letters += <span class="number">1</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> letters;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">sentences</span><span class="params">(<span class="built_in">string</span> text)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> sentences = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>; i &lt; <span class="built_in">strlen</span>(text); i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">if</span> (text[i] == <span class="string">'.'</span> || text[i] == <span class="string">'!'</span> || text[i] == <span class="string">'?'</span>)</span><br><span class="line">        {</span><br><span class="line">            sentences += <span class="number">1</span>;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> sentences;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-3-substitution">Problem 3: <a class="link" href="https://cs50.harvard.edu/x/psets/2/substitution/#substitution">Substitution<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;ctype.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;string.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">int</span> argc, <span class="built_in">string</span> argv[])</span></span><br><span class="line">{</span><br><span class="line">    <span class="built_in">string</span> key = argv[<span class="number">1</span>];</span><br><span class="line">    <span class="keyword">if</span> (argc != <span class="number">2</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Usage: ./substitution key\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">strlen</span>(argv[<span class="number">1</span>]) != <span class="number">26</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"Key must contain 26 characters.\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>, n = <span class="built_in">strlen</span>(key); i &lt; n; i++)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">if</span> (<span class="built_in">isalpha</span>(argv[<span class="number">1</span>][i]) == <span class="number">0</span>)</span><br><span class="line">            {</span><br><span class="line">                <span class="built_in">printf</span>(<span class="string">"Key should be all alphabets.\n"</span>);</span><br><span class="line">                <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">            }</span><br><span class="line"></span><br><span class="line">            <span class="keyword">for</span> (<span class="type">int</span> j = i + <span class="number">1</span>; j &lt; n; j++)</span><br><span class="line">            {</span><br><span class="line">                <span class="keyword">if</span> (argv[<span class="number">1</span>][i] == argv[<span class="number">1</span>][j] || argv[<span class="number">1</span>][i] + <span class="number">32</span> == argv[<span class="number">1</span>][j] ||</span><br><span class="line">                    argv[<span class="number">1</span>][i] - <span class="number">32</span> == argv[<span class="number">1</span>][j])</span><br><span class="line">                {</span><br><span class="line">                    <span class="built_in">printf</span>(<span class="string">"There should be no duplicate in the key.\n"</span>);</span><br><span class="line">                    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">                }</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">        <span class="built_in">string</span> ptext = get_string(<span class="string">"plaintext:  "</span>);</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"ciphertext: "</span>);</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">0</span>, length = <span class="built_in">strlen</span>(ptext); i &lt; length; i++)</span><br><span class="line">        {</span><br><span class="line">            <span class="keyword">if</span> (<span class="built_in">isupper</span>(ptext[i]))</span><br><span class="line">            {</span><br><span class="line">                <span class="type">char</span> result = <span class="built_in">toupper</span>(key[ptext[i] - <span class="string">'A'</span>]);</span><br><span class="line">                <span class="built_in">printf</span>(<span class="string">"%c"</span>, result);</span><br><span class="line">            }</span><br><span class="line">            <span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">islower</span>(ptext[i]))</span><br><span class="line">            {</span><br><span class="line">                <span class="type">char</span> result = <span class="built_in">tolower</span>(key[ptext[i] - <span class="string">'a'</span>]);</span><br><span class="line">                <span class="built_in">printf</span>(<span class="string">"%c"</span>, result);</span><br><span class="line">            }</span><br><span class="line">            <span class="keyword">else</span></span><br><span class="line">            {</span><br><span class="line">                <span class="built_in">printf</span>(<span class="string">"%c"</span>, ptext[i]);</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"\n"</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>]]>
    </content>
    <id>http://kinghua0629.com/2026/02/16/CS50-Problem-Set-2/</id>
    <link href="http://kinghua0629.com/2026/02/16/CS50-Problem-Set-2/"/>
    <published>2026-02-16T12:13:38.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-2">CS50 Problem Set 2</h1>
<p>Here’s my answer for the CS50 Problem Set 2. Hope that will help you
a bit.</p>
<h2 i]]>
    </summary>
    <title>CS50 Problem Set 2</title>
    <updated>2026-04-11T06:09:13.464Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="CS50" scheme="http://kinghua0629.com/categories/CS50/"/>
    <category term="CS50" scheme="http://kinghua0629.com/tags/CS50/"/>
    <content>
      <![CDATA[<h1 id="cs50-problem-set-1">CS50 Problem Set 1</h1><p>Here’s my answer for the CS50 Problem Set 1. Hope that will help youa bit.</p><h2 id="problem-1-hello-its-me">Problem 1: <a class="link" href="https://cs50.harvard.edu/x/psets/1/me/#hello-its-me">Hello, It’sMe<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="built_in">string</span> name = get_string(<span class="string">"What's your name?\n"</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">"Hello, %s\n"</span>, name);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-2-mario">Problem 2: <a class="link" href="https://cs50.harvard.edu/x/psets/1/mario/more/#mario">Mario<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">void</span> <span class="title function_">mario</span><span class="params">(<span class="type">int</span> n)</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> n;</span><br><span class="line">    <span class="keyword">do</span></span><br><span class="line">    {</span><br><span class="line">        n = get_int(<span class="string">"Height: "</span>);</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">while</span> (n &lt; <span class="number">1</span> || n &gt; <span class="number">8</span>);</span><br><span class="line">    mario(n);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="type">void</span> <span class="title function_">mario</span><span class="params">(<span class="type">int</span> n)</span></span><br><span class="line">{</span><br><span class="line">    <span class="keyword">for</span> (<span class="type">int</span> i = <span class="number">1</span>; i &lt; n + <span class="number">1</span>; i++)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> j = <span class="number">0</span>; j &lt; n - i; j++)</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">printf</span>(<span class="string">" "</span>);</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> k = <span class="number">0</span>; k &lt; i; k++)</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">printf</span>(<span class="string">"#"</span>);</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"  "</span>);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> (<span class="type">int</span> k = <span class="number">0</span>; k &lt; i; k++)</span><br><span class="line">        {</span><br><span class="line">            <span class="built_in">printf</span>(<span class="string">"#"</span>);</span><br><span class="line">        }</span><br><span class="line">        <span class="comment">//        for (int j = 0; j &lt; n - i; j++)</span></span><br><span class="line">        <span class="comment">//        {</span></span><br><span class="line">        <span class="comment">//            printf(" ");</span></span><br><span class="line">        <span class="comment">//        }</span></span><br><span class="line"></span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">"\n"</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><h2 id="problem-3-cash">Problem 3: <a class="link" href="https://cs50.harvard.edu/x/psets/1/cash/">Cash<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></h2><div class="code-container" data-rel="C"><figure class="iseeu highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;cs50.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">{</span><br><span class="line">    <span class="type">int</span> cash;</span><br><span class="line">    <span class="keyword">do</span></span><br><span class="line">    {</span><br><span class="line">        cash = get_int(<span class="string">"Change owed: "</span>);</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">while</span> (cash &lt; <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="type">int</span> n_25 = <span class="number">0</span>;</span><br><span class="line">    <span class="type">int</span> n_10 = <span class="number">0</span>;</span><br><span class="line">    <span class="type">int</span> n_5 = <span class="number">0</span>;</span><br><span class="line">    <span class="type">int</span> n_1 = <span class="number">0</span>;</span><br><span class="line">    <span class="type">int</span> sum = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (cash &gt; <span class="number">24</span>)</span><br><span class="line">    {</span><br><span class="line">        cash -= <span class="number">25</span>;</span><br><span class="line">        n_25 += <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">// printf("%d\n", n_25);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (cash &gt; <span class="number">9</span>)</span><br><span class="line">    {</span><br><span class="line">        cash -= <span class="number">10</span>;</span><br><span class="line">        n_10 += <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">// printf("%d\n", n_10);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (cash &gt; <span class="number">4</span>)</span><br><span class="line">    {</span><br><span class="line">        cash -= <span class="number">5</span>;</span><br><span class="line">        n_5 += <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">// printf("%d\n", n_5);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (cash &gt; <span class="number">0</span>)</span><br><span class="line">    {</span><br><span class="line">        cash -= <span class="number">1</span>;</span><br><span class="line">        n_1 += <span class="number">1</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">// printf("%d\n", n_1);</span></span><br><span class="line">    sum = n_25 + n_10 + n_5 + n_1;</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">"%d\n"</span>, sum);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>]]>
    </content>
    <id>http://kinghua0629.com/2026/02/10/CS50-Problem-Set-1/</id>
    <link href="http://kinghua0629.com/2026/02/10/CS50-Problem-Set-1/"/>
    <published>2026-02-10T05:48:42.000Z</published>
    <summary>
      <![CDATA[<h1 id="cs50-problem-set-1">CS50 Problem Set 1</h1>
<p>Here’s my answer for the CS50 Problem Set 1. Hope that will help you
a bit.</p>
<h2 i]]>
    </summary>
    <title>CS50 Problem Set 1</title>
    <updated>2026-04-11T06:09:13.464Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="GRE" scheme="http://kinghua0629.com/categories/GRE/"/>
    <category term="GRE writing" scheme="http://kinghua0629.com/tags/GRE-writing/"/>
    <content>
      <![CDATA[<p>这是我的第一篇GRE文章，如果有写得不好得地方，请留言指正。</p><h2 id="题目">题目</h2><p><strong>Claim: In any situation, the best way to persuade otherpeople is to present them with facts and statistics rather than withemotional arguments.</strong></p><p><strong>Reason: Facts are objective, so they are more persuasive thansubjective appeals.</strong></p><p><strong><em>Write a response in which you discuss the extent to whichyou agree or disagree with the claim and the reason on which that claimis based.</em></strong></p><h2 id="作文">作文</h2><p>With the advancement of the society, many of us take it for grantedthat the best way to persuade other people is to present them with factsand statics rather than with emotional arguments. The underlying reasonfor this is that since facts are objective, they are more persuasivethan subjective appeals. Unfortunately, I disagree with the claim andthe reason, and here are the reasons why I disagree with it.</p><p>Admittedly, in some aspect, persuading people by presenting them withstatics is an effective way, especially in the field of science andengineering. For instance, critical data taken generated from numerousexperiments on patients plays a vital role in the process of developinga new kind of drug. Companies cannot persuade FDA to approve certainkinds of medicine by telling the urgent need for this medicine. Instead,they have to provide reliable and convincing data which was taken fromnumerous experiments in labs and on patients in order to prove that thedrug is effective and does not have side effects. In this case, factsand statistics are not just the best way to persuade; they are the onlyacceptable way.</p><p>However, this claim can hardly become useful when it comes to thetopics which are more related to our personal lives. The main reason isthat human beings are not purely rational actors; our decisions aredeeply influenced by emotions, morals, and shared values. Take MartinLuther King as an example. Indeed, he cited the fact of racialsegregation and discrimination between black and white people, but hecould not achieve the success of promoting the Civil Rights Act withoutdelivering emotional speeches like “I have a dream”. His vividdescription of black people’s unequally treated situation and callingfor equality between different races successfully evoked the resonancein the communities, engaging more people into this movement, which isthe main cause for the fundamental change. It will be quixotic forMartin to call on people to engage in the movement if he just used dataand historical facts in his speeches.</p><p>What’s more, there is a serious flaw in facts and statistics whichcan call the claim and reason mentioned above into question. Ordinarypeople are not willing to understand the meanings behind the facts.Several previous experiments indicate that with the rising of number ofstatics and facts in a speech of a representative, the less likelyvoters would like to get interested in his political position, thereforeachieving lower vote than others. People will get tired after listeningto numerous times of similar facts, and they instead want to hearsomeone who can stand out and clearly express themselves. So in thiscase, using only facts is not convincing enough.</p><p>Moreover, the most compelling persuasion often combines bothelements. A skilled advocate uses facts as the skeleton of the argumentand emotional appeal to attract those who have the same ambition. Anonprofit seeking donation for poor people will show statistics onsalary and food supply of these families but will also tell the story ofone specific child to create a connection that moves potential donators.The fact establishes the scale of the problem, while the emotionalappeal evokes the empathy necessary to motivate action.</p><p>In conclusion, I believe that using statistics rather than emotionalarguments when persuading others is not the best way in any cases. Onlyby combining facts and emotions together in lectures can we persuadeothers from the deep heart.</p>]]>
    </content>
    <id>http://kinghua0629.com/2026/01/25/My-First-GRE-Passage/</id>
    <link href="http://kinghua0629.com/2026/01/25/My-First-GRE-Passage/"/>
    <published>2026-01-25T10:18:10.000Z</published>
    <summary>
      <![CDATA[<p>这是我的第一篇GRE文章，如果有写得不好得地方，请留言指正。</p>
<h2 id="题目">题目</h2>
<p><strong>Claim: In any situation, the best way to persuade other
people is to pr]]>
    </summary>
    <title>My First GRE Passage</title>
    <updated>2026-04-11T06:09:13.466Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="Announcements" scheme="http://kinghua0629.com/categories/Announcements/"/>
    <category term="Announcements" scheme="http://kinghua0629.com/tags/Announcements/"/>
    <content>
      <![CDATA[<div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">print</span>(<span class="string">"hello world"</span>)</span><br></pre></td></tr></table></figure></div><p>Hey there,</p><p>So glad you clicked your way here, becoming the very first visitor tothis little corner of the web. This is my digital garden, freshly tilledand ready for planting.</p><p>I imagine you’re a bit like me—mind often dotted with scatteredthoughts, like afternoon light spots, bright and shimmering, yet hard tograsp; some questions swirling beneath the surface of everyday life,refusing to sink; and those “aha” moments that ache to be captured.</p><p>Hence, here we are.</p><p>Here’s what I’ll be sharing:</p><ul><li><p><strong>Thoughts that made me pause</strong> — about life,reading, or a corner of the world glimpsed by chance. Much like graspingthe second law of thermodynamics, <strong>ΔS ≥ 0</strong>, which remindsme that disorder is the default, and all understanding and order requireenergy. I’m also fascinated by certain elegant mathematical truths, like<strong>Euler’s identity</strong>: <span class="math inline"><em>e</em><sup><em>i</em><em>π</em></sup> + 1 = 0</span>.It connects the natural base, the imaginary unit, the ratio of acircle’s circumference to its diameter, and the fundamental numbers 0and 1 in one breathtaking equation—a quiet reminder that seeminglyunrelated domains might share a beautifully unified logic beneath thesurface.</p></li><li><p><strong>Things I’ve tried and tested — the useful and thenot-so-useful</strong> — be it a method, a tool, or a perspective.They’ll often be presented like runnable code snippets, ready for you toexecute or tweak: <div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># A simple function: extract the core from a messy list</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">extract_essence</span>(<span class="params">thoughts_list</span>):</span><br><span class="line">    <span class="comment"># 1. Filter out pure emotional noise</span></span><br><span class="line">    filtered = [t <span class="keyword">for</span> t <span class="keyword">in</span> thoughts_list <span class="keyword">if</span> t <span class="keyword">not</span> <span class="keyword">in</span> [<span class="string">"anxiety"</span>, <span class="string">"procrastination"</span>]]</span><br><span class="line">    <span class="comment"># 2. Connect what remains to find the thread</span></span><br><span class="line">    essence = <span class="string">" -&gt; "</span>.join(filtered)</span><br><span class="line">    <span class="keyword">return</span> essence</span><br><span class="line"></span><br><span class="line"><span class="comment"># Example, processing: [“confusion”, “reading”, “inspiration”, “procrastination”]</span></span><br><span class="line"><span class="comment"># Output: “confusion -&gt; reading -&gt; inspiration”</span></span><br></pre></td></tr></table></figure></div></p></li><li><p><strong>The imperfect, real process</strong> — the learning, theattempts, even the detours. I believe growth is rarely linear; it’s morelike navigating a search function, sometimes requiring random walks tofind the direction of steepest ascent. This journey might bemetaphorically described by the <strong>second derivative</strong>, therate of change of the rate of change: <span class="math display"><mjx-container class="MathJax" jax="SVG" overflow="overflow" display="true"><svg style="vertical-align: -1.654ex;" xmlns="http://www.w3.org/2000/svg" width="13.117ex" height="5.07ex" role="img" focusable="false" viewBox="0 -1509.9 5797.7 2240.9"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math" data-latex="f''(x) = \frac{d^2 f}{dx^2}"><g data-mml-node="msup"><g data-mml-node="mi" data-latex="f"><path data-c="1D453" d="M552 633C552 677 509 705 462 705C400 705 357 665 334 586C329 568 318 517 302 433L237 433C215 433 204 432 204 411C204 400 214 395 235 395L295 395L222 8C211-49 201-91 192-119C180-156 163-175 141-175C126-175 114-171 103-164C135-159 151-140 151-108C151-82 138-69 111-69C77-69 53-99 53-133C53-177 94-205 141-205C166-205 189-195 208-174C240-141 265-94 283-31C294 8 304 46 311 84L369 395L451 395C474 395 484 396 484 419C484 428 474 433 454 433L377 433C383 474 411 625 420 644C430 665 444 675 462 675C477 675 490 671 501 664C470 657 454 639 454 608C454 582 467 569 494 569C528 569 552 599 552 633Z"></path></g><g data-mml-node="mo" transform="translate(638.1,413) scale(0.707)" data-latex="''"><path data-c="2033" d="M523 549C497 549 480 539 472 518L301 96L347 96L572 463C577 472 580 482 580 493C580 523 553 549 523 549M287 549C261 549 244 539 236 518L65 96L111 96L335 463C341 472 344 482 344 493C344 523 317 549 287 549Z"></path></g></g><g data-mml-node="mo" data-latex="(" transform="translate(1145.6,0)"><path data-c="28" d="M318-248C327-248 332-243 332-234C332-231 330-227 327-223C275-183 233-117 202-26C175 53 161 131 161 208L161 292C161 369 175 447 202 526C233 617 275 683 327 723C330 726 332 730 332 734C332 743 327 748 318 748C317 748 314 747 311 745C251 699 201 631 160 540C121 453 101 371 101 292L101 208C101 129 121 47 160-40C201-131 251-199 311-245C314-247 317-248 318-248Z"></path></g><g data-mml-node="mi" data-latex="x" transform="translate(1534.6,0)"><path data-c="1D465" d="M527 373C527 419 482 442 432 442C389 442 355 419 329 373C308 419 273 442 222 442C173 442 133 419 101 374C74 335 60 306 60 287C60 278 65 273 75 273C84 273 90 278 92 287C111 345 153 413 220 413C253 413 269 392 269 351C269 330 251 252 216 118C199 51 169 18 126 18C112 18 99 21 88 26C114 36 127 54 127 80C127 106 114 119 87 119C54 119 29 91 29 58C29 12 76-11 125-11C167-11 201 12 228 58C247 12 283-11 335-11C383-11 423 12 455 57C482 96 496 125 496 144C496 153 491 158 481 158C472 158 467 153 464 144C447 87 402 18 337 18C304 18 287 38 287 79C287 92 292 120 303 165L337 300C356 375 387 413 431 413C445 413 458 410 469 405C442 396 429 378 429 351C429 325 443 312 470 312C502 312 527 341 527 373Z"></path></g><g data-mml-node="mo" data-latex=")" transform="translate(2106.6,0)"><path data-c="29" d="M78-245C138-199 188-131 229-40C268 47 288 129 288 208L288 292C288 371 268 453 229 540C188 631 138 699 78 745C75 747 72 748 71 748C62 748 57 743 57 734C57 730 59 726 62 723C114 683 156 617 187 526C214 447 228 369 228 292L228 208C228 131 214 53 187-26C156-117 114-183 62-223C59-227 57-231 57-234C57-243 62-248 71-248C72-248 75-247 78-245Z"></path></g><g data-mml-node="mo" data-latex="=" transform="translate(2773.4,0)"><path data-c="3D" d="M698 367L80 367C64 367 56 359 56 344C56 329 64 321 80 321L698 321C714 321 722 329 722 344C722 356 711 367 698 367M698 179L80 179C64 179 56 171 56 156C56 141 64 133 80 133L698 133C714 133 722 141 722 156C722 169 711 179 698 179Z"></path></g><g data-mml-node="mfrac" data-latex="\frac{d^2 f}{dx^2}" transform="translate(3829.2,0)"><g data-mml-node="mrow" data-latex="d^2  f" transform="translate(230,676)"><g data-mml-node="msup" data-latex="d^2"><g data-mml-node="mi" data-latex="d"><path data-c="1D451" d="M429 632L370 389C349 426 320 445 281 445C216 445 159 412 109 345C63 283 40 218 40 151C40 63 91-11 175-11C218-11 260 12 300 59C311 21 345-11 392-11C461-11 483 71 498 145C498 154 493 159 483 159C474 159 468 152 465 138C445 59 421 19 394 19C377 19 368 33 368 60C368 75 370 91 374 107L516 679L516 683C513 690 507 694 499 694C476 694 434 690 374 683C363 682 357 674 357 660C357 650 366 645 384 645C403 645 429 646 429 632M341 376C351 355 356 341 356 332C355 328 354 323 353 316L304 122C301 111 294 99 285 87C248 42 212 19 177 19C138 19 118 49 118 108C118 132 124 168 136 216C157 301 187 359 224 390C244 407 263 415 282 415C309 415 329 402 341 376Z"></path></g><g data-mml-node="mn" transform="translate(553,363) scale(0.707)" data-latex="2"><path data-c="32" d="M237 666C186 666 143 648 106 612C69 576 50 534 50 483C50 449 75 424 106 424C136 424 161 450 161 480C161 513 137 536 105 536C102 536 100 536 98 535C117 584 161 627 224 627C306 627 352 556 352 470C352 403 318 331 250 255L62 43C49 28 50 29 50 0L421 0L450 180L417 180C409 129 402 100 396 91C391 86 361 84 306 84L139 84L236 179C304 243 390 312 419 365C439 400 449 435 449 470C449 588 357 666 237 666Z"></path></g></g><g data-mml-node="mi" data-latex="f" transform="translate(956.6,0)"><path data-c="1D453" d="M552 633C552 677 509 705 462 705C400 705 357 665 334 586C329 568 318 517 302 433L237 433C215 433 204 432 204 411C204 400 214 395 235 395L295 395L222 8C211-49 201-91 192-119C180-156 163-175 141-175C126-175 114-171 103-164C135-159 151-140 151-108C151-82 138-69 111-69C77-69 53-99 53-133C53-177 94-205 141-205C166-205 189-195 208-174C240-141 265-94 283-31C294 8 304 46 311 84L369 395L451 395C474 395 484 396 484 419C484 428 474 433 454 433L377 433C383 474 411 625 420 644C430 665 444 675 462 675C477 675 490 671 501 664C470 657 454 639 454 608C454 582 467 569 494 569C528 569 552 599 552 633Z"></path></g></g><g data-mml-node="mrow" data-latex="dx^2" transform="translate(220,-719.9)"><g data-mml-node="mi" data-latex="d"><path data-c="1D451" d="M429 632L370 389C349 426 320 445 281 445C216 445 159 412 109 345C63 283 40 218 40 151C40 63 91-11 175-11C218-11 260 12 300 59C311 21 345-11 392-11C461-11 483 71 498 145C498 154 493 159 483 159C474 159 468 152 465 138C445 59 421 19 394 19C377 19 368 33 368 60C368 75 370 91 374 107L516 679L516 683C513 690 507 694 499 694C476 694 434 690 374 683C363 682 357 674 357 660C357 650 366 645 384 645C403 645 429 646 429 632M341 376C351 355 356 341 356 332C355 328 354 323 353 316L304 122C301 111 294 99 285 87C248 42 212 19 177 19C138 19 118 49 118 108C118 132 124 168 136 216C157 301 187 359 224 390C244 407 263 415 282 415C309 415 329 402 341 376Z"></path></g><g data-mml-node="msup" data-latex="x^2" transform="translate(520,0)"><g data-mml-node="mi" data-latex="x"><path data-c="1D465" d="M527 373C527 419 482 442 432 442C389 442 355 419 329 373C308 419 273 442 222 442C173 442 133 419 101 374C74 335 60 306 60 287C60 278 65 273 75 273C84 273 90 278 92 287C111 345 153 413 220 413C253 413 269 392 269 351C269 330 251 252 216 118C199 51 169 18 126 18C112 18 99 21 88 26C114 36 127 54 127 80C127 106 114 119 87 119C54 119 29 91 29 58C29 12 76-11 125-11C167-11 201 12 228 58C247 12 283-11 335-11C383-11 423 12 455 57C482 96 496 125 496 144C496 153 491 158 481 158C472 158 467 153 464 144C447 87 402 18 337 18C304 18 287 38 287 79C287 92 292 120 303 165L337 300C356 375 387 413 431 413C445 413 458 410 469 405C442 396 429 378 429 351C429 325 443 312 470 312C502 312 527 341 527 373Z"></path></g><g data-mml-node="mn" transform="translate(605,289) scale(0.707)" data-latex="2"><path data-c="32" d="M237 666C186 666 143 648 106 612C69 576 50 534 50 483C50 449 75 424 106 424C136 424 161 450 161 480C161 513 137 536 105 536C102 536 100 536 98 535C117 584 161 627 224 627C306 627 352 556 352 470C352 403 318 331 250 255L62 43C49 28 50 29 50 0L421 0L450 180L417 180C409 129 402 100 396 91C391 86 361 84 306 84L139 84L236 179C304 243 390 312 419 365C439 400 449 435 449 470C449 588 357 666 237 666Z"></path></g></g></g><rect width="1728.6" height="60" x="120" y="220"></rect></g></g></g></svg></mjx-container></span> We often focus on velocity (the first derivative), but it’sthe acceleration (the second) that shapes the curve’s concavity. Whatseems like slow accumulation might be building toward a fundamentalshift in direction.</p></li></ul><p>You won’t find “absolute truth” here, only honest notes and openconversation. Picture a friend across the table, coffee still steaming,with sketches or a few lines of untested code on a napkin.</p><p>If you, too, believe that <strong>thoughts deserve to be untangled,sharing builds connection, and sincere documentation carries its ownweight</strong>—then I think we already share a silent understanding.Like two particles becoming <strong>“quantum entangled”</strong>, ourstates, however distant, may now correlate.</p><p>This is the first post, a gentle beginning. If you’re willing, I’dlove for us to walk this path together.</p><p><strong>What’s a “problem” or “project” you’ve been turning overlately?</strong> Is it about finding a definite solution, like solvingan equation, or more about observing interesting patterns, like studyinga chaotic system?</p><p>Feel free to leave a note and tell me.</p><p>— Your new friend</p><p><em>King Hua</em></p>]]>
    </content>
    <id>http://kinghua0629.com/2026/01/21/First-Passage-Of-My-Blog/</id>
    <link href="http://kinghua0629.com/2026/01/21/First-Passage-Of-My-Blog/"/>
    <published>2026-01-21T09:01:09.000Z</published>
    <summary>
      <![CDATA[<div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1]]>
    </summary>
    <title>First Passage Of My Blog</title>
    <updated>2026-04-11T06:09:13.465Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <category term="Announcements" scheme="http://kinghua0629.com/categories/Announcements/"/>
    <category term="Announcements" scheme="http://kinghua0629.com/tags/Announcements/"/>
    <content>
      <![CDATA[<div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">print</span>(<span class="string">"hello world"</span>)</span><br></pre></td></tr></table></figure></div><p>嘿，你好呀。</p><p>很高兴你能点开这里，成为这个小小空间的第一位访客。这里是我的数字自留地，一个刚刚松土、准备播种的地方。</p><p>我猜，你和我一样——心里总有些散落的念头，像午后的光斑，明晃晃的，却抓不住形状；有些问题在生活的水面下打着旋儿，不肯沉底；有些“原来如此”的瞬间，渴望被记录下来。</p><p>于是就有了这里。</p><p>我会在这里写下：</p><ul><li><p><strong>那些让我停顿的思考</strong>——关于生活、阅读、或者偶然瞥见的世界一角。就像理解熵增定律<strong>ΔS ≥ 0</strong>一样，它告诉我，混乱是常态，而所有秩序与理解都需要付出能量。我也着迷于一些简洁的数学真理，比如<strong>欧拉公式</strong>：<span class="math inline"><em>e</em><sup><em>i</em><em>π</em></sup> + 1 = 0</span>。它用一个极简的等式，将自然底数、虚数单位、圆周率和0、1这两个基础整数联系起来——仿佛在提醒我们，看似无关的领域，底层可能共享着优美的统一逻辑。</p></li><li><p><strong>那些亲手验证过的好用与不好用</strong>——可能是方法、工具，或者一个视角。它们会像可执行的代码片段一样被呈现，你可以直接运行或修改：<div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 一个简单的函数：从杂乱列表中提取核心项</span></span><br><span class="line"><span class="keyword">def</span> <span class="title function_">extract_essence</span>(<span class="params">thoughts_list</span>):</span><br><span class="line">    <span class="comment"># 1. 过滤掉纯粹的情绪噪音</span></span><br><span class="line">    filtered = [t <span class="keyword">for</span> t <span class="keyword">in</span> thoughts_list <span class="keyword">if</span> t <span class="keyword">not</span> <span class="keyword">in</span> [<span class="string">"焦虑"</span>, <span class="string">"拖延"</span>]]</span><br><span class="line">    <span class="comment"># 2. 连接剩下的，形成脉络</span></span><br><span class="line">    essence = <span class="string">" -&gt; "</span>.join(filtered)</span><br><span class="line">    <span class="keyword">return</span> essence</span><br><span class="line"></span><br><span class="line"><span class="comment"># 例如，处理：[“困惑”， “阅读”， “灵感”， “拖延”]</span></span><br><span class="line"><span class="comment"># 输出会是： “困惑 -&gt; 阅读 -&gt; 灵感”</span></span><br></pre></td></tr></table></figure></div></p></li><li><p><strong>那些不完美但真实的过程</strong>——学习、尝试、甚至走弯路的样子。我相信成长很少是线性的，它更像一个探索函数，有时需要随机游走，才能找到梯度上升的方向。这过程，或许可以用描述“变化之变化”的<strong>二阶导数</strong>来隐喻：<span class="math display"><mjx-container class="MathJax" jax="SVG" overflow="overflow" display="true"><svg style="vertical-align: -1.654ex;" xmlns="http://www.w3.org/2000/svg" width="13.117ex" height="5.07ex" role="img" focusable="false" viewBox="0 -1509.9 5797.7 2240.9"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math" data-latex="f''(x) = \frac{d^2 f}{dx^2}"><g data-mml-node="msup"><g data-mml-node="mi" data-latex="f"><path data-c="1D453" d="M552 633C552 677 509 705 462 705C400 705 357 665 334 586C329 568 318 517 302 433L237 433C215 433 204 432 204 411C204 400 214 395 235 395L295 395L222 8C211-49 201-91 192-119C180-156 163-175 141-175C126-175 114-171 103-164C135-159 151-140 151-108C151-82 138-69 111-69C77-69 53-99 53-133C53-177 94-205 141-205C166-205 189-195 208-174C240-141 265-94 283-31C294 8 304 46 311 84L369 395L451 395C474 395 484 396 484 419C484 428 474 433 454 433L377 433C383 474 411 625 420 644C430 665 444 675 462 675C477 675 490 671 501 664C470 657 454 639 454 608C454 582 467 569 494 569C528 569 552 599 552 633Z"></path></g><g data-mml-node="mo" transform="translate(638.1,413) scale(0.707)" data-latex="''"><path data-c="2033" d="M523 549C497 549 480 539 472 518L301 96L347 96L572 463C577 472 580 482 580 493C580 523 553 549 523 549M287 549C261 549 244 539 236 518L65 96L111 96L335 463C341 472 344 482 344 493C344 523 317 549 287 549Z"></path></g></g><g data-mml-node="mo" data-latex="(" transform="translate(1145.6,0)"><path data-c="28" d="M318-248C327-248 332-243 332-234C332-231 330-227 327-223C275-183 233-117 202-26C175 53 161 131 161 208L161 292C161 369 175 447 202 526C233 617 275 683 327 723C330 726 332 730 332 734C332 743 327 748 318 748C317 748 314 747 311 745C251 699 201 631 160 540C121 453 101 371 101 292L101 208C101 129 121 47 160-40C201-131 251-199 311-245C314-247 317-248 318-248Z"></path></g><g data-mml-node="mi" data-latex="x" transform="translate(1534.6,0)"><path data-c="1D465" d="M527 373C527 419 482 442 432 442C389 442 355 419 329 373C308 419 273 442 222 442C173 442 133 419 101 374C74 335 60 306 60 287C60 278 65 273 75 273C84 273 90 278 92 287C111 345 153 413 220 413C253 413 269 392 269 351C269 330 251 252 216 118C199 51 169 18 126 18C112 18 99 21 88 26C114 36 127 54 127 80C127 106 114 119 87 119C54 119 29 91 29 58C29 12 76-11 125-11C167-11 201 12 228 58C247 12 283-11 335-11C383-11 423 12 455 57C482 96 496 125 496 144C496 153 491 158 481 158C472 158 467 153 464 144C447 87 402 18 337 18C304 18 287 38 287 79C287 92 292 120 303 165L337 300C356 375 387 413 431 413C445 413 458 410 469 405C442 396 429 378 429 351C429 325 443 312 470 312C502 312 527 341 527 373Z"></path></g><g data-mml-node="mo" data-latex=")" transform="translate(2106.6,0)"><path data-c="29" d="M78-245C138-199 188-131 229-40C268 47 288 129 288 208L288 292C288 371 268 453 229 540C188 631 138 699 78 745C75 747 72 748 71 748C62 748 57 743 57 734C57 730 59 726 62 723C114 683 156 617 187 526C214 447 228 369 228 292L228 208C228 131 214 53 187-26C156-117 114-183 62-223C59-227 57-231 57-234C57-243 62-248 71-248C72-248 75-247 78-245Z"></path></g><g data-mml-node="mo" data-latex="=" transform="translate(2773.4,0)"><path data-c="3D" d="M698 367L80 367C64 367 56 359 56 344C56 329 64 321 80 321L698 321C714 321 722 329 722 344C722 356 711 367 698 367M698 179L80 179C64 179 56 171 56 156C56 141 64 133 80 133L698 133C714 133 722 141 722 156C722 169 711 179 698 179Z"></path></g><g data-mml-node="mfrac" data-latex="\frac{d^2 f}{dx^2}" transform="translate(3829.2,0)"><g data-mml-node="mrow" data-latex="d^2  f" transform="translate(230,676)"><g data-mml-node="msup" data-latex="d^2"><g data-mml-node="mi" data-latex="d"><path data-c="1D451" d="M429 632L370 389C349 426 320 445 281 445C216 445 159 412 109 345C63 283 40 218 40 151C40 63 91-11 175-11C218-11 260 12 300 59C311 21 345-11 392-11C461-11 483 71 498 145C498 154 493 159 483 159C474 159 468 152 465 138C445 59 421 19 394 19C377 19 368 33 368 60C368 75 370 91 374 107L516 679L516 683C513 690 507 694 499 694C476 694 434 690 374 683C363 682 357 674 357 660C357 650 366 645 384 645C403 645 429 646 429 632M341 376C351 355 356 341 356 332C355 328 354 323 353 316L304 122C301 111 294 99 285 87C248 42 212 19 177 19C138 19 118 49 118 108C118 132 124 168 136 216C157 301 187 359 224 390C244 407 263 415 282 415C309 415 329 402 341 376Z"></path></g><g data-mml-node="mn" transform="translate(553,363) scale(0.707)" data-latex="2"><path data-c="32" d="M237 666C186 666 143 648 106 612C69 576 50 534 50 483C50 449 75 424 106 424C136 424 161 450 161 480C161 513 137 536 105 536C102 536 100 536 98 535C117 584 161 627 224 627C306 627 352 556 352 470C352 403 318 331 250 255L62 43C49 28 50 29 50 0L421 0L450 180L417 180C409 129 402 100 396 91C391 86 361 84 306 84L139 84L236 179C304 243 390 312 419 365C439 400 449 435 449 470C449 588 357 666 237 666Z"></path></g></g><g data-mml-node="mi" data-latex="f" transform="translate(956.6,0)"><path data-c="1D453" d="M552 633C552 677 509 705 462 705C400 705 357 665 334 586C329 568 318 517 302 433L237 433C215 433 204 432 204 411C204 400 214 395 235 395L295 395L222 8C211-49 201-91 192-119C180-156 163-175 141-175C126-175 114-171 103-164C135-159 151-140 151-108C151-82 138-69 111-69C77-69 53-99 53-133C53-177 94-205 141-205C166-205 189-195 208-174C240-141 265-94 283-31C294 8 304 46 311 84L369 395L451 395C474 395 484 396 484 419C484 428 474 433 454 433L377 433C383 474 411 625 420 644C430 665 444 675 462 675C477 675 490 671 501 664C470 657 454 639 454 608C454 582 467 569 494 569C528 569 552 599 552 633Z"></path></g></g><g data-mml-node="mrow" data-latex="dx^2" transform="translate(220,-719.9)"><g data-mml-node="mi" data-latex="d"><path data-c="1D451" d="M429 632L370 389C349 426 320 445 281 445C216 445 159 412 109 345C63 283 40 218 40 151C40 63 91-11 175-11C218-11 260 12 300 59C311 21 345-11 392-11C461-11 483 71 498 145C498 154 493 159 483 159C474 159 468 152 465 138C445 59 421 19 394 19C377 19 368 33 368 60C368 75 370 91 374 107L516 679L516 683C513 690 507 694 499 694C476 694 434 690 374 683C363 682 357 674 357 660C357 650 366 645 384 645C403 645 429 646 429 632M341 376C351 355 356 341 356 332C355 328 354 323 353 316L304 122C301 111 294 99 285 87C248 42 212 19 177 19C138 19 118 49 118 108C118 132 124 168 136 216C157 301 187 359 224 390C244 407 263 415 282 415C309 415 329 402 341 376Z"></path></g><g data-mml-node="msup" data-latex="x^2" transform="translate(520,0)"><g data-mml-node="mi" data-latex="x"><path data-c="1D465" d="M527 373C527 419 482 442 432 442C389 442 355 419 329 373C308 419 273 442 222 442C173 442 133 419 101 374C74 335 60 306 60 287C60 278 65 273 75 273C84 273 90 278 92 287C111 345 153 413 220 413C253 413 269 392 269 351C269 330 251 252 216 118C199 51 169 18 126 18C112 18 99 21 88 26C114 36 127 54 127 80C127 106 114 119 87 119C54 119 29 91 29 58C29 12 76-11 125-11C167-11 201 12 228 58C247 12 283-11 335-11C383-11 423 12 455 57C482 96 496 125 496 144C496 153 491 158 481 158C472 158 467 153 464 144C447 87 402 18 337 18C304 18 287 38 287 79C287 92 292 120 303 165L337 300C356 375 387 413 431 413C445 413 458 410 469 405C442 396 429 378 429 351C429 325 443 312 470 312C502 312 527 341 527 373Z"></path></g><g data-mml-node="mn" transform="translate(605,289) scale(0.707)" data-latex="2"><path data-c="32" d="M237 666C186 666 143 648 106 612C69 576 50 534 50 483C50 449 75 424 106 424C136 424 161 450 161 480C161 513 137 536 105 536C102 536 100 536 98 535C117 584 161 627 224 627C306 627 352 556 352 470C352 403 318 331 250 255L62 43C49 28 50 29 50 0L421 0L450 180L417 180C409 129 402 100 396 91C391 86 361 84 306 84L139 84L236 179C304 243 390 312 419 365C439 400 449 435 449 470C449 588 357 666 237 666Z"></path></g></g></g><rect width="1728.6" height="60" x="120" y="220"></rect></g></g></g></svg></mjx-container></span>我们常常关注速度（一阶导），但决定曲线凹凸形状的，往往是加速度（二阶导）。那些看似缓慢的积累，可能正酝酿着方向的根本改变。</p></li></ul><p>这里不会有“绝对正确”，只有诚实的记录和开放的对话。就像一个朋友坐在对面，咖啡还冒着热气，而草稿纸上可能画着示意图，或者几行待调试的代码。</p><p>如果你也相信：<strong>思考值得被梳理，分享能连接彼此，真诚的记录自有它的力量</strong>——那么，我想我们已经有了最初的默契。就像两个粒子发生了<strong>“量子纠缠”</strong>，自此，遥远的状态也能彼此关联。</p><p>这是第一篇，一个轻轻的开始。接下来的路，如果你愿意，我们可以一起走走看。</p><p><strong>你最近在思考什么“问题”或“项目”呢？</strong>是像求解方程一样寻找一个确切的解，还是像观察混沌系统一样，在探索其有趣的模式？</p><p>欢迎随时留言告诉我。</p><p>— 你的新朋友</p><p><em>King Hua</em></p>]]>
    </content>
    <id>http://kinghua0629.com/2026/01/21/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0/</id>
    <link href="http://kinghua0629.com/2026/01/21/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0/"/>
    <published>2026-01-21T08:32:39.000Z</published>
    <summary>
      <![CDATA[<div class="code-container" data-rel="Python"><figure class="iseeu highlight python"><table><tr><td class="gutter"><pre><span class="line">1]]>
    </summary>
    <title>第一篇文章</title>
    <updated>2026-04-11T06:09:13.466Z</updated>
  </entry>
  <entry>
    <author>
      <name>King Hua</name>
    </author>
    <content>
      <![CDATA[<p>Welcome to <a class="link" href="https://hexo.io/">Hexo<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>! This is your veryfirst post. Check <a class="link" href="https://hexo.io/docs/">documentation<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a> formore info. If you get any problems when using Hexo, you can find theanswer in <a class="link" href="https://hexo.io/docs/troubleshooting.html">troubleshooting<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a> oryou can ask me on <a class="link" href="https://github.com/hexojs/hexo/issues">GitHub<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>.</p><h2 id="quick-start">Quick Start</h2><h3 id="create-a-new-post">Create a new post</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/writing.html">Writing<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p><h3 id="run-server">Run server</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/server.html">Server<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p><h3 id="generate-static-files">Generate static files</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/generating.html">Generating<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p><h3 id="deploy-to-remote-sites">Deploy to remote sites</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure></div><p>More info: <a class="link" href="https://hexo.io/docs/one-command-deployment.html">Deployment<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p>]]>
    </content>
    <id>http://kinghua0629.com/2026/01/19/hello-world/</id>
    <link href="http://kinghua0629.com/2026/01/19/hello-world/"/>
    <published>2026-01-19T04:30:29.000Z</published>
    <summary>
      <![CDATA[<p>Welcome to <a class="link" href="https://hexo.io/">Hexo<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.]]>
    </summary>
    <title>Hello World</title>
    <updated>2026-06-17T04:37:04.444Z</updated>
  </entry>
</feed>
