DEV Community

Cover image for Side Project: Vanilla JS Spanish Online Countdown Timer
foosher
foosher

Posted on Originally published at temporizador.cc

Side Project: Vanilla JS Spanish Online Countdown Timer

#javascript #webdev #showdev #staticweb

I built a free Spanish browser countdown timer, hosted on Cloudflare Pages

I recently built a simple side project: a pure client-side countdown timer fully translated for Spanish-speaking users.

Live demo: https://temporizador.cc/

Project goal

I wanted a lightweight, no-install countdown timer for kitchen, study and focus work. Many existing web timers only support English. I decided to create a fully localized Spanish version with a clean UI and browser-native audio alerts.

All logic runs inside the browser. No backend server, no accounts, no registration required.

Core features

  • Countdown support up to 99 hours
  • Combine hours, minutes and seconds in custom input
  • Save recently used timers in local storage on the device
  • Audio notification when time finishes (¡Se acabó el tiempo!)
  • Fully Spanish UI and FAQ (Preguntas frecuentes)
  • Mobile responsive layout

Technical stack

  • Vanilla HTML / CSS / JavaScript (no frameworks, no build tools)
  • Static site, deployed on Cloudflare Pages
  • Domain registered via Namesilo, DNS managed on Cloudflare
  • GitHub for source control, auto-deploy on git push

Interesting browser limitation (the main gotcha)

There is one important limitation I discovered while testing on mobile browsers:
Mobile operating systems suspend inactive browser tabs to save battery. If the phone screen locks, the browser tab may pause.

That means: to guarantee the end-of-timer sound alert, the tab must remain open and active. I added this note clearly inside the FAQ for users.

Deployment workflow

  1. Source code hosted on GitHub
  2. Connect GitHub repository to Cloudflare Pages
  3. Point Namesilo domain nameservers to Cloudflare
  4. Set up SSL, force HTTPS
  5. Add sitemap.xml and robots.txt for search engines
  6. Submit site to Google Search Console for indexing

SEO & content choices

Since this targets Spanish-speaking visitors, all page content, button labels and FAQ are written in natural Spanish.
Meta title and description are localized for Spanish search queries like temporizador online gratis.

What I learned

This small static project reminded me that simple browser tools can still have real users.
You don’t always need heavy frameworks or complex backend for useful web utilities. Client-side-only apps can be fast, cheap to host, and globally available with Cloudflare’s edge network.

Next ideas

  • Improve accessibility (ARIA labels, keyboard shortcuts)
  • Add dark mode toggle
  • Add preset buttons for common timer durations (1min,5min,10min)

Feel free to try the timer here: https://temporizador.cc/
I welcome feedback, bugs and suggestions!

Top comments (0)