Cleaned up projects.js

ZachMc21 · Nov 28, 2024 · 82d4839 · 82d4839
1 parent 1db0fee
commit 82d4839
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,6 @@ Active backlog:
     - https://vincoding.com/fade-in-elements-scroll-jquery/
     - https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/
     - https://dev.to/selbekk/how-to-fade-in-content-as-it-scrolls-into-view-10j4
-- Mobile-responsive display
-    - In progress - in mobile view, projects menu does not display
+- In mobile view, get Projects drop-down menu text to show currently-selected category
 - Change CSS selector for `<div class="project_divider fade-in" id="end">` to select the last div of that class type
 - When the user scrolls past the bottom of the page, footer background color does not continue
diff --git a/webpage/projects.js b/webpage/projects.js
@@ -1,6 +1,6 @@
 let activeContent = "";
 
-//Declare global variablaes
+//Global variablaes
 var projectMenu;
 var projectMenuLinks;
 var projectContentList;
@@ -14,6 +14,7 @@ var mobileMax = 480;
 //Watch for window resizing
 window.addEventListener("resize", checkWindowSize);
 
+//On window load
 window.onload = function() {
     //Initialize global variables
     projectMenu = document.getElementById("project_menu");
@@ -39,6 +40,29 @@ function checkWindowSize() {
     }
 }
 
+//BEGIN HELPER FUNCTIONS
+
+//---UNIVERSAL FUNCTIONS
+function resetProjectMenu() {
+    for (let i=0; i<numProjectCategories; i++) {
+        if (projectMenuLinks[i].classList.contains("active")) {
+            projectMenuLinks[i].classList.remove("active");
+        }
+    }
+}
+
+function resetProjectContent() {
+    for (let i=0; i<numProjectCategories; i++) {
+        projectContentList[i].style.display="none";
+    }
+}
+
+function setActiveContent(contentItem) {
+    contentItem.style.display = 'block';
+}
+
+
+//---DESKTOP FUNCTIONS
 function loadDesktop() {
     projectMenuDropdown.style.display = "none";
     //Add an event listener to each item in projectMenuLinks
@@ -50,9 +74,15 @@ function loadDesktop() {
             setActiveContent(projectContentList[i]);
         });
     }
-    console.log("desktop JS loaded");
+    //console.log("desktop JS loaded");
+}
+
+function setActiveMenu(menuItem) {
+    menuItem.classList.add("active");
 }
 
+
+//---MOBILE FUNCTIONS
 function loadMobile() {
     projectMenuDropdown.style.display = "block";
     //console.log(projectMenuDropdown.style.display);
@@ -79,7 +109,7 @@ function loadMobile() {
             }
         }
     });
-    console.log("mobile JS loaded");
+    //console.log("mobile JS loaded");
 }
 
 function showDropdownList() {
@@ -89,7 +119,7 @@ function showDropdownList() {
             projectMenuLinks[i].classList.add("visible");
         }
     }
-    console.log("Dropdown list shown");
+    //console.log("Dropdown list shown");
 }
 function hideDropdownList() {
     for (let i=0; i<numProjectCategories; i++) {
@@ -98,33 +128,12 @@ function hideDropdownList() {
             projectMenuLinks[i].classList.add("invisible");
         }
     }
-    console.log("Dropdown list hidden");
+    //console.log("Dropdown list hidden");
 }
 
 //Change the Projects button's text to be that category
+//TODO not working
 function setActiveDropdown(menuItem) {
     var text = menuItem.text;
     projectMenuDropdown.setActiveContent = "&or; " + text;
-}
-
-function resetProjectMenu() {
-    for (let i=0; i<numProjectCategories; i++) {
-        if (projectMenuLinks[i].classList.contains("active")) {
-            projectMenuLinks[i].classList.remove("active");
-        }
-    }
-}
-
-function resetProjectContent() {
-    for (let i=0; i<numProjectCategories; i++) {
-        projectContentList[i].style.display="none";
-    }
-}
-
-function setActiveMenu(menuItem) {
-    menuItem.classList.add("active");
-}
-
-function setActiveContent(contentItem) {
-    contentItem.style.display = 'block';
 }