chore!: restructure repo

I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.

1 files changed, 135 insertions, 0 deletions

diff --git a/public/projects/js-small-apps/clock/app.js b/public/projects/js-small-apps/clock/app.js
new file mode 100644
index 0000000..7ae2702
--- /dev/null
+++ b/public/projects/js-small-apps/clock/app.js
@@ -0,0 +1,135 @@
+function setDate(day, month, year) {
+  const div = document.getElementById("date");
+  div.textContent = `${day}/${month}/${year}`;
+}
+
+function get12Rotation(int) {
+  const hour = int > 12 ? int - 12 : int;
+  return (360 / 12) * hour;
+}
+
+function get60Rotation(int) {
+  return (360 / 60) * int;
+}
+
+function setSvgClockHours(hours) {
+  const clockHours = document.getElementById("svg-clock_hours");
+  clockHours.style.transform = `rotate(${get12Rotation(hours)}deg)`;
+  clockHours.style.transformOrigin = "center";
+}
+
+function setSvgClockMinutes(minutes) {
+  const clockMinutes = document.getElementById("svg-clock_minutes");
+  clockMinutes.style.transform = `rotate(${get60Rotation(minutes)}deg)`;
+  clockMinutes.style.transformOrigin = "center";
+}
+
+function setSvgClockSeconds(seconds) {
+  const clockSeconds = document.getElementById("svg-clock_seconds");
+  clockSeconds.style.transform = `rotate(${get60Rotation(seconds)}deg)`;
+  clockSeconds.style.transformOrigin = "center";
+}
+
+function setDigitalClockHours(hours) {
+  const clockHours = document.getElementById("digital-clock_hours");
+  clockHours.textContent = hours;
+}
+
+function setDigitalClockMinutes(minutes) {
+  const formatted = minutes < 10 ? `0` + minutes : minutes;
+  const clockMinutes = document.getElementById("digital-clock_minutes");
+  clockMinutes.textContent = formatted;
+}
+
+function getHoursToString(hours) {
+  const hoursToText = [
+    "noon",
+    "one",
+    "two",
+    "three",
+    "four",
+    "five",
+    "six",
+    "seven",
+    "eight",
+    "nine",
+    "ten",
+    "eleven",
+    "twelve",
+  ];
+
+  return hoursToText[hours % 12];
+}
+
+function getMinutesToString(minutes) {
+  const ones = [
+    "",
+    "one",
+    "two",
+    "three",
+    "four",
+    "five",
+    "six",
+    "seven",
+    "eight",
+    "nine",
+  ];
+  const teens = [
+    "ten",
+    "eleven",
+    "twelve",
+    "thirteen",
+    "fourteen",
+    "fifteen",
+    "sixteen",
+    "seventeen",
+    "eighteen",
+    "nineteen",
+  ];
+  const tens = ["", "", "twenty", "thirty", "forty", "fifty"];
+  const minutesToArray = minutes.toString().split("");
+  let text = "";
+
+  if (minutes < 10) {
+    text = ones[minutes];
+  } else if (minutes < 20) {
+    text = teens[minutesToArray[1]];
+  } else {
+    text = `${tens[minutesToArray[0]]} ${ones[minutesToArray[1]]}`;
+  }
+
+  return text;
+}
+
+function setTextClock(hours, minutes) {
+  const div = document.getElementById("text-clock");
+  const meridiem = hours < 12 ? "am" : "pm";
+  div.textContent = `It's ${getHoursToString(hours)} ${getMinutesToString(
+    minutes
+  )} ${meridiem}.`;
+}
+
+function updateAll() {
+  const now = new Date();
+  const [month, day, year] = [
+    now.getMonth() + 1,
+    now.getDate(),
+    now.getFullYear(),
+  ];
+  const [hours, minutes, seconds] = [
+    now.getHours(),
+    now.getMinutes(),
+    now.getSeconds(),
+  ];
+
+  setDate(day, month, year);
+  setSvgClockHours(hours);
+  setSvgClockMinutes(minutes);
+  setSvgClockSeconds(seconds);
+  setDigitalClockHours(hours);
+  setDigitalClockMinutes(minutes);
+  setTextClock(hours, minutes);
+}
+
+updateAll();
+setInterval(updateAll, 1000);