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-deck

Clone 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

⚠️ Input Validation
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.