I Built a Sleek Pomodoro Timer with Pure Vanilla JS & Web Audio API (No External Audio Files!)

yomna jarray — Wed, 11 Nov 2026 18:28:56 +0000

Hey everyone! 👋

Following up on my last UI component project, I just built FocusPulse—a zero-dependency Pomodoro focus timer built with pure HTML, CSS, and Vanilla JavaScript.

💡 Why I Built It

Most simple web timers rely on external .mp3 or .wav files for notification chimes, which can lead to broken audio links, CORS issues, or slow loading times. For this project, I wanted to build a clean, self-contained productivity tool that generates its own chimes programmatically right inside the browser.

✨ Key Features

Web Audio API Synthesizer: Plays crisp notification tones generated dynamically with code—no external audio assets required.
SVG Progress Ring: A dynamic, circular timer progress indicator powered by CSS and JavaScript.
Customizable Intervals & Persistence: Set your own Focus, Short Break, and Long Break durations, which save automatically to localStorage.
Zero Dependencies: No Tailwind, React, or external sound libraries—just lightweight, high-performance web standards.

📦 Source Code

You can grab the full source code (HTML, CSS, and JavaScript files with setup instructions) for free or pay-what-you-want on Gumroad:

👉 https://yomna67.gumroad.com/l/focus-pulse

I'd love to hear your feedback or suggestions for features to add in the next version!

Instant Dark/light mode Switcher with pure Vanilla JS & CSS

yomna jarray — Wed, 11 Nov 2026 16:44:09 +0000

I built a lightweight, responsive Dark/Light mode toggle component using pure HTML, CSS custom properties, and Vanilla JavaScript.

Features