RK-J

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);
      });
  });
});