145 lines
3.1 KiB
JavaScript
145 lines
3.1 KiB
JavaScript
/*****************/
|
|
/* EDITABLE INFO */
|
|
/*****************/
|
|
|
|
/* -------------------------------------------------------- */
|
|
|
|
const NAME = "Norm";
|
|
|
|
const CARDS = [
|
|
{
|
|
name: "Northpass Admin",
|
|
icon: "ri-admin-line",
|
|
link: "https://app.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",
|
|
icon: "ri-space-ship-line",
|
|
link: "https://app.hubspot.com/reports-dashboard/392014/view/8969543",
|
|
},
|
|
{
|
|
name: "Github",
|
|
icon: "ri-github-fill",
|
|
link: "https://github.com/",
|
|
},
|
|
{
|
|
name: "Chili Piper - 30 Min",
|
|
icon: "ri-calendar-2-line",
|
|
link: "https://northpass.na.chilipiper.com/book/me/norm-rasmussen",
|
|
},
|
|
{
|
|
name: "LinkedIn",
|
|
icon: "ri-linkedin-fill",
|
|
link: "https://www.linkedin.com/",
|
|
},
|
|
];
|
|
|
|
/* -------------------------------------------------------- */
|
|
|
|
/******************/
|
|
/* 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;
|
|
|
|
// 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();
|