From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 20 Feb 2022 16:11:50 +0100
Subject: 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.
---
 public/projects/js-small-apps/clock/app.js | 135 +++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 public/projects/js-small-apps/clock/app.js

(limited to 'public/projects/js-small-apps/clock/app.js')

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);
-- 
cgit v1.2.3