A single-page web app to create a set of timers. This demo project was built to explore and learn responsive front-end development using React.
Pull the amundsno/timer-deck image directly from the DockerHub repository:
docker run --rm -d -p 3000:3000 amundsno/timer-deckClone this GitHub repository and build the Docker image locally:
git clone https://github.com/amundsno/timer-deck.git
cd timer-deck
docker build -t timer-deck .
docker run --rm -d -p 3000:3000 timer-deck
📝 Guided Start
A helpful message appears when no timers exist, guiding you to get started.
🎯 Auto-focus
The input for the next timer is automatically focused, enabling rapid creation without using the mouse.
🔔 Buzzer
When a contdown completes:
- A CSS keyframe animation grabs attention.
- A short alarm sound plays (can be muted in advance).
- The browser tab favicon briefly changes for an extra visual cue.
- The timer continues past 0 to show how long ago it completed.
🎮 Buttons
All buttons feel responsive with a subtle click animation and pointer cursor on hover. Buttons can be used to:
- 🎨 - Cycle colors
- 🔇 - Mute alarm sound
- ⏳ - Restart timer
- ❌ - Delete timer
- ⏯️ - Toggle pause/play
Subtle animations indicate incorrect input.
⏱️ Count Up Mode
If no time is set, the timer functions as a stopwatch instead.
⏩ Defaults
If no name is given, a default name is assigned. Colors cycle automatically to maintain variety.
💾 Local Storage
Timers are saved and restored automatically if the page is closed.
📱 Responsive Design
Timers dynamically adjust their layout based on screen width.