Skip to content

feat: add Pomodoro Timer web app with background audio notifications - #16

Open
key1989han wants to merge 1 commit into
AkongaLabs:mainfrom
key1989han:pomodoro-timer
Open

feat: add Pomodoro Timer web app with background audio notifications#16
key1989han wants to merge 1 commit into
AkongaLabs:mainfrom
key1989han:pomodoro-timer

Conversation

@key1989han

Copy link
Copy Markdown

Summary

Implemented a minimal Pomodoro Timer web app as a single HTML page with reliable background audio notifications.

Features

Core Functionality

  • ✅ Single HTML page with configurable timer input (minutes)
  • ✅ Timer display showing MM:SS format countdown
  • ✅ Start/pause/reset button controls
  • ✅ When timer reaches 00:00: stops, plays notification sound, resets display back to original configured time
  • ✅ Single repeating timer (no pomodoro cycle tracking)

Background Audio (Critical Requirement)

  • ✅ Uses Web Audio API for notification sound generation
  • Works even when Chrome tab is in background or minimized
  • ✅ Handles browser audio restrictions (AudioContext resume on user interaction)
  • ✅ Pleasant chime sound using multiple frequencies (C5, E5, G5, C6)

Interface

  • ✅ Minimal design: timer input field, timer display, and start/pause/reset buttons
  • ✅ Clean, functional layout with gradient background
  • ✅ No external dependencies - pure HTML/CSS/JS
  • ✅ Responsive design

Technical Implementation

  • Audio: Web Audio API with oscillator nodes for sound generation
  • Timer: setInterval with proper cleanup on pause/reset
  • State: Simple JavaScript state management
  • Styling: CSS with glassmorphism effect

Testing

  1. Open pomodoro-timer.html in Chrome
  2. Set timer to 1 minute for quick testing
  3. Click Start
  4. Minimize Chrome or switch to another tab
  5. Wait for timer to complete
  6. Verify notification sound plays even in background

Files Added

  • pomodoro-timer.html - Complete Pomodoro Timer web app

Fixes #1

…ble timer\n- MM:SS countdown display\n- Start/pause/reset controls\n- Background audio notifications using Web Audio API\n- Clean, minimal design with gradient background\n\nFixes AkongaLabs#1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pomodoro Timer Prototype - Development Instructions

1 participant