Let's add a list of links inside the portfolio webpage.

<html>
<head>
<style>
/* Make all links look active even when href isn't set. We do this so we can set the onclick attribute instead. */
a { color: #0000EE; text-decoration: underline; cursor: pointer; }
a:visited { color: #551A8B; text-decoration: underline; cursor: pointer; }
</style>
</head>
<body>
<div id="content">
</div>
<script>
/* Lukas quickly coded the stuff below. Use at your own risk....
//
// This script fakes links to local webpages by replacing instances of href="/pageName.html" with onclick="load(pageName);"
// The load(pageName) function replaces content from one webpage with content from another.
//
// OG pages copied from Course Builder
// Example: { 'index.html': '<h1>Hello, World!</h1>' }
*/
let pageBodies = {
'index.html': '<div> <h3>Nina Davidson</h3> <a href="/index.html">Home</a> <a href="/portfolio.html">Portfolio</a> <a href="/contact.html">Get in touch</a> </div> <div> <p>Hi! I\'m Nina and I\'m a freelance web designer.</p> <img src="https://mimo.app/i/nina.png" width="300" height="300"> <p>I first learned how to code on an app on my phone a few years ago. Now, I\'m coding part-time for a living while working remotely from all around the world.</p> <p>See my latest project <a href="/404.html">here</a>.</p> </div>',

'portfolio.html': '<div> <h3>Nina Davidson</h3> <a href="/index.html">Home</a> <a href="/portfolio.html">Portfolio</a> <a href="/contact.html">Get in touch</a> </div> <div> <p>Here\'s a list of some of my previous work and satisfied clients.</p> </div>',

'contact.html': '<div> <h3>Nina Davidson</h3> <a href="/index.html">Home</a> <a href="/portfolio.html">Portfolio</a> <a href="/contact.html">Get in touch</a> </div> <div> <h4>Get in touch</h4> </div>',

'404.html': '<div> <h3>Nina Davidson</h3> <a href="/index.html">Back to homepage</a> </div> <div> <h3>404 - Page not found!</h3> <p>That\'s an oooopppsieee!</p> <img src="https://mimo.app/i/ghost.png" width="300" height="300"> </div>',
};
/*
// Create a pathToOnClickMapping object where keys are href absolute paths and values are onclick attributes replacing the page's body
// Example: { 'href="/trail.html"': 'load(\'trail.html\');' }
*/
let pathToOnClickMapping = {};
Object.keys(pageBodies).forEach((key) => {
pathToOnClickMapping['href="/' + key + '"'] = 'onclick="load(\'' + key + '\');"';
});
let regex = new RegExp(Object.keys(pathToOnClickMapping).join("|"), "gi");
/*
// Create a pagesWithAbsolutePathsReplaced object that stores webpage bodies with absolute paths replaced with onclick=load(pageName)
*/
let pagesWithAbsolutePathsReplaced = {};
Object.keys(pageBodies).forEach((key) => {
pagesWithAbsolutePathsReplaced[key] = pageBodies[key].replace(regex, function(matched) {
return pathToOnClickMapping[matched];
});
});
/*
// Replace content of webpage with page from pagesWithAbsolutePathsReplaced
*/
function load(pageName) {
document.getElementById('content').innerHTML = pagesWithAbsolutePathsReplaced[pageName];
};
load('index.html');
</script>
</body>
</html>]]>