/focusTimer3.0

Challange 06 (complex layout) | Explorer Program at Rocketseat

Primary LanguageHTML

focus-timer-3.0

"FocusTimer" Challange (harder) | Create a Pomodoro timer with more functions.

image

The functionality of the button in the upper right corner is to switch between Light Mode and Dark Mode.

The buttons on the left side, below the timer, have the following functions:

  • Play / Pause: trigger / pause the timer;
  • Stop: stops the timer;
  • +: increases the timer time by 5 minutes;
  • -: decreases the timer time by 5 minutes.

Each card on the right side, when selected, changes color and emits a different sound, associated with the forest, rain, cafeteria or fireplace. Also, the volume can be controlled by the slider that is under each icon. By default, when you click on any area of a card, its volume is automatically set to 50%.