CS50 2023 - Week8 HTML, CSS, JavaScript
概要
Week8では、HTML、CSS、JavaScriptについて学びます。
講義の主な内容は下記です。
インターネット関連：ルーター、TCP/IP、DNS
HTTP関連：URL、GET、POST
HTML関連：タグ、属性、サーバー
CSS関連：プロパティ、セレクタ、フレームワーク
JavaScript関連：変数、条件分岐、ループ、イベント
Lab 8
Trivia
ユーザーが出題された質問（トリビア）に回答するWebページを作成します。このLabもWalkthroughが充実しているので確認しましょう。
以下は実際に私が提出したコードです。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script>
// TODO: Add code to check answers to questions
window.onload = function() {
const correctChoiceAnswer = "Tokyo";
document.querySelectorAll('.choice').forEach(function(choice) {
choice.onclick = function() {
document.querySelectorAll('.choice').forEach(button => button.disabled = true);
this.classList.add(this.textContent === correctChoiceAnswer ? "correct" : "incorrect");
document.querySelector('#result1').textContent = this.textContent === correctChoiceAnswer ? "Correct!" : "Incorrect";
}
});
const correctTextAnswer = "Mount Everest";
document.querySelector('#confirm').onclick = function() {
const answer = document.querySelector('#answer');
answer.disabled = true;
this.disabled = true;
const isCorrect = answer.value.toLowerCase() === correctTextAnswer.toLowerCase();
answer.classList.add(isCorrect ? "correct" : "incorrect");
document.querySelector('#result2').textContent = isCorrect ? "Correct!" : "Incorrect";
}
}
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<!-- TODO: Add multiple choice question here -->
<h3>What is the capital of Japan?</h3>
<button class="choice">Kyoto</button>
<button class="choice">Tokyo</button>
<button class="choice">Osaka</button>
<p id="result1"></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
<h3>What is the tallest mountain in the world?</h3>
<input id="answer" type="text">
<button id="confirm">Confirm</button>
<p id="result2"></p>
</div>
</div>
</body>
</html>styles.css
body {
background-color: #fff;
color: #212529;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0;
text-align: left;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.header {
background-color: #477bff;
color: #fff;
margin-bottom: 2rem;
padding: 2rem 1rem;
text-align: center;
}
.section {
padding: 0.5rem 2rem 1rem 2rem;
}
.section:hover {
background-color: #f5f5f5;
transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 48px;
}
button,
input[type="submit"] {
background-color: #d9edff;
border: 1px solid transparent;
border-radius: 0.25rem;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
text-align: center;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
vertical-align: middle;
}
input[type="text"] {
line-height: 1.8;
width: 25%;
}
input[type="text"]:hover {
background-color: #f5f5f5;
transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}
.correct {
background-color: green;
color: white;
}
.incorrect {
background-color: red;
color: white;
}Problem Set 8
Homepage
以下の条件を満たすホームページを作成します。
ページを4つ以上作成すること
index.htmlを必ず作成すること
<html>、<head>、<body>、<title>以外のHTMLタグを10種類使用すること
Bootstrapの機能を1つ以上使用すること
独自に作成したスタイルシートを1つ以上使用すること
CSSセレクタを5つ以上使用すること
CSSプロパティを5つ以上使用すること
JavaScriptの機能を1つ以上組み込むこと
モバイルデバイス、ノートパソコン、デスクトップで正しく表示できるページであること
以下は実際に私が提出したコードです。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>T's Webpage</title>
</head>
<body id="index">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">T's Webpage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link nav-index" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link nav-about" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link nav-projects" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Welcome to T's Webpage!</h1>
<p>This is a demonstration site for CS50.</p>
</div>
<script src="script.js"></script>
</body>
</html>about.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>T's Webpage - About</title>
</head>
<body id="about">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">T's Webpage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-index" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link nav-about" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link nav-projects" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>About T</h1>
<p>My name is T. I have worked as a project manager for web-based projects for many years.<br>
Although I was very involved in the process, I often found myself depending on programmers to write the code.<br>
I decided to change this and took it upon myself to learn the necessary skills through CS50. Now, I am passionate about developing with HTML, CSS, and JavaScript.<br>
I love problem-solving and the continuous learning involved in programming. <br>
In my spare time, I enjoy going for walks and reading books.</p>
</div>
<script src="script.js"></script>
</body>
</html>projects.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>T's Webpage - Projects</title>
</head>
<body id="projects">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">T's Webpage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-index" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link nav-about" href="about.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link nav-projects" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Projects</h1>
<p>
</div>
<div class="card" style="width: 18rem; position: absolute; top: 160px; left: 50px;">
<div class="card-body">
<h5 class="card-title">Airline Mileage Conversion Campaign</h5>
<p class="card-text">Managed the creation and operation of a campaign page for a certain airline.</p>
<a href="project1_details.html" class="btn btn-primary">more</a>
</div>
</div>
<div class="card" style="width: 18rem; position: absolute; top: 400px; left: 50px;">
<div class="card-body">
<h5 class="card-title">Real Estate Website and Database Development</h5>
<p class="card-text">Built user-friendly website & database for leading real estate company.</p>
<a href="project2_details.html" class="btn btn-primary">more</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>project1_details.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>T's Webpage - Airline Mileage Conversion Campaign</title>
</head>
<body id="projects">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">T's Webpage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-index" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link nav-about" href="about.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link nav-projects" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Airline Mileage Conversion Campaign</h1>
<p>
The Airline Mileage Conversion Campaign was a project that I managed, which involved creating and operating a campaign page for a certain airline.<br>
This campaign allowed customers to convert their accumulated airline miles into points that could be used with other companies.
</p>
<p>
The project presented several challenges and required a thorough understanding of the business model.<br>
I was responsible for coordinating with multiple stakeholders, including the airline, the partnering companies, and the technical team tasked with building the campaign page.<br>
I also had to ensure that the user experience was seamless and that the page design was intuitive and user-friendly.
</p>
<p>
Through this project, I was able to develop my project management skills, deepen my understanding of the aviation and loyalty program industries, and gain experience in managing a cross-functional team. It was a highly rewarding experience that has significantly contributed to my professional growth.
</p>
</div>
<script src="script.js"></script>
</body>
</html>project2_details.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>T's Webpage - Real Estate Website and Database Development</title>
</head>
<body id="projects">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">T's Webpage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-index" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link nav-about" href="about.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link nav-projects" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Real Estate Website and Database Development</h1>
<p>
The Real Estate Website and Database Development project involved designing and building a comprehensive web platform for a leading real estate company.
</p>
<p>
As the project manager, I collaborated closely with the company's stakeholders to gather requirements and understand their business processes and objectives.
Based on their needs, I led a team of developers and designers to create a user-friendly website that showcased their property listings, provided search functionality, and offered an intuitive user interface for potential buyers and renters.
</p>
<p>
Additionally, we developed a robust and scalable database system to efficiently manage property data, including details such as pricing, location, amenities, and images.
The database architecture was designed to optimize search queries and ensure data integrity and security.
We implemented features such as advanced search filters, saved searches, and personalized user profiles to enhance the user experience.
</p>
<p>
Throughout the project, I closely monitored the development progress, conducted quality assurance tests, and coordinated with the client to gather feedback and incorporate necessary changes.
The successful completion of the Real Estate Website and Database Development project has enabled the client to effectively showcase their properties, streamline their operations, and provide an enhanced experience to their users.
</p>
</div>
<script src="script.js"></script>
</body>
</html>contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>T's Webpage - Contact</title>
</head>
<body id="contact">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">T's Webpage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-index" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link nav-about" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link nav-projects" href="projects.html">Projects</a>
</li>
<li class="nav-item active">
<a class="nav-link nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Contact T</h1>
<p>I'd love to hear from you! Here are a few ways to get in touch with me:</p>
<ul>
<li>Email: <a href="mailto:t@example.com">t@example.com</a></li>
<li>Phone: <a href="tel:+12345678901">+1 (234) 567-8901</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>styles.css
body {
font-family: Arial, sans-serif;
}
.navbar-brand {
font-weight: bold;
}
.container h1 {
margin-top: 20px;
}
#index .nav-index,
#about .nav-about,
#projects .nav-projects,
#contact .nav-contact {
font-weight: bold;
}script.js
document.querySelector('h1').onclick = function() {
alert('You clicked the title!');
}さいごに
Triviaは比較的シンプルな課題ですが、Homepageは構成やテーマを独自に考える必要があるため、Week0 Scratch以来の独創的な課題と言えます。
ホームページって元々はブラウザを起動した際に最初に表示するページとい指すもので、自分がインターネット上に公開しているものを英語では単にWebsiteという…はずだったんですが、この課題でのHomepageは明らかに後者の意味で使われています。言葉が逆輸入されたのかもしれませんね。
この記事が気に入ったらサポートをしてみませんか？