Pomodoro timer solution - #5
Conversation
WalkthroughA new Pomodoro timer web page was added, featuring a retro-futuristic design, interactive timer controls, audio notifications, and accessibility enhancements. Accompanying documentation outlines comprehensive testing scenarios, including audio permission handling, timer accuracy, input validation, and accessibility support. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant PomodoroTimer
participant AudioContext
User->>UI: Sets duration and clicks Start
UI->>PomodoroTimer: toggleTimer()
PomodoroTimer->>PomodoroTimer: Validate input
PomodoroTimer->>PomodoroTimer: Start countdown
PomodoroTimer->>AudioContext: Initialize/resume if needed
PomodoroTimer->>UI: Update timer display
loop Every tick
PomodoroTimer->>UI: Update display
end
PomodoroTimer->>AudioContext: Play beep on completion
PomodoroTimer->>UI: Show completion state
Possibly related issues
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
pomodoro/pomodoro.html (2)
217-220: The<label>is missing the declared.labelstyling classYou define
.labelin CSS but the actual<label for="minutesInput">omits this class, so it inherits default styling instead of the intended neon look.-<label for="minutesInput">SET TIME (MIN):</label> +<label for="minutesInput" class="label">SET TIME (MIN):</label>
372-374: Interval granularity is higher than necessaryUpdating every 100 ms costs extra wake-ups on mobile devices/battery-saving modes while the display only changes once per second.
Consider1000 msor throttling updates to the next integer second.[performance]
pomodoro/TESTING.md (1)
12-12: Use an en-dash in numeric ranges for readability“1-999” (U+2013) is the recommended typographic form.
-Rejects -1, 0, non-numeric inputs with 'Enter 1-999 minutes' error. +Rejects −1, 0, non-numeric inputs with ‘Enter 1–999 minutes’ error.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pomodoro/TESTING.md(1 hunks)pomodoro/pomodoro.html(1 hunks)
🧰 Additional context used
🪛 LanguageTool
pomodoro/TESTING.md
[uncategorized] ~5-~5: Possible missing comma found.
Context: ...ully. AudioContext initialized on start button click to meet Chrome requirements. ## P...
(AI_HYDRA_LEO_MISSING_COMMA)
[typographical] ~12-~12: If specifying a range, consider using an en dash instead of a hyphen.
Context: ...s -1, 0, non-numeric inputs with 'Enter 1-999 minutes' error. ## Accessibility Tab na...
(HYPHEN_TO_EN)
🔇 Additional comments (1)
pomodoro/pomodoro.html (1)
449-451:beforeunloadhandler needsevent.returnValuefor cross-browser supportSome browsers ignore a bare return value. Assigning to
event.returnValueis still the most reliable way to trigger the confirmation dialog.-window.addEventListener('beforeunload', () => { - if (timer?.isRunning) return 'Timer is running.'; -}); +window.addEventListener('beforeunload', e => { + if (timer?.isRunning) { + const msg = 'Timer is running.'; + e.returnValue = msg; + return msg; + } +});
| _showPermissionNotice() { | ||
| this.permissionNotice.classList.remove('hidden'); | ||
| } | ||
|
|
||
| _hidePermissionNotice() { | ||
| this.permissionNotice.classList.add('hidden'); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add aria-hidden when toggling the audio-permission banner
Removing/adding the hidden class hides the element visually but screen-readers will still announce its content.
Consider toggling aria-hidden="true" / false together with the class to avoid confusing, invisible announcements.
[accessibility]
🤖 Prompt for AI Agents
In pomodoro/pomodoro.html around lines 298 to 304, the methods
_showPermissionNotice and _hidePermissionNotice toggle the 'hidden' class to
show or hide the permission notice visually, but do not update the aria-hidden
attribute. To fix this, update _showPermissionNotice to set aria-hidden="false"
on the permissionNotice element and _hidePermissionNotice to set
aria-hidden="true" to ensure screen readers correctly recognize the visibility
state and avoid announcing hidden content.
| const mins = Math.floor(this.remainingSeconds / 60); | ||
| const secs = Math.round(this.remainingSeconds % 60); | ||
| this.timerDisplay.textContent = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`; |
There was a problem hiding this comment.
Seconds rounding can show an invalid “:60” and skip a second
Math.round pushes 59.5-59.9 s up to 60, so the display can momentarily read MM:60, then jump to MM+1:00, effectively hiding a second from the user.
Replace Math.round with Math.floor (or clamp to 59) to keep the range 0-59.
-const secs = Math.round(this.remainingSeconds % 60);
+const secs = Math.floor(this.remainingSeconds % 60);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const mins = Math.floor(this.remainingSeconds / 60); | |
| const secs = Math.round(this.remainingSeconds % 60); | |
| this.timerDisplay.textContent = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`; | |
| const mins = Math.floor(this.remainingSeconds / 60); | |
| - const secs = Math.round(this.remainingSeconds % 60); | |
| + const secs = Math.floor(this.remainingSeconds % 60); | |
| this.timerDisplay.textContent = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`; |
🤖 Prompt for AI Agents
In pomodoro/pomodoro.html around lines 415 to 417, the seconds value is
calculated using Math.round, which can cause the display to show an invalid
":60" and skip a second. To fix this, replace Math.round with Math.floor when
calculating the seconds to ensure the value stays within 0-59 and the timer
display remains accurate.
|
Turns out running a company takes a lot more than I anticipated. I apologize for not reviewing your work in the promised timeline. I assure you I haven't ignored or forgotten you. Founder duties to the company that is making all this possible have simply taken the #1 priority. Because if the company fails, this program cannot exist. Thank you for understanding and I'll get back to you as soon as I possibly can. |
|
Understandable 😂🤝 |
3 participants
Bounty Solution Submission
Problem Statement
Built a minimal Pomodoro timer web app with reliable background audio notifications in Chrome, featuring a configurable timer, MM:SS display, and start/pause controls.
### Solution Approach
Single HTML file with embedded CSS/JS for simplicity and no external dependencies.
Used
AudioContextfor background audio, initialized on user interaction to comply with Chrome restrictions.Timestamp-based
setIntervalfor accurate timing in background tabs.Input validation for 1-999 minutes with user-friendly error messages.
Accessibility features: ARIA labels, keyboard navigation, high contrast.
### Technical Implementation
Package Manager: None used (single HTML file, no dependencies).
Database Setup: Not applicable (no database required).
Environment Variables: None required.
Build Process: No build process; run
pomodoro.htmldirectly in Chrome.Testing Evidence
Test Coverage: Tested all required scenarios (see
pomodoro/TESTING.md).Critical Flows Tested:
Background audio: 30s timer, tab switch, chime played.
Permissions: Handled blocked/denied/granted cases.
Tab inactive: Timer accurate after 5min.
Input validation: Rejects -1, 0, non-numeric inputs.
Accessibility: Keyboard navigation, NVDA screen reader compatibility.
Test Results: Detailed in
pomodoro/TESTING.md.Demo Evidence
Pomodoro.Timer.-.Google.Chrome.2025-06-24.15-59-14.mp4
Setup Instructions
git clone https://github.com/yoo-12236/OSS-bounties.git.pomodoro/.pomodoro.htmlin Chrome.Database Setup
Not applicable (no database used).
Architectural Decisions
AudioContextto avoid external sound files.Bun/Yarn Justification
Not applicable (no package manager needed; single HTML file).
Pre-submission Checklist:
All bounty requirements met
Tests written and passing
Working demo available
Code is self-explanatory
Setup instructions complete
@adrianmurage tagged for review
I confirm this submission meets all requirements and is ready for review.
Fixes #1
Summary by CodeRabbit
New Features
Documentation