https://github.com/swatchtime/swatch-vanillajs
A simple plain vanilla Javascript PWA app which displays Swatch Internet Time in .beats
https://github.com/swatchtime/swatch-vanillajs
clock clocks javascript pwa pwa-app swatch-internet swatch-internet-time vanilla-javascript vanilla-js
Last synced: about 1 month ago
JSON representation
A simple plain vanilla Javascript PWA app which displays Swatch Internet Time in .beats
- Host: GitHub
- URL: https://github.com/swatchtime/swatch-vanillajs
- Owner: swatchtime
- License: mit
- Created: 2024-04-22T00:11:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-29T02:10:23.000Z (8 months ago)
- Last Synced: 2026-06-12T15:34:10.888Z (about 1 month ago)
- Topics: clock, clocks, javascript, pwa, pwa-app, swatch-internet, swatch-internet-time, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage: https://kendawson.online/free/swatch/
- Size: 108 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Swatch Internet Time: Vanilla JS PWA
version 0.1.0
A plain vanilla Javascript PWA app to display the current Swatch Internet Time. This is the "no frills" version which just displays the current .beat time with no additional features.
## Screenshot
Online example: https://kendawson.online/free/swatch/
## About
This version has a service-worker and manifest and can be installed locally as a PWA (on supported devices).
The primary Javascript function for generating the Swatch Internet Time is as follows:
```
function getSwatchTime() {
const d = new Date();
// Seconds since UTC midnight
const utcSeconds = d.getUTCHours() * 3600 + d.getUTCMinutes() * 60 + d.getUTCSeconds();
// Convert to Biel time (UTC+1, no DST) and wrap to 0-86399
const bielSeconds = (utcSeconds + 3600 + 24 * 3600) % (24 * 3600);
// 1 beat = 86.4 seconds, keep result in 0-999 and pad
const beats = String(Math.floor(bielSeconds / 86.4) % 1000).padStart(3, '0');
// Return string with current Swatch time (e.g. @042)
return `@${beats}`;
}
```
The magic explained:
```
const beats = String(Math.floor(bielSeconds / 86.4) % 1000).padStart(3, '0');
```
## Note: Rounding and display (important)
If you display centibeats (two decimals) be careful when rounding. A raw beat value like `999.995` can round to `1000.00` which is invalid for display — the correct display is `000.00`. To avoid a transient `1000.00` flash, round then wrap values >=1000 back into range before formatting:
```js
const rawBeats = bielSeconds / 86.4;
let rounded = Math.round(rawBeats * 100) / 100;
if (rounded >= 1000) rounded = rounded - 1000;
const display = rounded.toFixed(2); // safe to show
```
- `bielSeconds` is the number of seconds since midnight in Biel time (UTC+1, no DST), computed from UTC time.
- Divide by 86.4 to convert seconds to Swatch beats (86400 seconds/day => 1000 beats).
- `Math.floor(...)` gives the integer beat number.
- `% 1000` ensures the beat wraps into the 0-999 range.
- `.padStart(3, '0')` pads the number with leading zeros to always produce 3 digits.
### Links:
- About Swatch Internet Time: https://www.swatch.com/en-us/internet-time.html
- Github: https://github.com/swatchtime