Updated JS File for getting Resume Link

js/script.js

@@ -1,14 +1,10 @@
 'use strict';
 
-
-
 // element toggle function
 const elementToggleFunc = function(elem) {
     elem.classList.toggle("active");
 }
 
-
-
 // sidebar variables
 const sidebar = document.querySelector("[data-sidebar]");
 const sidebarBtn = document.querySelector("[data-sidebar-btn]");
@@ -18,8 +14,6 @@ sidebarBtn.addEventListener("click", function() {
     elementToggleFunc(sidebar);
 });
 
-
-
 // testimonials variables
 const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
 const modalContainer = document.querySelector("[data-modal-container]");
@@ -39,26 +33,19 @@ const testimonialsModalFunc = function() {
 
 // add click event to all modal items
 for (let i = 0; i < testimonialsItem.length; i++) {
-
     testimonialsItem[i].addEventListener("click", function() {
-
         modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
         modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
         modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
         modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
-
         testimonialsModalFunc();
-
     });
-
 }
 
 // add click event to modal close button
 modalCloseBtn.addEventListener("click", testimonialsModalFunc);
 overlay.addEventListener("click", testimonialsModalFunc);
 
-
-
 // custom select variables
 const select = document.querySelector("[data-select]");
 const selectItems = document.querySelectorAll("[data-select-item]");
@@ -72,55 +59,42 @@ select.addEventListener("click", function() {
 // add event in all select items
 for (let i = 0; i < selectItems.length; i++) {
     selectItems[i].addEventListener("click", function() {
-
         let selectedValue = this.innerText.toLowerCase();
         selectValue.innerText = this.innerText;
         elementToggleFunc(select);
         filterFunc(selectedValue);
-
     });
 }
 
 // filter variables
 const filterItems = document.querySelectorAll("[data-filter-item]");
 
 const filterFunc = function(selectedValue) {
-
     for (let i = 0; i < filterItems.length; i++) {
-
         if (selectedValue === "all") {
             filterItems[i].classList.add("active");
         } else if (selectedValue === filterItems[i].dataset.category) {
             filterItems[i].classList.add("active");
         } else {
             filterItems[i].classList.remove("active");
         }
-
     }
-
 }
 
 // add event in all filter button items for large screen
 let lastClickedBtn = filterBtn[0];
 
 for (let i = 0; i < filterBtn.length; i++) {
-
     filterBtn[i].addEventListener("click", function() {
-
         let selectedValue = this.innerText.toLowerCase();
         selectValue.innerText = this.innerText;
         filterFunc(selectedValue);
-
         lastClickedBtn.classList.remove("active");
         this.classList.add("active");
         lastClickedBtn = this;
-
     });
-
 }
 
-
-
 // contact form variables
 const form = document.querySelector("[data-form]");
 const formInputs = document.querySelectorAll("[data-form-input]");
@@ -129,37 +103,54 @@ const formBtn = document.querySelector("[data-form-btn]");
 // add event to all form input field
 for (let i = 0; i < formInputs.length; i++) {
     formInputs[i].addEventListener("input", function() {
-
         // check form validation
         if (form.checkValidity()) {
             formBtn.removeAttribute("disabled");
         } else {
             formBtn.setAttribute("disabled", "");
         }
-
     });
 }
 
-
-
 // page navigation variables
 const navigationLinks = document.querySelectorAll("[data-nav-link]");
 const pages = document.querySelectorAll("[data-page]");
 
 // add event to all nav link
 for (let i = 0; i < navigationLinks.length; i++) {
     navigationLinks[i].addEventListener("click", function() {
+        for (let j = 0; j < pages.length; j++) {
+            if (this.innerHTML.toLowerCase() === pages[j].dataset.page) {
+                pages[j].classList.add("active");
+                navigationLinks[j].classList.add("active");
+                window.scrollTo(0, 0);
+            } else {
+                pages[j].classList.remove("active");
+                navigationLinks[j].classList.remove("active");
+            }
+        }
+    });
+}
+
+// Function to navigate to the section based on hash
+const navigateToSection = function() {
+    const sectionId = window.location.hash.slice(1);
+    const section = document.getElementById(sectionId);
 
+    if (section) {
         for (let i = 0; i < pages.length; i++) {
-            if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
+            if (pages[i].id === sectionId) {
                 pages[i].classList.add("active");
-                navigationLinks[i].classList.add("active");
-                window.scrollTo(0, 0);
             } else {
                 pages[i].classList.remove("active");
-                navigationLinks[i].classList.remove("active");
             }
         }
+        window.scrollTo(0, 0);
+    }
+}
 
-    });
-}
+// Add hashchange event listener
+window.addEventListener('hashchange', navigateToSection);
+
+// Check initial hash on page load
+window.addEventListener('load', navigateToSection);