In this post, we have to design a simple website using HTML, CSS, and Javascript. So this website should have multiple pages. On the homepage, you need to introduce yourself, your favorite hobby or extracurricular activities, or anything else that interests you. And On the other pages, you can create any other things that you like but you need to use HTML, CSS, and Javascript.
My homepage solution code to the cs50 psets 8 homepage problem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dasun Sucharith</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clock.html">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calculator.html">Calculator</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar end -->
<!-- Main start -->
<div class="container">
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4 hero-img" data-value="5" src="https://dasunsucharith.github.io/assets/image/hero_transparent_me.png" alt="Dasun Sucharith">
<h1 class="display-5 fw-bold">This is CS50</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">
The internet has enabled incredible things: we can use a search engine to research anything imaginable, communicate with friends and family members around the globe, play games, take courses, and so much more. But it turns out that nearly all pages we may visit are built on three core languages, each of which serves a slightly different purpose:
</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-outline-dark btn-lg px-4" onclick="website()">Visit Website</button>
<button type="button" class="btn btn-outline-dark btn-lg px-4" onclick="clock()">Clock</button>
<button type="button" class="btn btn-outline-dark btn-lg px-4" onclick="calendar()">Calendar</button>
<button type="button" class="btn btn-outline-dark btn-lg px-4" onclick="calculator()">Calculator</button>
</div>
</div>
</div>
</div>
<!-- Main end -->
<!-- Footer start -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<span class="d-flex justify-content-center text-muted">© 2022 CS50. All Rights Reserved. By Dasun Sucharith.</span>
</div>
</footer>
<!-- Footer end -->
<script type="text/javascript">
function website(){
location.href = "https://dasunsucharith.github.io/";
}
function clock() {
location.href = "/clock.html";
}
function calendar() {
location.href = "/calendar.html";
}
function calculator() {
location.href = "/calculator.html";
}
</script>
</body>
</html>Simple calculator using HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dasun Sucharith</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clock.html">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/calculator.html">Calculator</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar end -->
<!-- Main start -->
<div class="container mx-auto my-5">
<form class="calculator" name="calc">
<input type="text" class="value form-control" readonly name="txt">
<div class="d-grid gap-2 mt-3">
<button type="button" class="btn btn-danger" onclick="calc.txt.value=''">C</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='/'">/</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='*'">*</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='7'">7</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='8'">8</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='9'">9</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='-'">-</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='4'">4</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='5'">5</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='6'">6</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='+'">+</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='1'">1</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='2'">2</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='3'">3</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='0'">0</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='00'">00</button>
<button type="button" class="btn btn-secondary" onclick="calc.txt.value+='.'">.</button>
<button type="button" class="btn btn-success" onclick="document.calc.txt.value=eval(calc.txt.value)">=</button>
</div>
</form>
</div>
<!-- Main end -->
<!-- Footer start -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<span class="d-flex justify-content-center text-muted">© 2022 CS50. All Rights Reserved. By Dasun Sucharith.</span>
</div>
</footer>
<!-- Footer end -->
</body>
</html>
Calendar Page HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dasun Sucharith</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/clock.html">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calculator.html">Calculator</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar end -->
<!-- Main start -->
<div class="container my-5">
<div id="calendar"></div>
</div>
<!-- Main end -->
<!-- Footer start -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<span class="d-flex justify-content-center text-muted">© 2022 CS50. All Rights Reserved. By Dasun Sucharith.</span>
</div>
</footer>
<!-- Footer end -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
new Calendar("#calendar");
});
</script>
</body>
</html>
Simple clock using HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dasun Sucharith</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/clock.html">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calculator.html">Calculator</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar end -->
<!-- Main start -->
<div class="container my-5 text-center">
<div class="clock mx-auto my-5">
<div class="hour"><div class="hr" id="hr"></div></div>
<div class="min"><div class="mn" id="mn"></div></div>
<div class="sec"><div class="sc" id="sc"></div></div>
</div>
<div id="digitalClock" class="mx-auto">
<span id="hour"></span>
<span id="minutes"></span>
<span id="seconds"></span>
<span id="ampm"></span>
</div>
</div>
<!-- Main end -->
<!-- Footer start -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<span class="d-flex justify-content-center text-muted">© 2022 CS50. All Rights Reserved. By Dasun Sucharith.</span>
</div>
</footer>
<!-- Footer end -->
<script type="text/javascript">
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(()=>{
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6;
hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
let hour = document.querySelector("#hour");
let minutes = document.querySelector("#minutes");
let seconds = document.querySelector("#seconds");
let ampm = document.querySelector("#ampm");
let h = day.getHours();
let m = day.getMinutes();
let s = day.getSeconds();
let am = "AM";
if (h > 12) {
h = h - 12;
am = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
hour.innerHTML = h + ":";
minutes.innerHTML = m + ":";
seconds.innerHTML = s + " ";
ampm.innerHTML = am;
}, 1000);
</script>
</body>
</html>
CSS code of the whole project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dasun Sucharith</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/clock.html">Clock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calculator.html">Calculator</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar end -->
<!-- Main start -->
<div class="container my-5 text-center">
<div class="clock mx-auto my-5">
<div class="hour"><div class="hr" id="hr"></div></div>
<div class="min"><div class="mn" id="mn"></div></div>
<div class="sec"><div class="sc" id="sc"></div></div>
</div>
<div id="digitalClock" class="mx-auto">
<span id="hour"></span>
<span id="minutes"></span>
<span id="seconds"></span>
<span id="ampm"></span>
</div>
</div>
<!-- Calendar Start -->
<div class="calendar my-5">
<div class="calendar-header">
<h2 class="year-title">2025</h2>
</div>
<div class="months-container d-flex flex-wrap justify-content-center">
<div class="month-container">January</div>
<div class="month-container">February</div>
<div class="month-container">March</div>
</div>
</div>
<!-- Calendar End -->
<!-- Footer start -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<span class="d-flex justify-content-center text-muted">© 2022 CS50. All Rights Reserved. By Dasun Sucharith.</span>
</div>
</footer>
<!-- Footer end -->
<script type="text/javascript">
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(()=>{
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6;
hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
let hour = document.querySelector("#hour");
let minutes = document.querySelector("#minutes");
let seconds = document.querySelector("#seconds");
let ampm = document.querySelector("#ampm");
let h = day.getHours();
let m = day.getMinutes();
let s = day.getSeconds();
let am = "AM";
if (h > 12) {
h = h - 12;
am = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
hour.innerHTML = h + ":";
minutes.innerHTML = m + ":";
seconds.innerHTML = s + " ";
ampm.innerHTML = am;
}, 1000);
</script>
</body>
</html>
Hope this helps you to solve the cs50 psets 8 homepage problem.