Focus Timer 2.0 - Pomodoro style

PT-BR: Temporizador estilo Pomodoro

🚀 Technologies

EN: This project was developed with the following technologies:

---

PT-BR: Esse projeto foi desenvolvido com as seguintes tecnologias:

• HTML
• CSS
• JavaScript
• Git e Github
• Figma

📖 Concepts

EN / PT-BR: Concepts:

• Data structure in HTML -- ( Estrutura de dados HTML )
• Animations in CSS -- ( Animações com CSS )
• Functions in JS -- ( Funções no Javascript )
• DOM manipulation -- ( Manipulação da DOM )
• Callback function -- ( Funções callback )
• setTimeOut for countdown -- ( setTimeOut para temporizador )
• Sounds in JS
• Import and export JS files -- ( Importar e exportar arquivos JS )
• Object Literals

📖 Project

EN: In this project, the idea is to improve the last Focus Timer (https://lidiabrentano.github.io/focus-timer-01/) which uses the style Pomodoro for concentration during studies or work. Now, besides the possibility to add or remove 5 minutes of the clock; start and pause de timer and listen to ambient sounds during the studies. Here are the improvements and new challenges:

• Darkmode and lightmode options
• Set a specific time of study without the need of adding 5/5 minutes
• Control the volume of the sounds
• Pause or reset timer

Code improvements:

• There were made improvements on the code to keep it more clean and visual. Following rules of Clean Code.

Project made in Rocketseat's course "Explorer".
The layout was sent via Figma.

---

PT-BR: A ideia do projeto é melhorar o Temporizador criado anteriormente: https://lidiabrentano.github.io/focus-timer-01/ o qual utiliza o estilo Pomodoro. Agora, além de adicionar ou remover 5 minutos de tempo; inciar e pausar o temporizador e ouvir sons ambiente para melhorar a concentração durante os estudos ou durante o trabalho, foram feitas as seguintes melhorias:

• Opção de fundo escuro e claro
• Determinar um tempo específico para estudos sem precisar adicionar de 5 em 5 minutos
• Controlar o volume dos audios
• Pausar ou reiniciar o temporizador

Melhorias no código:

• Foram feitas melhorias no código para deixá-lo mais limpo e visual, seguindo boas práticas de Clean Code.

O projeto possui adaptação para telas de celular e desktop.
O layout para consulta foi enviado através da plataforma Figma.
Projeto feito no curso Explorer da Rocketseat.

• Online project: https://lidiabrentano.github.io/focus-timer-2.0/

---

By Lídia Brentano 💜