/tick

A shortcut-first countdown timer for streams, webinars, or any reverse time-keeping needs.

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.

Screenshot of /tick’s counting down at 59 seconds

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) and timer reset. 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.

Touch events

  • 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, if not already paused.
  • Swipe down 👇 to subtract 5 minutes from the timer, if not already paused.
  • Swipe left 👈 to add 1 minute, if not already paused.
  • Swipe right 👉 to subtract 1 minute, if not already paused.

Mouse events

  • 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.

Keyboard shortcuts

  • Enter to start at 10 minutes, if not already paused. 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, if not already paused.
  • Down arrow to subtract 5 minutes from the timer, if not already paused.
  • Left arrow to add 1 minute, if not already paused.
  • Right arrow to subtract 1 minute, if not already paused.
  • 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.
  • Tab 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

  • No option to add or remove minutes in touch devices.
    • a) Add simple gestures left/right and up/down.
    • b) Add ◀ buttons ▶ on either side of the timer.
  • Simple webworker and Manifest to allow saving as an app on mobile devices.
  • Split minutes over 60 into hours.
  • URL Get params URLSearchParams(window.location.search)
    • a) to define initial timer (defaults at 10 minutes)
    • b) modify theme colors.
  • Sound option to ring bell every minute, if overtime.
  • Keep seconds intact when adding or subtracting minutes from or into overtime. Keeps the visual flow undisturbed.
  • Long-click or long-press to play bell sound on demand.
  • Key buffer (numerals only) to modify timer minutes directly.
  • Display (bottom left) an overall timer that doesn’t reset.
  • Control panel or sync to other windows with BroadcastChannel (such as Speech Countdown Timer)
  • Local storage to remember theme and sound options.
  • Implement theming settings compatible with /valgrind.
  • Considering hundredrabbits / Themes simple theme framework; convert current themes.

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


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