Improve Consistency

.templates/header/README.md

@@ -1 +1,25 @@
-# Header Markdown file
+# Header Markdown file
+This template is used for creating a website header at the top of my webpages.
+
+## Usage
+To use this template, place the following code in the header of your HTML file:
+```html
+<!-- Load Template HTML -->
+<script
+        src="https://code.jquery.com/jquery-3.3.1.js"
+        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+        crossorigin="anonymous">
+</script>
+<script defer>
+    $(function(){ $("#page-header").load("/.templates/header/header.html",
+        function(){ $("#sdev-header__nav_XXXX").addClass("sdev-header__text-highlight"); });
+    });
+</script>
+```
+
+## Features
+- **Responsive Design**: The header is designed to be responsive and will adjust to the size of the screen.
+- **Customizable**: The header can be customized by changing the CSS and HTML files.
+- **Easy to Use**: The header can be easily added to any webpage by including the code above.
+- **Lightweight**: The header is lightweight and will not slow down the loading of the webpage.
+- **Cross-Browser Compatibility**: The header is compatible with all modern browsers.

.templates/header/header.html

@@ -58,11 +58,11 @@
     <div id="sdev-header__directory" class="sdev-header__padded-row-list">
         <img id="sdev-header__directory-icon" src="/.resources/icons/favicon.ico" alt="Logo" onclick="favicon()">
         <nav id="sdev-header__navbar" class="sdev-header__padded-row-list">
-            <a class="sdev-header__nav-link" id="sdev-header__nav_home" href="/home">Home</a>|
-            <a class="sdev-header__nav-link" id="sdev-header__nav_about-me" href="/about-me">About</a>|
-            <a class="sdev-header__nav-link" id="sdev-header__nav_portfolio" href="/portfolio">Portfolio</a>|
-            <a class="sdev-header__nav-link" id="sdev-header__nav_contact" href="/contact">Contact</a>|
-            <a class="sdev-header__nav-link" id="sdev-header__nav_console" href="/console">Console</a>
+            <a class="sdev-header__nav-link" id="sdev-header__nav-home" href="/home">Home</a>|
+            <a class="sdev-header__nav-link" id="sdev-header__nav-about-me" href="/about-me">About</a>|
+            <a class="sdev-header__nav-link" id="sdev-header__nav-portfolio" href="/portfolio">Portfolio</a>|
+            <a class="sdev-header__nav-link" id="sdev-header__nav-contact" href="/contact">Contact</a>|
+            <a class="sdev-header__nav-link" id="sdev-header__nav-console" href="/console">Console</a>
         </nav>
     </div>
 

.templates/scripts/fetching.js

@@ -1,9 +1,8 @@
-// Fetches a key from the local storage, if it doesn't exist, sets it to the default value
-function fetchLocalStorage(key, defaultValue=null) {
+// Fetches a key from the local storage. If it doesn't exist, sets it to the default value specified.
+function fetchLocalStorage(key, keyDefaultValue=null) {
     if (localStorage.getItem(key) === null) {
-        console.debug("Value for " + key + " not found in the local storage. Setting it to the default value: " + defaultValue);
-        localStorage.setItem(key, defaultValue);
-        return defaultValue;
+        console.debug("Value for " + key + " not found in the local storage. Setting it to the default value: " + keyDefaultValue);
+        localStorage.setItem(key, keyDefaultValue);
     }
     return localStorage.getItem(key);
 }

.templates/scripts/switchLanguage.js

@@ -1,16 +1,16 @@
 // Constants
 DEFAULT_LANGUAGE = "EN";
-PARENT_ID = "sdev-header__language";
-HEADER_TEXT_HIGHLIGHT_CLASS = "sdev-header__text-highlight";
+LANGUAGE_PARENT_ID = "sdev-header__language";
+TEXT_HIGHLIGHT_CLASS = "sdev-header__text-highlight";
 loadLangStartup();
 
 // Page Startup
 function loadLangStartup() {
 
 	// Add the highlight to the current language
 	const langID = fetchLocalStorage("lang", DEFAULT_LANGUAGE);
-	const langHTML = fetchObjectHTML(PARENT_ID, langID);
-		  langHTML.classList.add(HEADER_TEXT_HIGHLIGHT_CLASS);
+	const langHTML = fetchObjectHTML(LANGUAGE_PARENT_ID, langID);
+		  langHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
 
 	// Load the content for the language
 	loadLangContent(langID);
@@ -24,12 +24,12 @@ function switchLanguage(langID) {
 
 	// Remove the highlight from the previous language
 	const previousLangID = fetchLocalStorage("lang");
-	const previousLangHTML = fetchObjectHTML(PARENT_ID, previousLangID);
-		  previousLangHTML.classList.remove(HEADER_TEXT_HIGHLIGHT_CLASS);
+	const previousLangHTML = fetchObjectHTML(LANGUAGE_PARENT_ID, previousLangID);
+		  previousLangHTML.classList.remove(TEXT_HIGHLIGHT_CLASS);
 
 	// Highlight the clicked language
-	const langHTML = fetchObjectHTML(PARENT_ID, langID);
-		  langHTML.classList.add(HEADER_TEXT_HIGHLIGHT_CLASS);
+	const langHTML = fetchObjectHTML(LANGUAGE_PARENT_ID, langID);
+		  langHTML.classList.add(TEXT_HIGHLIGHT_CLASS);
 
 	// Save the selected language to the local storage
 	localStorage.setItem("lang", langID);
@@ -42,6 +42,7 @@ function switchLanguage(langID) {
 function loadLangContent(langID) {
 	const langIDtoContent = {
 		"EN": "English",
+		"ES": "Spanish",
 		"FR": "French"
 	};
 	console.debug("Selected Language: " + langIDtoContent[langID]);

home/home.css

@@ -22,7 +22,7 @@
 /* Item Classes */
 .tab {
     /* Transition */
-    transition: var(--theme-transition);
+    transition: var(--theme-transition, 0.25s);
 }
 .tab:hover {
     /* Text */

home/index.html

@@ -14,7 +14,7 @@
     </script>
     <script defer>
 		$(function(){ $("#page-header").load("/.templates/header/header.html",
-            function(){ $("#sdev-header__nav_home").addClass("sdev-header__text-highlight"); });
+            function(){ $("#sdev-header__nav-home").addClass("sdev-header__text-highlight"); });
         });
 		// $(function(){ $("#page-footer").load("/.templates/footer/footer.html"); });
     </script>