Decimal Clock

From Wikipedia:

Decimal time is the representation of the time of day using units which are decimally related. This term is often used specifically to refer to the time system used in France for a few years beginning in 1792 during the French Revolution, which divided the day into 10 decimal hours, each decimal hour into 100 decimal minutes and each decimal minute into 100 decimal seconds (100000 decimal seconds per day), as opposed to the more familiar UTC time standard, which divides the day into 24 hours, each hour into 60 minutes and each minute into 60 seconds (86400 SI seconds per day).

The main advantage of a decimal time system is that, since the base used to divide the time is the same as the one used to represent it, the whole time representation can be handled as a single string. Therefore, it becomes simpler to interpret a timestamp and to perform conversions. For instance, 1:23:45 is 1 decimal hour and 23 decimal minutes and 45 decimal seconds, or 1.2345 decimal hours, or 123.45 decimal minutes or 12345 decimal seconds; 3 hours is 300 minutes or 30,000 seconds. This property also makes it straightforward to represent a timestamp as a fractional day, so that 2021-08-23.54321 can be interpreted as five decimal hours and 43 decimal minutes and 21 decimal seconds after the start of that day, or a fraction of 0.54321 (54.321%) through that day (which is shortly after traditional 13:00). It also adjusts well to digital time representation using epochs, in that the internal time representation can be used directly both for computation and for user-facing display.

In this repository we maintain multiple implementations of Decimal Clock using various bleeding edge frontend framework.

Implementation	Demo	Source	Lib
alpine	Demo	Source	Lib
elm	Demo	Source	Lib
hyperapp	Demo	Source	Lib
jquery	Demo	Source	Lib
petite-vue	Demo	Source	Lib
react-hooks (via CDN)	Demo	Source	Lib
react-hooks (via create-react-app)	Demo	Source	Lib
scarlets-frame	Demo	Source	Lib
solidjs	Demo	Source	Lib
svelte	Demo	Source	Lib
vanilla	Demo	Source
vue-3-composition-api (via vue cli)	Demo	Source	Lib
vue-setup (with vite and typescript)	Demo	Source	Lib
web-component	Demo	Source

Contributing

Please put everything from both your src and dist folder in a subfolder, with tooling files at the root of your implementation subfolder:

decimal-clock
+-- react-hook
    +-- dist
    |   +-- index.html
    |   +-- app.js
    +-- src
    |   +-- clock-hand.js
    |   +-- index.js
    +-- package.json
    +-- manifest.json

Also include a manifest.json file containing:

{
  "name": "React with Hooks",
  "srcs": [
    "dist/index.html",
    "src/index.js",
    "src/clock-hand.js"
  ],
  "dist": "dist/index.html"
}