Explorer_Desafio_Pomofocus_3.0

A pomodoro focus timer with sounds

About • Layout • How to use • Tech Stack • Autor • License

💻 About

In this challenge, it was requested to create a Pomofocus, a pomodoro countdown to focus with 4 sound options.
The page should display a pomodoro timer and user can set timer each 5 minutes. We have 4 options of sounds: Forest, rainy, a firecamp and a coffee shop. A button to switch between light and dark mode colors.

I had the oportunity to practice and study:

Manipulate DOM;
Event-driven and callbacks;
ES6 Modules;
Objects with Factory and Dependency injection.

As a "extra mile" and to chalenge myself I included some features:

Included pause button to allow user pause the timer (animation toggle between pause and play buttons);
Stop button reset the timer to the original time defined;
Volume control can set the volume individualy at same time with other sounds;
Alert mesage to "maximum 99 minutes" and "minimum 1 minute" to set timer
User can combine more than one sound;
Animation "click sound" to pause, play and stop button;
A hover color in timer control buttons;
A mobile version.