yqni13 WEB_clock

$\texttt{\color{teal}{v2.1.4}}$

Technology

Google Fonts

TRY LIVE DEMO

Features

📄 Single Page Application

🔢 Components as Javascript ES6 modules

🔧 Live changing settings via local storage

🌚/🌞 Dark/Light mode

🎨 Customizable design

One of the settings enables to hide the navbar (figure above). This way, the features can be enjoyed without any distractions. To use the nav-menu a simple click/touch is enough and for 2.5 seconds you can navigate to other components or the settings to display the nav-menu permanently again. As for default, the nav-menu is set to show constantly.

Depending on the selected design, multiple or single colors can be customized (figure above).

In the settings component, a preview for the selected clock design is already prepared and displays currently a placeholder (figure above). With an upcoming update, a downscaled version of the selected clock design will appear and can be hidden by the regarding setting.

Testing

Cross-browser testing

Firefox	Chrome	Opera	Edge	DuckGo	Brave
Yes	Yes	Yes	Yes	Yes	Yes

Updates

list of all updates

$\textsf{last\ update\ 2.1.1\ >>\ {\color{pink}2.1.4}}$

• $\textsf{\color{teal}Addition:}$ New favicon added.
• $\textsf{\color{red}Bugfix:}$ Settings component does not show unwanted scrollbar. [Before: If height was not big enough, a scrollbar for the settings content was displayed.]
• $\textsf{\color{red}Bugfix:}$ The clock design 'Analog #2' is now fully responsive. [Before: The clock design 'Analog #2' was not resposive for a resolution < 500px width.]

Aimed objectives for next $\textsf{\color{green}minor}$ update:

- option to select ger/eng

- add real-live working mini figures of clock design as preview in settings

Aimed objectives for next $\textsf{\color{cyan}major}$ update:

- additional timer functionality

- additional alarm functionality

- additional world clock (api)