RK-J

Task #3148

Updated by Ayush Khandelwal over 1 year ago

*Folder Structure:* 
 <pre> 
 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 
 </pre> 

 *How to include one html file into another?* 
 Reference: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file 

 html: 
 <pre> 
 <div data-include="header.html"></div> 
 </pre> 

 javascript: (put this code in config.js and include it in the head tag of the html file) 
 <pre> 
 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); 
       }); 
   }); 
 }); 
 </pre>

Back