// nav bar scroll effect const scrollLimit = 150; window.onscroll = () => { // check if scrolled past limit if so add scrolled class to change background of nav if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit) { document.querySelector("nav").classList.add("scrolled"); } else { document.querySelector("nav").classList.remove("scrolled"); } }; document.querySelector("#goBackToTop").addEventListener("click", () => { window.scrollTo(0, 0); }); /** * getProjectData function * Gets the project data from the backend route and appends the data on to the timeline. */ function getProjectData() { fetch("/api/projectData").then(res => { res.json().then(json => { if (res.ok) { json.forEach(item => { if (item["isMainProject"] === 1) { document.querySelector("#mainProj").innerHTML = ` <h1>${item["title"]}</h1> <div> <img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" alt=""> <div class="flexRow"> <p>${item["information"]}</p> <div class="flexCol"> <a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a> <a href="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a> </div> </div> </div> `; return null; } document.querySelector("#otherProj").innerHTML += ` <div class="oProjItem"> <img src="${(item["imgLocation"] === "") ? "../imgs/placeholder.png" : item["imgLocation"]}" alt=""> <div class="flexCol"> <div> <h3>${item["title"]}</h3> <p>${item["information"]}</p> </div> <div> <a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut"${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a> <a href="${(item["githubLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Git</a> </div> </div> </div> `; }) } }) }) } document.addEventListener('DOMContentLoaded', () => { // get projectData getProjectData(); // update the year in the footer document.getElementById("year").innerHTML = new Date().getFullYear().toString(); });