1 line
5.0 KiB
JavaScript
1 line
5.0 KiB
JavaScript
const scrollLimit=150;function getTimelineData(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}</h3>\n\t\t\t\t\t<span>Grade: ${e.grade}</span>\n\t\t\t\t\t<p class="timelineText">${e.course}</p>\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o="0000-00-00"===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t<h3 class="timelineHeader">${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}</h3>\n\t\t\t\t\t<span>${e.companyName} - ${e.area}</span>\n\t\t\t\t\t<p class="timelineText">${e.title}</p>\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{if(t.ok)for(let t=0;t<4;t++)1!==e[t].isMainProject?document.querySelector("#otherProj div").innerHTML+=`\n <div class="oProjItem">\n <img src="${""===e[t].imgLocation?"../imgs/placeholder.png":e[t].imgLocation}" alt="">\n <div class="flexCol">\n <div>\n \t<h3>${e[t].title}</h3>\n <p>${e[t].information}</p>\n </div>\n <div>\n <a href="${"N/A"===e[t].projectLink?"#":e[t].projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${"N/A"===e[t].projectLink?'disabled="disabled"':""}>View Project</a>\n <a href="${"N/A"===e[t].githubLink?"#":e[t].gitubLink}" class="btn btnOutline boxShadowIn boxShadowOut">${"N/A"===e[t].githubLink?'disabled="disabled"':""}Git</a>\n </div>\n </div>\n </div>\n `:document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t<h1>${e[t].title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<img src="${""===e[t].imgLocation?"../imgs/placeholder.png":e[t].imgLocation}" alt="">\n\t\t\t\t\t\t\t<div class="flexRow">\n\t\t\t\t\t\t\t\t<p>${e[t].information}</p\n\t\t\t\t\t\t\t\t<div class="flexCol">\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===e[t].projectLink?"#":e[t].projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut" ${"N/A"===e[t].projectLink?'disabled="disabled"':""}>View Project</a>\n\t\t\t\t\t\t\t\t\t<a href="${"N/A"===e[t].gitLink?"#":e[t].gitLink}" class="btn btnOutline boxShadowIn boxShadowOut" ${"N/A"===e[t].gitLink?'disabled="disabled"':""}>Git</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let t="";document.querySelectorAll("section").forEach((e=>{const n=e.offsetTop;window.pageYOffset>=n-60&&(t=e.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((e=>{e.classList.remove("active"),e.href.includes(t)&&""!==t?e.classList.add("active"):""===t&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{getTimelineData(),getProjectData(),document.getElementById("year").innerHTML=(new Date).getFullYear().toString()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))})); |