new start page

2022-06-06 14:22:42 -04:00
parent cd447e3a37
commit 392eb275eb
11 changed files with 530 additions and 1 deletions
--- a/NP_Root_Startpage/app.js
+++ b/NP_Root_Startpage/app.js
@ -0,0 +1,164 @@
+/*****************/
+/* EDITABLE INFO */
+/*****************/
+
+/* -------------------------------------------------------- */
+
+const NAME = "Reyes";
+
+const CARDS = [
+  {
+    name: "Apple Music",
+    icon: "ri-music-2-fill",
+    link: "https://music.apple.com/us/browse",
+  },
+  {
+    name: "Reddit",
+    icon: "ri-reddit-fill",
+    link: "https://www.reddit.com/",
+  },
+  {
+    name: "Figma",
+    icon: "ri-palette-fill",
+    link: "https://www.figma.com/",
+  },
+  {
+    name: "Github",
+    icon: "ri-github-fill",
+    link: "https://github.com/",
+  },
+  {
+    name: "Twitter",
+    icon: "ri-twitter-fill",
+    link: "https://twitter.com",
+  },
+  {
+    name: "Dribbble",
+    icon: "ri-dribbble-fill",
+    link: "https://dribbble.com/",
+  },
+  {
+    name: "Hashnode",
+    icon: "ri-hashtag",
+    link: "https://hashnode.com/",
+  },
+  {
+    name: "CodeSandbox",
+    icon: "ri-cloud-fill",
+    link: "https://codesandbox.io/dashboard/",
+  },
+  {
+    name: "YouTube",
+    icon: "ri-youtube-fill",
+    link: "https://www.youtube.com/",
+  },
+  {
+    name: "LinkedIn",
+    icon: "ri-linkedin-fill",
+    link: "https://www.linkedin.com/",
+  },
+  {
+    name: "Gmail",
+    icon: "ri-google-fill",
+    link: "https://mail.google.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();