Skip to content

teknologi-umum/decimal-clock

Repository files navigation

Decimal Clock

clock.svg

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"
}