dev env - 2. Setup Expand
Goal
To make our sandbox area easier to manage and use as a sandbox.
Pre Requirements
Dev Env Setup Project
Process
Navigation as a File
To start our modularization process we are going to take the navigation to it's own html file called: nav.html and place it in the 'include' folder. Something like this:
<!-- nav.html -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="learn.html">Learn</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Javascript
To preform operations HTML needs a helper, in our case Javascript. Add the following code to the script.js file
// script.js
function loadNav() {
fetch('nav.html')
.then(response => response.text())
.then(data => {
document.getElementById('nav-placeholder').innerHTML = data;
});
}
document.addEventListener('DOMContentLoaded', loadNav);
NOTE: Ensure to update the getElementById to the proper element for your project
HTML Refactor
- If not already done, remove the 'inline' navigation for each HTML page.
- Test each page and each link on each page to ensure all is working as intended
Reflect
1. Using this type of system what other components might benefit from this type of treatment?Revamp and Zip
- Preform a refactor to make one additional component a module like we did with the navigation.
- Save all files and create a ZIP of the project folder and upload it to your My Files.