From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001 From: Armand Philippot 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/README.md | 19 ++++ public/projects/js-small-apps/clock/app.js | 135 +++++++++++++++++++++++++ public/projects/js-small-apps/clock/index.html | 72 +++++++++++++ public/projects/js-small-apps/clock/style.css | 75 ++++++++++++++ 4 files changed, 301 insertions(+) create mode 100644 public/projects/js-small-apps/clock/README.md create mode 100644 public/projects/js-small-apps/clock/app.js create mode 100644 public/projects/js-small-apps/clock/index.html create mode 100644 public/projects/js-small-apps/clock/style.css (limited to 'public/projects/js-small-apps/clock') diff --git a/public/projects/js-small-apps/clock/README.md b/public/projects/js-small-apps/clock/README.md new file mode 100644 index 0000000..7a89cc1 --- /dev/null +++ b/public/projects/js-small-apps/clock/README.md @@ -0,0 +1,19 @@ +# Clock + +What time is it? + +## Description + +You can see the current time in three formats: + +- analog clock +- digital clock +- text based + +## Preview + +You can see a live preview here: https://demo.armandphilippot.com/#clock + +## License + +This project is open-source and available under the [MIT License](../LICENSE). 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); diff --git a/public/projects/js-small-apps/clock/index.html b/public/projects/js-small-apps/clock/index.html new file mode 100644 index 0000000..9174170 --- /dev/null +++ b/public/projects/js-small-apps/clock/index.html @@ -0,0 +1,72 @@ + + + + + + + What time is it? + + + +
+

What time is it?

+
+
+
+ + + + + + + + + + + +
+
00
+
:
+
00
+
+
+
+ + + + diff --git a/public/projects/js-small-apps/clock/style.css b/public/projects/js-small-apps/clock/style.css new file mode 100644 index 0000000..f1327e1 --- /dev/null +++ b/public/projects/js-small-apps/clock/style.css @@ -0,0 +1,75 @@ +*, +*::before, +*::after { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + display: flex; + flex-flow: column nowrap; + min-height: 100vh; + font-size: 16px; + font-size: 1rem; + font-family: Georgia, "Times New Roman", Times, serif; +} + +.header, +.app, +.footer { + width: min(calc(100vw - 2rem), 800px); + margin: auto; +} + +.header { + font-size: 2rem; + text-align: center; + margin-bottom: 2rem; + padding: 2rem 0; +} + +.footer { + font-size: 0.9rem; + text-align: center; + margin-top: 3rem; + padding: 2rem 0; +} + +.app { + flex: 1; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; + gap: clamp(1rem, 5vw, 3rem); +} + +#date { + flex: 0 0 100%; + font-size: 1.5rem; + text-align: center; + padding: 1rem 0; +} + +#svg-clock { + width: 20rem; + height: 20rem; +} + +#digital-clock { + display: flex; + flex-flow: row nowrap; + gap: 0.5rem; + width: max-content; + padding: 2rem; + border: 5px solid #000; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 2rem; + font-weight: 600; +} + +#text-clock { + flex: 0 0 100%; + text-align: center; +} -- cgit v1.2.3