Lots of good progress getting it setup. Need to figure out templating, easier calling of functions, and cleaner routing.

2023-02-17 16:59:42 -05:00
commit 1bcbef6220
19 changed files with 545 additions and 0 deletions
--- a/app/static/app.js
+++ b/app/static/app.js
@ -0,0 +1,143 @@
+
+/*****************/
+/* EDITABLE INFO */
+/*****************/
+
+/* -------------------------------------------------------- */
+
+const NAME = "Norm";
+
+const CARDS = [
+  {
+    name: "Get all Users",
+    icon: "ri-admin-line",
+    link: "submit",
+  },
+  {
+    name: "Get all Courses",
+    icon: "ri-mail-line",
+    link: "submit",
+  },
+  {
+    name: "Get all Assignments",
+    icon: "ri-calendar-line",
+    link: "submit",
+  },
+  ];
+/* -------------------------------------------------------- */
+
+/******************/
+/* 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) => {
+      //document.forms["apiform"].submit();
+      // 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();