Skip to content

liao961120/draggableTimer

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 

Interval Training Timer

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

Demo

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)