/*****************/ /* EDITABLE INFO */ /*****************/ /* -------------------------------------------------------- */ const NAME = "Norm"; const CARDS = [ { name: "Northpass AWS", icon: "ri-admin-line", link: "https://app.northpass.com/admin", }, { name: "Northpass Azure", icon: "ri-takeaway-line", link: "https://app2.northpass.com/admin", }, { name: "Gmail", icon: "ri-mail-line", link: "https://gmail.com", }, { name: "Calendar", icon: "ri-calendar-line", link: "https://calendar.google.com", }, { name: "Hubspot - Service Board", icon: "ri-space-ship-line", link: "https://app.hubspot.com/contacts/392014/objects/0-5/views/all/board", }, { name: "Jira - SE Board", icon: "ri-open-arm-fill", link: "https://northpass.atlassian.net/jira/software/c/projects/ES/boards/1", }, { name: "Confluence", icon: "ri-stack-fill", link: "https://northpass.atlassian.net/wiki/home", }, { name: "Chili Piper - 30 Min", icon: "ri-calendar-2-line", link: "https://northpass.na.chilipiper.com/book/me/norm-rasmussen", clipboard: true, }, { name: "Looker - External", icon: "ri-bubble-chart-line", link: "https://northpass.looker.com/folders/4976", }, { name: "Looker - Internal", icon: "ri-bubble-chart-fill", link: "https://northpasshq.looker.com/dashboards/21", }, ]; /* -------------------------------------------------------- */ /******************/ /* CLOCK FUNCTION */ /******************/ const DAYS = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ]; const MONTHS = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; const updateDate = () => { // Create a new Date object and get the complete Date/Time information const completeDate = new Date(); // Time Variables let currentHour = formatDigit(completeDate.getHours()); let currentMinute = formatDigit(completeDate.getMinutes()); // Date Variables let currentDay = completeDate.getDay(); let currentNumber = completeDate.getDate(); let currentMonth = completeDate.getMonth(); let currentYear = completeDate.getFullYear(); // Update the Time currentTime.innerHTML = `${ currentHour % 12 == 0 ? "12" : currentHour % 12 }:${currentMinute} ${currentHour > 11 ? "PM" : "AM"}`; // Update the Date currentDate.innerHTML = `${DAYS[currentDay]} ${currentNumber}, ${MONTHS[currentMonth]} ${currentYear}`; // Create a Loop setTimeout(() => { updateDate(); }, 1000); }; const formatDigit = (digit) => { return digit > 9 ? `${digit}` : `0${digit}`; }; /******************/ /* CARDS FUNCTION */ /******************/ const printCards = () => { for (const card of CARDS) { let currentCard = document.createElement("a"); let currentCardText = document.createElement("p"); currentCardText.appendChild(document.createTextNode(card.name)); let currentCardIcon = document.createElement("i"); currentCardIcon.classList.add(card.icon); // Style the Card Element currentCard.classList.add("card"); currentCard.href = card.link; // Handle the click event currentCard.addEventListener("click", async (event) => { // If the card doesn't have `clipboard: true` don't do anything if (!card.clipboard) return; // Prevent the page from opening event.preventDefault(); // Copy the href to the clipboard try { await navigator.clipboard.writeText(card.link); currentCard.blur(); currentCardText.innerText = "Saved to clipboard!"; setTimeout(() => { currentCardText.innerText = card.name; }, 1500); } catch { currentCardText.innerText = "Unable to copy"; setTimeout(() => { currentCardText.innerText = card.name; }, 1500); } }); // Style the Icon currentCardIcon.classList.add("card__icon"); // Style the Text currentCardText.classList.add("card__name"); currentCard.append(currentCardIcon); currentCard.append(currentCardText); cardContainer.appendChild(currentCard); } }; /****************/ /* STARTER CODE */ /****************/ userName.innerHTML = NAME; printCards(); updateDate();