/tick

Tick is shortcut-first countdown timer for your streams (e.g. OBS browser source), webinars (e.g. Zoom’s screen share), or any reverse time-keeping needs.

Live Demo
Project website
Current version: 1.8 (2023-03-24)

How to use

This is a single HTML file with no depedencies other than requiring JavaScript to be enabled, so if you wish to use this tool offline, then simply save it (Windows: Ctrl + S, MacOS: Command + S) to your device, and open it with your browser (Firefox, Chrome etc).

Always be cautious of scripts you find available online: open them in a text editor and inspect what they do.

Options

The toolbar provides access to the manual for quick reference to mouse and keyboard shortcuts, and quick access to important toggles (sound, theme, fullscreen), timer reset, and three presets (5, 10, 25 minutes). It first appears at the bottom-right and hides itself after a few moments. Tap or hover your mouse over this area to reveal it. You may not add or subtract from the timer when paused.

Touch controls

Tap once on the timer or label to start, if not already started. Tap again to pause or un-pause.
Tap once to reset and stop the timer, if overtime.
Double Tap anywhere to go into fullscreen.
Swipe up 👆 to add 10 minutes to the timer.
Swipe down 👇 to subtract 5 minutes from the timer.
Swipe left 👈 to add 1 minute.
Swipe right 👉 to subtract 1 minute.

Mouse controls

Click once on the timer or label to start, if not already started. Click again to pause or un-pause.
Click once to reset and stop the timer, if overtime.
Double Click anywhere to go into fullscreen.
Scroll up to add 1 minute.
Scroll down to subtract 1 minute.

Keyboard shortcuts

Enter to start at 10 minutes. Will subsequently restart the timer.
Space to start at 10 minutes, or pause if started, or restart at 10 minutes if into overtime.
Up arrow ↑ to add 10 minutes to the timer.
Down arrow ↓ to subtract 5 minutes from the timer.
Left arrow ← to add 1 minute.
Right arrow → to subtract 1 minute.
Page Up to go into fullscreen mode. Page Up or Esc to exit fullscreen.
Page Down to toggle the theme between dark (default) and light.
End to reset and stop the timer.
Insert to toggle sound mode: automatically play a bell sound when the timer goes into overtime. Off by default.
` to play a bell sound on demand.
Delete or Backspace to delete the current label and replace with text input. The label is dimmed when in edit more. Enter or Esc to confirm and exit edit mode.
Home to display the manual. Home or Esc when the manual is open to hide it.

URL parameters

Define a custom default timer, by specifying the mins URL parameter. For example, …/tick.html?mins=25 will make the timer start at 25 minutes (pomodoro).

Future improvements (maybe)

Point of view

Single page; no external assets; no build systems; functional vanilla JavaScript. Pull requests welcome if they don’t deviate from these principles or alter coding style.

Etymology

A tick is an atomic unit used to define system time in computing. It is also a hematophagous parasitic insect that affects humans and other animals.

Credits

Code based on njallam / stream-pomodoro.
Bell sounds via oshreiss / Working-with-the-Web-Audio-API.
Touch gestures based on code from StackOverflow @Rob.
The font used in the screenshots above is Lekton designed at ISIA Urbino, Italy. Specifically the Lekton Greek version designed by Manon Photopoulos, autohinted by the author.

© 2022 Heracles Papatheodorou a.k.a @Arty2, MIT Licence

License

Arty2/tick

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Languages

Error
Looks like something went wrong!