fix: adjustment in javascript code

funaki-roger · Sep 13, 2024 · 10115f9 · 10115f9
1 parent 5b072c8
commit 10115f9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 49 deletions.
diff --git a/css/style.css b/css/style.css
@@ -874,6 +874,10 @@ h3.my-profession
 
 @media (max-width: 1199px)
 {
+    .section .container
+    {
+        padding-top: 70px;
+    }
     .aside
     {
         left: -270px;

diff --git a/index.html b/index.html
@@ -90,7 +90,7 @@ <h3 class="my-profession"><span class="typing">I'm a QA Analyst</span></h3>
                             </p>
                             <a href="https://github.com/funaki-roger/" class="btn" target="_blank">GitHub</a>
                             <a href="https://www.linkedin.com/in/rogerfunaki/" class="btn" target="_blank">LinkedIn</a> 
-                            <a href="#contact" class="btn hire-me">My contacts</a>
+                            <a href="#contact" data-section-index="0" class="btn hire-me">My contacts</a>
                         </div>
                         <div class="home-img padd-15">
                             <img src="images/perfil.png" alt="">

diff --git a/js/script.js b/js/script.js
@@ -10,70 +10,91 @@ var typed = new Typed(".typing", {
 
 const nav = document.querySelector(".nav"),
     navList = nav.querySelectorAll("li"),
-    totalNavList = navList.length,
+    totalNavList = navList.length; 
     allSection = document.querySelectorAll(".section"),
     totalSection = allSection.length;
-
-for (let i = 0; i < totalNavList; i++) {
-    const a = navList[i].querySelector("a");
-    a.addEventListener("click", function () {
-        for (let i = 0; i < totalSection; i++) {
-            allSection[i].classList.remove("back-section");
-        }
-        for (let j = 0; j < totalNavList; j++) {
-            if (navList[j].querySelector("a").classList.contains("active")) {
-                allSection[j].classList.add("back-section");
+    for(let i=0; i<totalNavList; i++)
+    {
+        const a = navList[i].querySelector("a");
+        a.addEventListener("click", function()
+        {
+            removeBackSection();
+            for(let j=0; j<totalNavList; j++)
+            {
+                if(navList[j].querySelector("a").classList.contains("active"))
+                {
+                    addBackSection(j);
+                }
+                navList[j].querySelector("a").classList.remove("active");
+            }
+            this.classList.add("active")
+            showSection(this);
+            if(window.innerWidth < 1200)
+            {
+                asideSectionTogglerBtn();
             }
-            navList[j].querySelector("a").classList.remove("active");
+        })
+    }
+
+    function showSection(element)
+    {
+        for(let i=0; i<totalSection; i++)
+        {
+            allSection[i].classList.remove("active");
         }
-        this.classList.add("active");
-        showSection(this);
-        if (window.innerWidth < 1200) {
-            asideSectionTogglerBtn();
+        const target = element.getAttribute("href").split("#")[1];
+        document.querySelector("#" + target).classList.add("active");
+    }
+
+    function removeBackSection()
+    {
+        for(let i=0; i<totalSection; i++)
+        {
+            allSection[i].classList.remove("back-section");
         }
-    });
-}
+    }
 
-function showSection(element) {
-    for (let i = 0; i < totalSection; i++) {
-        allSection[i].classList.remove("active");
+    function addBackSection(num)
+    {
+        allSection[num].classList.add("back-section");
     }
-    const target = element.getAttribute("href").split("#")[1];
-    document.querySelector("#" + target).classList.add("active");
-}
 
-function updateNav(element) {
-    const target = element.getAttribute("href").split("#")[1];
-    for (let i = 0; i < totalNavList; i++) {
-        const link = navList[i].querySelector("a");
-        if (link.getAttribute("href").split("#")[1] === target) {
-            link.classList.add("active");
-        } else {
-            link.classList.remove("active");
+    function updateNav(element)
+    {
+        for(let i=0; i<totalNavList; i++)
+        {
+            navList[i].querySelector("a").classList.remove("active");
+            const target = element.getAttribute("href").split("#")[1];
+            if(target === navList[i].querySelector("a").getAttribute("href").split("#")[1])
+            {
+                navList[i].querySelector("a").classList.add("active");
+            }
         }
     }
-}
 
-// Verifica se o botão "Hire Me" existe antes de adicionar o evento
-const hireMeBtn = document.querySelector(".hire-me");
-if (hireMeBtn) {
-    hireMeBtn.addEventListener("click", function () {
+    document.querySelector(".hire-me").addEventListener("click", function()
+    {
+        const sectionIndex = this.getAttribute("data-section-index");
         showSection(this);
         updateNav(this);
+        removeBackSection();
+        addBackSection(sectionIndex);
     });
-}
 
-const navTogglerBtn = document.querySelector(".nav-toggler"),
+    const navTogglerBtn = document.querySelector(".nav-toggler"),
     aside = document.querySelector(".aside");
 
-navTogglerBtn.addEventListener("click", () => {
-    asideSectionTogglerBtn();
-});
+    navTogglerBtn.addEventListener("click", () => 
+    {
+        asideSectionTogglerBtn();
+    });
 
-function asideSectionTogglerBtn() {
-    aside.classList.toggle("open");
-    navTogglerBtn.classList.toggle("open");
-    for (let i = 0; i < totalSection; i++) {
-        allSection[i].classList.toggle("open");
+    function asideSectionTogglerBtn() 
+    {
+        aside.classList.toggle("open");
+        navTogglerBtn.classList.toggle("open");
+        for(let i=0; i<totalSection; i++ )
+        {
+            allSection[i].classList.toggle("open");
+        }
     }
-}