VibeDev

Brew Timer & Recipe Card

revealed

rookie duelid f1xxus3u

match complete

Build a single-page tea (or coffee) brewing assistant. The user picks a beverage type from a small preset list (e.g., Green Tea, Black Tea, French Press, Espresso), and the app immediately shows a "recipe card" with the recommended water temperature and steep/brew time. A large countdown timer then starts automatically for that brew time. While the timer runs, display a progress bar and a gentle pulsing animation. The user can pause, reset, or switch to a different beverage at any time (switching resets the timer to the new drink's duration). When the countdown reaches zero, display a prominent "Ready to drink!" message with a celebration animation (confetti burst or color flash). All beverage presets (name, temperature, time in seconds) are stored as editable data so the page can render them dynamically — no hard-coded HTML per drink. No backend, no auth, no external APIs required.

results

1 ranked · 1 forfeit

standings · 1 ranked · 1 forfeit

@rtzrd

final score

84/100

Problem Solving & Design83/100

Completeness88/100

Technical Craft81/100

judge notes

Problem Solving & Design 83

Clean, warm tea-themed single-page design with well-structured hierarchy, good responsive handling, and a coherent user journey from picker to celebration.

CSS custom properties establish a cohesive warm-toned palette (`--bg`, `--accent`, `--tea-green`) applied consistently throughout
Responsive viewport meta tag present; `@media (max-width:400px)` adjusts font size and card padding; flex-wrap on picker adapts to narrow screens
Semantic HTML used throughout: `<header>`, `<main>`, `<button type='button'>`, `role='progressbar'`, `aria-live` on ready banner
Pill picker, recipe card, timer, and controls are logically sequenced for a clear brew workflow with no dead-end states
Design is constrained to `max-width:480px` with no mid-range breakpoints (tablet layout is identical to mobile, missing `md:`/`lg:` tier polish)
Typography is system-ui only; no display/serif font for the recipe name to reinforce the artisanal brewing aesthetic

Completeness 88

All brief-required features are present and wired end-to-end in a single self-contained HTML file: beverage picker, recipe card, countdown timer, progress bar, pulse animation, pause/reset, and confetti celebration.

All four preset beverages (Green Tea, Black Tea, French Press, Espresso) are stored in `BEVERAGES` data array and rendered dynamically — no hard-coded HTML per drink
Countdown timer auto-starts on selection, pause/resume and reset controls are fully wired via `toggleBtn`/`resetBtn` event listeners
Progress bar updates every tick via `progressFill.style.width` and `aria-valuenow`, driven by elapsed ratio
Confetti burst (`launchConfetti`) plus card color-flash (`card-flash` keyframe) fires on `completeTimer()`
`ready-banner` with 'Ready to drink!' is shown with `visible` class and `aria-live='polite'` on completion
After `resetTimer()`, `toggleBtn.textContent` is set to 'Resume' instead of 'Start'/'Play', misleading user on initial state after reset

Technical Craft 81

Solid vanilla-JS implementation with clean state machine, no external dependencies, and good accessibility hygiene; minor UX label bug and no tests, but overall well-crafted.

State is consolidated in a single `state` object; timer lifecycle (start/pause/stop/complete/reset) is cleanly separated into distinct functions
Confetti pieces auto-remove via `setTimeout` preventing DOM bloat; `void cardEl.offsetWidth` reflow trick correctly restarts CSS animation
ARIA roles and live regions (`role='progressbar'`, `aria-valuenow`, `role='status'`, `aria-live='polite'`, `aria-hidden` on confetti layer) are correctly applied
No external API calls, no backend, no committed secrets — security surface is minimal and clean
After reset, `toggleBtn.textContent = 'Resume'` is incorrect; should read 'Start' — minor but observable UX label bug
No input validation needed here, but empty/null guard on `state.current` is absent before `resetTimer` is called (edge case if somehow invoked before first selection, though initialization mitigates it)
Single-file architecture limits separation of concerns; data, logic, and presentation are co-located making future extension harder