Issue12

[mmt456]

Problem:
Website not modular, specifically header, navbar, and footer code are repetitive. If changes are desired of these features, every page that the feature appeared on must be edited. This is a problem as it can be time consuming and easy to make mistakes.

Solution:
Use HTML Templates to create a custom header. Two javascript files were created in the “js folder defining the header/navbar code and the footer code: headerTemplate.js & footerTemplate.js.

On each of the pages these feature need to occur on (almost all of them), add to the head tag

<script src="js/headerTemplate.js" type="text/javascript" defer></script>
<script src="js/footerTemplate.js" type="text/javascript" defer></script>

And add the new custom tag where the header/footer should be on the page

<header-component></header-component>
<footer-component></footer-component>

Moving on:

• Update any changes to the headerTemplate.js and footerTemplate.js files to update the header and footer, respectively.
• Add the new custom tags onto any new pages that need a header and/or footer on them.

Sources:

• Why using jquery didn’t work: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp?utm_source=devtools&utm_medium=firefox-cors-errors&utm_campaign=default
• HTML Templates walkthrough: https://www.freecodecamp.org/news/reusable-html-components-how-to-reuse-a-header-and-footer-on-a-website/