Task #3148
Feature #3082: Create a JS (without any JS framework) site with limited pages
Changes to the folder structure.
Start date:
07/26/2023
Due date:
07/26/2023
% Done:
60%
Estimated time:
3.00 h
Description
Folder Structure:
onlyjs
- scripts
- home
- home.js
- about-us
- about-us.js
- contact-us
- contact-us.js
- document
- document.js
- bobbing-pointer.js
- privacy-policy
- privacy-policy.js
.
.
- assets
- images
- bookmark.jpg
- icons
- rapidken.png
- styles
- this will contain any third party css like 'bootstrap.css'
- styles
- home.css
- about-us.css
- shared
- scripts
- config.js
- modal.js
- views
- header
- header.html
- search-bar.html
- footer
- footer.html
- styles
- header.css
- footer.css
- views
- home.html
- about-us.html
How to include one html file into another?
Reference: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file
html:
<div data-include="header.html"></div>
javascript: (put this code in config.js and include it in the head tag of the html file)
document.addEventListener("DOMContentLoaded", function() {
var includes = document.querySelectorAll("[data-include]");
includes.forEach(function(include) {
var file = "views/" + include.dataset.include + ".html";
fetch(file)
.then(function(response) {
return response.text();
})
.then(function(data) {
include.innerHTML = data;
})
.catch(function(error) {
console.error("Error loading the file:", error);
});
});
});