<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': '<h3>Codeopedia</h3> <a href="/index.html">Homepage</a> <a href="/glossary.html">Glossary</a> <a href="/contact.html">Sign Up</a> <p>Welcome to Codeopedia! We\'re a non-profit organization with a focus on helping the world learn how to code!</p>',
'glossary.html': '<h3>Codeopedia</h3> <a href="/index.html">Homepage</a> <a href="/glossary.html">Glossary</a> <a href="/contact.html">Sign Up</a> <h3>Welcome to the glossary! We\'ll soon add lists of everything you need to know about HTML on this page</h3>',
'contact.html': '<h3>Codeopedia</h3> <a href="/index.html">Homepage</a> <a href="/glossary.html">Glossary</a> <a href="/contact.html">Sign Up</a> <div> <h4>Sign up for an account</h4> <input placeholder="Email"> <br> <input placeholder="Password" type="password"> <br> <input type="Checkbox"> <em>Keep me up to date on new articles</em> <br> <button>Sign up</button> </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>]]>