liao961120 / draggableTimer

Draggable interval timer in the browser

Interval Training Timer

A draggable interval timer written in vanilla JS, HTML and CSS (watch out for the beeps).

This project is inspired by intervaltimer.com and HTML5 drag and drop API. Special thanks to WebDevSimplified's YouTube video & code on building sortable drag & drop elements.

Touch Screen Usage

Since HTML5 drag and drop API does not support touch screens, it may be harder to build a timer with such devices. It is recommended to build a timer on the computer and use the app's share URL feature to access the timer you built. Here is an example.

Features

• Flexible sorting of intervals (Drag and Drop API)
• Automatically saves your customization (localStorage)
• Share/re-access particular timers through URLs (URL query string)
• Works without the internet (Service Worker)

Available Timers

Below are some ready-to-use timers (contributions wellcomed):

1. Home Hiit workout (YouTube)