HTML, JS and CSS based Wordclock
MIT License
This is a wordclock designed to run in a browser. It is developed and tested for Chrome, but other browsers work too if they support all necessary features.
@Copyright: Raphael Höser (Snapstromegon)
If you encouter any bugs or want to improve or contribute, please feel free to do so via issues or PRs.
If you want to add a languagepack to my system, feel free to add a PR.
Language | Code | wc_langPack |
---|---|---|
German | DE | wc_langPack_DE.js |
English | EN | wc_langPack_EN.js |
Dutch | NL | wc_langPack_NL.js |
Swiss German | DE_SWG | wc_langPack_DE_SWG.js |
Bernese German | CH_BERN | wc_langPack_CH_BERN.js |
The following files are needed for this clock to run:
Just open wc.html to see the wordclock.
In wc_main.js you can edit the wc_settings Object with the following attributes:
var wc_settings = {
lang: 'DE',
updateInterval: 1000,
round: false,
showMinutePoints: true,
stencilMode: false,
fuzzyTime: 'none',
};
The root element sets three css variables, which control the color theme, the minute point distance and the fontsize.
:root {
--on-color: #fff;
--off-color: #333;
--background-color: #000;
--dot-padding: 4%;
--fontSize: 2em;
}
You can add custom language packs to the wc_langPacks folder. Those have to follow the structure of the existing packets and do/provide the following things:
A languagepack has to call the global function wc_addLanguagePack(languagePack)
to register itself.
A languagpack has to provide the following attributes:
langCode: The language code
letterSet: A two dimensional character array in which the first dimension describes a row and the second the columns in a row.
timeString:
A function in the form of function(h,m,settings)
, which gets the following parameters and returns a string which words can be found from top left to bottom right in the letterSet.
Parameters
The inspiration for this project was a request my father made (github: ThomasH-W). In his Blog (german) you can find a more detailed install guide and further projects..