####################################################################################################
01. Apresentacao do projeto:
Nesta aula, iremos desenvolver o "Focus Timer", um projeto de timer que utiliza ES6 modules, estados, variáveis, callback functions e um modo escuro / claro.
Aprenderemos como criar um timer funcional usando JavaScript moderno com a utilização de módulos ES6, que nos ajudam a organizar o código de maneira modular e reutilizável.
Exploraremos o conceito de estados para controlar o tempo decorrido e a contagem regressiva do timer. Utilizaremos variáveis para armazenar informações importantes e atualizar dinamicamente o nosso timer.
Além disso, abordaremos as callback functions, que nos permitirão executar ações específicas quando certos eventos ocorrerem, como o término do tempo ou a mudança do modo escuro para o claro.
Por fim, implementaremos uma funcionalidade de dark / light mode, onde o usuário poderá alternar entre os modos escuro e claro para melhorar a experiência visual do timer.
Acesse aqui o [**Figma do projeto**](https://www.figma.com/community/file/1263574581735209131/Focus-Timer-V2-%E2%80%A2-Projeto-Explorer).
[Acesse aqui os **assets do projeto**](https://github.com/rocketseat-education/focus-timer-v2/tree/main/assets).
####################################################################################################
03. Estruturando o HTML:
Vamos montar a estrutura inicial do projeto em HTML?
**[Aqui neste link](https://github.com/rocketseat-education/focus-timer-v2/tree/e6ccab9d7205ea8ca94b0f2d294a9797c5cad466)** você pode acessar o código da aula no GitHub.
####################################################################################################
04. Adicionando icones:
[Commit: Adicionando ícones](https://github.com/rocketseat-education/focus-timer-v2/tree/073914ae80b8f15008472141b13a4215009755d8)
Está na hora de adicionar ícones ao projeto e, para isso, vamos usar uma biblioteca externa, a https://phosphoricons.com/
Para utilizar a Biblioteca, copie a linha abaixo e cole entre as tags ` ` no seu HTML:
```jsx
```
Uma dica: ao longo do projeto, o Mayk usará os ícones tanto com tags do tipo como com tags do tipo . Aproveite para visitar a documentação da biblioteca e conhecer esses e outros usos.
[Visite o site da biblioteca Phosphor Icons](https://phosphoricons.com/)
Criaremos botões para ativar/desativar o modo claro/escuro, e utilizaremos os ícones fornecidos pelo Phosphor Icons para melhorar a usabilidade e a aparência visual dos botões.
Além disso, modificaremos a seção de controles do timer, substituindo os botões existentes pelos novos botões com ícones. Essa alteração deixará o layout mais intuitivo e amigável para o usuário.
Ao final desta aula, teremos um HTML bem estruturado e organizado, pronto para ser estilizado e ter a lógica do JavaScript implementada.
####################################################################################################
05. Iniciando os estilos e variaveis:
Nesta aula, realizamos alterações no HTML e CSS do projeto Focus Timer. Adicionamos a classe "flex" para estilizar o layout dos elementos do timer e dos controles, permitindo que sejam organizados em uma linha horizontal.
No CSS, criamos variáveis para definir cores principais, como a cor de fundo e do texto. Também estabelecemos estilos iniciais para o body e o #app, centralizando o conteúdo verticalmente na tela.
Com essas alterações, demos início à estilização do timer e à criação de variáveis CSS. Nos próximos passos, continuaremos a estilização e aprimoramento do timer, além de implementar a lógica em JavaScript para torná-lo totalmente funcional.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/8b45a20fc8ac2a8afdefe776384eb3a534597096)
####################################################################################################
06. Estilizando o relogio e botoes:
Nesta aula, realizamos a estilização do relógio e dos botões do projeto Focus Timer. Utilizamos as classes "running" e "music-on" para controlar a exibição dos ícones de acordo com o estado do timer. Além disso, aplicamos estilos para a cor secundária dos elementos.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/a8d4291d32aec5123600c82c4746b8ea866f5a3a)
####################################################################################################
07. CSS not para remover botoes da tela:
Nesta aula do projeto FocusTimer, aprendemos a usar o seletor **`:not`** no CSS para remover botões da tela. Através de modificações no arquivo **`style.css`**, os botões são estilizados com base em classes como **`.running`** e **`.music-on`**. Isso permite ocultar ou exibir os botões de acordo com o estado do temporizador, melhorando a interação com o aplicativo.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/21c0be26c3d63aa6fe69762ea82cdf6e0eda5b53)
####################################################################################################
08. Estilos para o light mode:
Nesta aula, adicionamos a classe **`light`** ao elemento **``** para alternar entre os modos claro e escuro.
No arquivo CSS, aplicamos estilos diferentes para o modo claro e escuro usando variáveis CSS. Utilizamos a propriedade **`not`** para ocultar os ícones de sol e lua dependendo da presença ou ausência da classe **`light`**.
Além disso, estilizamos o botão **`toggle-mode`** para uma melhor aparência e posicionamento na tela.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/823f96c7633fc0ac4b40cd7d30b192fa9eb24d21)
####################################################################################################
09. Adicionando acessibilidade aos botoes:
Nesta aula do projeto FocusTimer, focaremos em adicionar acessibilidade aos botões do aplicativo. O objetivo é tornar a experiência mais inclusiva para usuários com deficiência visual, proporcionando uma melhor compreensão dos botões por meio de recursos de leitura de tela.
Ao aplicar o diff do código fornecido, podemos observar as modificações feitas nos arquivos **`index.html`** e **`style.css`**.
No arquivo **`index.html`**, foi adicionada a classe **`sr-only`** às tags **``** dentro dos botões. Essa classe é utilizada para ocultar visualmente o texto dos botões, mas ainda assim torná-lo disponível para leitura de tela. Além disso, foram adicionadas descrições acessíveis para cada botão, como "Ativar / desativar light mode", "Iniciar contador", "Pausar contador", "Ajustar contador", "Reiniciar contador", "Iniciar música" e "Parar música".
No arquivo **`style.css`**, foi criada uma classe **`.sr-only`** para estilizar os elementos com a classe correspondente. Essa classe define propriedades como largura e altura de 1 pixel, posicionamento absoluto, efeitos de margem e preenchimento negativos, além de remover a aparência padrão do elemento. Essas propriedades garantem que o conteúdo seja ocultado visualmente, mas permaneça acessível para leitores de tela.
Essas modificações visam garantir que os botões sejam adequadamente identificados e entendidos pelos usuários com deficiência visual, melhorando a experiência de acessibilidade do aplicativo FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/a8d6addbcd7f8a61fd7e23ebfa6540b79c495227)
####################################################################################################
10. Adicionando a logica do ligh mode:
Nesta aula do projeto FocusTimer, aprenderemos a adicionar a lógica para alternar entre os modos de visualização light e dark no aplicativo. O objetivo é permitir que os usuários personalizem a aparência do timer de acordo com suas preferências.
Ao aplicar o diff do código fornecido, notamos que foram feitas modificações nos arquivos **`index.html`**, **`main.js`** e **`toggle-mode.js`**.
No arquivo **`index.html`**, removemos a classe **`light`** da tag **``**. Essa classe é responsável por definir o modo light por padrão. Também adicionamos o atributo **`type="module"`** ao script principal e definimos seu caminho para **`./src/main.js`**. Isso garante que o arquivo **`main.js`** seja importado corretamente.
Criamos um novo arquivo chamado **`toggle-mode.js`** no diretório **`src`**. Esse arquivo contém a lógica para alternar entre os modos de visualização. Ao clicar no botão de toggle, a classe **`light`** é alternada na tag **``**, ativando ou desativando o modo light. Além disso, o texto do botão é atualizado para refletir o modo ativado. A variável **`darkMode`** é usada para rastrear o estado atual do modo.
Essas modificações permitem que os usuários ativem ou desativem o modo light no aplicativo FocusTimer, fornecendo uma opção de personalização visual.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/7a7b846d59abfc1bee6c869236140c0933f05210)
####################################################################################################
11. Construindo o modulo FocusTimer:
Nesta aula do projeto FocusTimer, vamos nos concentrar na construção do módulo principal do aplicativo, chamado FocusTimer. O objetivo é criar a estrutura básica do timer e implementar a funcionalidade de iniciar o contador.
Durante a aula, serão abordados conceitos importantes de programação JavaScript, como a criação de módulos usando o recurso de exportação e importação do ES6. Os alunos aprenderão a criar um novo arquivo chamado **`index.js`** dentro do diretório **`FocusTimer`**, que conterá a função **`start`** responsável por iniciar o timer.
O resultado dessa aula é a criação do arquivo **`index.js`** no diretório **`FocusTimer`**, contendo a função **`start`** que recebe os parâmetros **`minutes`** e **`seconds`** e imprime seus valores no console. Além disso, no arquivo **`main.js`**, importamos o módulo **`FocusTimer`** e chamamos a função **`start`** com valores iniciais de 0 para os minutos e 6 para os segundos.
Essas modificações permitem que o módulo FocusTimer seja construído e a função de iniciar o contador seja implementada. Com isso, estamos um passo mais perto de termos um timer funcional no projeto FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/c6ce79cbed4da6d17ec7ee46adf2983cc6bc82c2)
####################################################################################################
12. Criando o estado da aplicacao:
Nesta aula do projeto FocusTimer, vamos nos concentrar em criar o estado da aplicação, que irá armazenar e controlar as informações relevantes para o funcionamento do timer.
Durante a aula, será criado um novo arquivo chamado **`state.js`** no diretório **`FocusTimer`**, que irá exportar um objeto contendo as propriedades do estado da aplicação. Esse objeto incluirá informações como os minutos, segundos, status de execução e o status de mudo do timer.
No arquivo **`index.js`**, importaremos o módulo **`state`** e utilizaremos as propriedades **`minutes`** e **`seconds`** para atualizar o estado do timer quando a função **`start`** for chamada. Através do objeto **`state`**, teremos acesso às informações atualizadas do timer, permitindo que possamos manipulá-las e realizar operações de controle.
O resultado dessa aula é a criação do arquivo **`state.js`** no diretório **`FocusTimer`**, contendo um objeto que representa o estado da aplicação. Além disso, no arquivo **`index.js`**, utilizamos o estado para atualizar as propriedades **`minutes`** e **`seconds`** ao chamar a função **`start`**, e em seguida, imprimimos o estado atualizado no console.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/df5f20ef0a477a3769335e3e495ef711709049d0)
####################################################################################################
13. Registrando eventos dos botoes:
Nesta aula do projeto FocusTimer, aprenderemos como registrar eventos nos botões do timer. O objetivo é permitir que os botões tenham comportamentos interativos, respondendo a cliques do usuário.
Durante a aula, serão criados dois novos arquivos: **`elements.js`** e **`events.js`**. No arquivo **`elements.js`**, exportaremos o elemento **`controls`**, que representa o container dos botões do timer. Em seguida, no arquivo **`events.js`**, importaremos o elemento **`controls`** e criaremos a função **`registerControls`** para registrar os eventos dos botões.
Dentro da função **`registerControls`**, utilizaremos o método **`addEventListener`** para adicionar um ouvinte de evento de clique nos botões. Quando um botão for clicado, será exibido no console o elemento HTML correspondente ao botão clicado.
No arquivo **`index.js`**, além de importarmos o módulo **`events`**, chamaremos a função **`registerControls`** dentro da função **`start`**. Isso garantirá que os eventos dos botões sejam registrados quando o timer for iniciado.
O resultado dessa aula é a criação dos arquivos **`elements.js`** e **`events.js`**, e a implementação da função **`registerControls`**. Ao iniciar o timer através da função **`start`**, os eventos dos botões serão registrados e exibirão no console o elemento HTML correspondente ao botão clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/e03caac55ad7626932208d91ad4aa6cc4198586c)
####################################################################################################
14. Dataset para controle das acoes:
Nesta aula do projeto FocusTimer, aprenderemos a utilizar o atributo **`data`** dos elementos HTML para controlar as ações dos botões. O objetivo é associar um valor personalizado a cada botão para identificar a ação correspondente quando um botão for clicado.
Durante a aula, faremos modificações no arquivo **`index.html`**. Adicionaremos o atributo **`data-action`** a cada botão, atribuindo um valor específico para indicar a ação correspondente. Por exemplo, definiremos **`data-action="toggleRunning"`** para o botão de iniciar e pausar o contador, **`data-action="set"`** para o botão de ajustar o contador e assim por diante.
No arquivo **`events.js`**, faremos modificações para capturar o valor do atributo **`data-action`** quando um botão for clicado. Utilizaremos a propriedade **`dataset`** do elemento alvo do evento para obter o valor do atributo **`data-action`**. Em seguida, realizaremos um **`console.log`** para exibir a ação correspondente no console.
O resultado dessa aula é a adição do atributo **`data-action`** a cada botão no arquivo **`index.html`** e a modificação da função **`registerControls`** no arquivo **`events.js`** para capturar e exibir a ação correspondente quando um botão for clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/e03caac55ad7626932208d91ad4aa6cc4198586c)
####################################################################################################
15. Conectando as primeiras acoes:
Nesta aula do projeto FocusTimer, aprenderemos a conectar as primeiras ações aos eventos dos botões. O objetivo é fazer com que as ações correspondentes sejam executadas quando um botão for clicado.
Durante a aula, criaremos um novo arquivo chamado **`actions.js`** no diretório **`FocusTimer`**. Nesse arquivo, implementaremos a função **`toggleRunning`** que será responsável por alternar a execução do timer. No exemplo fornecido, a função simplesmente exibirá uma mensagem no console para indicar que a ação foi acionada.
No arquivo **`events.js`**, faremos modificações para importar o módulo **`actions`** que contém as funções de ação. Em seguida, atualizaremos a função **`registerControls`** para executar a ação correspondente quando um botão for clicado. Utilizaremos a ação como uma chave para obter a função correspondente do objeto **`actions`** e chamá-la.
O resultado dessa aula é a criação do arquivo **`actions.js`** com a função **`toggleRunning`**, e a modificação da função **`registerControls`** no arquivo **`events.js`** para executar a ação correspondente quando um botão for clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/2a4d5caa92f32f08375bcc072665654bf7c427da)
####################################################################################################
16. Alterando o estado da apliacao conforme a acao:
Nesta aula do projeto FocusTimer, aprenderemos a alterar o estado da aplicação conforme a ação realizada pelo usuário nos botões. O objetivo é modificar o estado do timer e controlar a aparência do aplicativo com base nas ações executadas.
O resultado dessa aula é a modificação do arquivo **`actions.js`**, adicionando as implementações das funções **`toggleRunning`**, **`reset`**, **`set`** e **`toggleMusic`**, que alteram o estado do timer e controlam as classes CSS correspondentes.
Essas modificações permitem que o estado da aplicação seja atualizado conforme as ações realizadas pelos usuários nos botões, proporcionando uma experiência interativa e visualmente coerente no projeto FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/eeeeb0c72109c7d1dcd1482e25fe143a97d5c2f7)
####################################################################################################
17. Atualizando o display do contador:
Nesta aula do projeto FocusTimer, aprenderemos a atualizar o display do contador para exibir o tempo restante de forma adequada. O objetivo é garantir que os minutos e segundos sejam exibidos corretamente no formato de dois dígitos, preenchendo com zero à esquerda, quando necessário.
Durante a aula, faremos modificações nos arquivos **`elements.js`**, **`index.js`** e criaremos um novo arquivo chamado **`timer.js`**.
No arquivo **`elements.js`**, adicionaremos as constantes **`minutes`** e **`seconds`**, que correspondem aos elementos HTML onde o tempo restante será exibido.
No arquivo **`index.js`**, importaremos o módulo **`timer`** e chamaremos a função **`updateDisplay`** logo após definir os valores iniciais dos minutos e segundos. Isso permitirá que o display seja atualizado de acordo com os valores iniciais do contador.
No arquivo **`timer.js`**, criaremos a função **`updateDisplay`**, que recebe os parâmetros **`minutes`** e **`seconds`**. Essa função atualiza os elementos **`el.minutes`** e **`el.seconds`** (obtidos do arquivo **`elements.js`**) com o tempo atualizado do contador. Os valores de minutos e segundos são padronizados para dois dígitos, preenchendo com zero à esquerda, usando o método **`padStart`**.
O resultado dessa aula é a criação do arquivo **`timer.js`**, contendo a função **`updateDisplay`**, e as modificações nos arquivos **`elements.js`** e **`index.js`**. Agora, o display do contador será atualizado corretamente com os valores dos minutos e segundos.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/29649ee8f32eacea2e596e4b8af36629c4cc4197)
####################################################################################################
18. Estruturando o countdown:
Na próxima aula do projeto FocusTimer, iremos estruturar o countdown, que é a contagem regressiva do timer. O objetivo é implementar a lógica para fazer a contagem regressiva a partir dos valores de minutos e segundos definidos pelo usuário.
Durante a aula, faremos modificações nos arquivos **`actions.js`** e **`timer.js`**.
No arquivo **`actions.js`**, importaremos o módulo **`timer`** e chamaremos a função **`countdown`** ao alternar a execução do timer. Isso permitirá iniciar o countdown quando o timer estiver em execução.
No arquivo **`timer.js`**, criaremos a função **`countdown`**, que será responsável pela contagem regressiva do timer. Primeiro, verificaremos se o timer está em execução. Caso contrário, a função será interrompida.
Em seguida, utilizaremos a função **`setTimeout`** para chamar recursivamente a função **`countdown`** após 1 segundo (1000 milissegundos). Dessa forma, a contagem regressiva será executada a cada segundo.
O resultado dessa aula é a estruturação do countdown no arquivo **`timer.js`**, através da função **`countdown`**, e a modificação no arquivo **`actions.js`** para chamar o countdown ao alternar a execução do timer.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/f896f70a65d65a91d9414bf1e277bfef667c0281)
####################################################################################################
19. Logica do countdown:
Nesta aula do projeto FocusTimer, implementamos a lógica do countdown, que consiste na contagem regressiva dos minutos e segundos do timer.
No arquivo **`actions.js`**, adicionamos a chamada da função **`updateDisplay`** no método **`reset`**, para atualizar o display quando o timer for resetado.
No arquivo **`timer.js`**, implementamos a função **`countdown`** que decrementa os valores de minutos e segundos a cada segundo. Se os segundos chegam a zero, decrementamos os minutos e ajustamos os segundos para 59. Se os minutos chegam a zero, chamamos a função **`reset`** para encerrar o countdown.
Essas modificações permitem que o projeto FocusTimer execute a contagem regressiva corretamente, atualizando o display do contador e finalizando a contagem quando o tempo definido for atingido.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/3817a1c2086c26a6d41140892956d852f5aabe43)
####################################################################################################
20. Alterando conteudo de uma tag com contenteditable:
Na aula, aprenderemos a utilizar o atributo **`contenteditable`** para permitir que o usuário edite o conteúdo de uma tag específica. O objetivo é proporcionar uma forma interativa para o usuário personalizar o tempo exibido no contador.
Durante a aula, faremos modificações no arquivo **`actions.js`**.
No arquivo **`actions.js`**, adicionaremos a função **`set`** para habilitar a edição do conteúdo dos minutos. Utilizaremos o método **`setAttribute`** para definir o atributo **`contenteditable`** como **`true`** na tag dos minutos, possibilitando que o usuário possa editar esse valor.
O resultado dessa aula é a adição da função **`set`** no arquivo **`actions.js`**, que habilita a edição do conteúdo dos minutos por meio do atributo **`contenteditable`**.
Essa modificação permite que o projeto FocusTimer ofereça a funcionalidade de edição interativa do tempo, proporcionando ao usuário a capacidade de personalizar os valores exibidos no contador de forma flexível.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/7a9ddecf2d9a64f3b37fd55db47e52ddb5025568)
####################################################################################################
21. Limpando o conteudo de uma tag com evento de focus:
Nesta aula, aprendemos a limpar o conteúdo de uma tag quando ela recebe o foco do usuário. Fizemos alterações nos arquivos **`actions.js`**, **`events.js`** e **`index.js`**.
No arquivo **`actions.js`**, adicionamos o método **`focus()`** à função **`set()`** para que o campo dos minutos receba automaticamente o foco quando ativado.
No arquivo **`events.js`**, criamos a função **`setMinutes()`** para adicionar um ouvinte de evento de foco à tag dos minutos. Quando o campo recebe o foco, o conteúdo existente é limpo, deixando-o em branco para que o usuário possa inserir um novo valor.
No arquivo **`index.js`**, chamamos a função **`setMinutes()`** na função **`start()`** para registrar o evento de foco e limpar o conteúdo dos minutos.
Essas modificações permitem uma melhor experiência do usuário, tornando mais fácil a inserção de novos valores nos minutos, pois o conteúdo existente é apagado automaticamente quando o campo é ativado.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/8adc419dd5accb3338d8c5c538ba401347e99f79)
####################################################################################################
22. Aceitando apenas numeros no contador:
Nesta aula do projeto FocusTimer, implementamos a funcionalidade que permite apenas a inserção de números no campo dos minutos do contador. Para isso, adicionamos um manipulador de evento **`onkeypress`** ao campo dos minutos no arquivo **`events.js`**.
Com essa modificação, garantimos que apenas números sejam aceitos como entrada no campo dos minutos, impedindo a inserção de caracteres não numéricos. Isso ajuda a manter a integridade dos dados e a coerência das informações inseridas no contador.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/1b78cc530055f565b923412dac1b46aa448469f4)
####################################################################################################
23. Finalizando a escolha dos minutos do temporizador:
Nesta aula, concluímos a funcionalidade de seleção dos minutos para o temporizador. Realizamos alterações no arquivo **`events.js`** para finalizar a escolha dos minutos.
No arquivo **`events.js`**, importamos o módulo **`state`** para acessar o estado da aplicação e o módulo **`updateDisplay`** para atualizar a exibição do contador. Também adicionamos um manipulador de evento **`blur`** ao campo dos minutos.
Quando o campo dos minutos perde o foco (evento **`blur`**), capturamos o valor inserido pelo usuário. Em seguida, verificamos se o valor é maior que 60, pois o temporizador só suporta até 60 minutos. Caso seja maior, definimos o valor como 60.
Atualizamos o estado da aplicação com os minutos escolhidos e os segundos definidos como zero. Em seguida, chamamos a função **`updateDisplay`** para refletir as alterações na exibição do contador.
Por fim, removemos o atributo **`contenteditable`** do campo dos minutos para impedir edições posteriores.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/de0789600e950f39339489f4bdddc4c547fb51c8)
####################################################################################################
24. Adicionando sons na aplicacao:
Nessa aula , implementamos a funcionalidade de reprodução de sons para melhorar a experiência do usuário. Adicionamos três arquivos de áudio à pasta "assets" e importamos o módulo "sounds.js" para controlar os sons na aplicação. Modificamos as funções existentes para reproduzir os sons em momentos específicos, como ao pressionar botões e quando o temporizador chega a zero.
Essas alterações tornam a aplicação mais interativa e envolvente para o usuário.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/1d1cffe54e913fef4f0c01c182ff3c83d94a1498)
####################################################################################################
25. Corrigindo o Acúmulo de Timeout:
[Commit: Corrigindo o Acúmulo de Timeout](https://github.com/rocketseat-education/focus-timer-v2/tree/cb650e44b9e4cd7070888f0eb05de276906589c7)
Nesta aula, vamos corrigir um bug em nossa aplicação. Quando clicamos rapidamente em play e pause, o contador começa a acelerar cada vez mais. Isso acontece porque a cada clique, um novo setTimeout é criado, acumulando timeouts anteriores e acelerando o contador. Para corrigir isso, vamos armazenar o ID de cada setTimeout em nosso estado e limpar o timeout anterior antes de criar um novo. Dessa forma, mesmo que cliquemos rapidamente, o contador continuará a contar de segundo a segundo, sem acelerar.
####################################################################################################
26. Despedida do Módulo:
[Commit: Despedida do Módulo](https://github.com/rocketseat-education/focus-timer-v2)
Neste módulo, você concluiu um projeto incrível que possui um Dark Light Mode, contador e som. Parabéns pelo seu sucesso! Embora possam existir alguns erros que serão descobertos posteriormente, o importante é que você já conseguiu realizar muitas coisas. Continue avançando, pois há muito mais pela frente. Nos vemos nas próximas aulas! Um grande abraço do Maikão!
####################################################################################################
01. Apresentacao do projeto:
Nesta aula, iremos desenvolver o "Focus Timer", um projeto de timer que utiliza ES6 modules, estados, variáveis, callback functions e um modo escuro / claro.
Aprenderemos como criar um timer funcional usando JavaScript moderno com a utilização de módulos ES6, que nos ajudam a organizar o código de maneira modular e reutilizável.
Exploraremos o conceito de estados para controlar o tempo decorrido e a contagem regressiva do timer. Utilizaremos variáveis para armazenar informações importantes e atualizar dinamicamente o nosso timer.
Além disso, abordaremos as callback functions, que nos permitirão executar ações específicas quando certos eventos ocorrerem, como o término do tempo ou a mudança do modo escuro para o claro.
Por fim, implementaremos uma funcionalidade de dark / light mode, onde o usuário poderá alternar entre os modos escuro e claro para melhorar a experiência visual do timer.
Acesse aqui o [**Figma do projeto**](https://www.figma.com/community/file/1263574581735209131/Focus-Timer-V2-%E2%80%A2-Projeto-Explorer).
[Acesse aqui os **assets do projeto**](https://github.com/rocketseat-education/focus-timer-v2/tree/main/assets).
####################################################################################################
03. Estruturando o HTML:
Vamos montar a estrutura inicial do projeto em HTML?
**[Aqui neste link](https://github.com/rocketseat-education/focus-timer-v2/tree/e6ccab9d7205ea8ca94b0f2d294a9797c5cad466)** você pode acessar o código da aula no GitHub.
####################################################################################################
04. Adicionando icones:
[Commit: Adicionando ícones](https://github.com/rocketseat-education/focus-timer-v2/tree/073914ae80b8f15008472141b13a4215009755d8)
Está na hora de adicionar ícones ao projeto e, para isso, vamos usar uma biblioteca externa, a https://phosphoricons.com/
Para utilizar a Biblioteca, copie a linha abaixo e cole entre as tags ` ` no seu HTML:
```jsx
```
Uma dica: ao longo do projeto, o Mayk usará os ícones tanto com tags do tipo como com tags do tipo . Aproveite para visitar a documentação da biblioteca e conhecer esses e outros usos.
[Visite o site da biblioteca Phosphor Icons](https://phosphoricons.com/)
Criaremos botões para ativar/desativar o modo claro/escuro, e utilizaremos os ícones fornecidos pelo Phosphor Icons para melhorar a usabilidade e a aparência visual dos botões.
Além disso, modificaremos a seção de controles do timer, substituindo os botões existentes pelos novos botões com ícones. Essa alteração deixará o layout mais intuitivo e amigável para o usuário.
Ao final desta aula, teremos um HTML bem estruturado e organizado, pronto para ser estilizado e ter a lógica do JavaScript implementada.
####################################################################################################
05. Iniciando os estilos e variaveis:
Nesta aula, realizamos alterações no HTML e CSS do projeto Focus Timer. Adicionamos a classe "flex" para estilizar o layout dos elementos do timer e dos controles, permitindo que sejam organizados em uma linha horizontal.
No CSS, criamos variáveis para definir cores principais, como a cor de fundo e do texto. Também estabelecemos estilos iniciais para o body e o #app, centralizando o conteúdo verticalmente na tela.
Com essas alterações, demos início à estilização do timer e à criação de variáveis CSS. Nos próximos passos, continuaremos a estilização e aprimoramento do timer, além de implementar a lógica em JavaScript para torná-lo totalmente funcional.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/8b45a20fc8ac2a8afdefe776384eb3a534597096)
####################################################################################################
06. Estilizando o relogio e botoes:
Nesta aula, realizamos a estilização do relógio e dos botões do projeto Focus Timer. Utilizamos as classes "running" e "music-on" para controlar a exibição dos ícones de acordo com o estado do timer. Além disso, aplicamos estilos para a cor secundária dos elementos.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/a8d4291d32aec5123600c82c4746b8ea866f5a3a)
####################################################################################################
07. CSS not para remover botoes da tela:
Nesta aula do projeto FocusTimer, aprendemos a usar o seletor **`:not`** no CSS para remover botões da tela. Através de modificações no arquivo **`style.css`**, os botões são estilizados com base em classes como **`.running`** e **`.music-on`**. Isso permite ocultar ou exibir os botões de acordo com o estado do temporizador, melhorando a interação com o aplicativo.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/21c0be26c3d63aa6fe69762ea82cdf6e0eda5b53)
####################################################################################################
08. Estilos para o light mode:
Nesta aula, adicionamos a classe **`light`** ao elemento **``** para alternar entre os modos claro e escuro.
No arquivo CSS, aplicamos estilos diferentes para o modo claro e escuro usando variáveis CSS. Utilizamos a propriedade **`not`** para ocultar os ícones de sol e lua dependendo da presença ou ausência da classe **`light`**.
Além disso, estilizamos o botão **`toggle-mode`** para uma melhor aparência e posicionamento na tela.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/823f96c7633fc0ac4b40cd7d30b192fa9eb24d21)
####################################################################################################
09. Adicionando acessibilidade aos botoes:
Nesta aula do projeto FocusTimer, focaremos em adicionar acessibilidade aos botões do aplicativo. O objetivo é tornar a experiência mais inclusiva para usuários com deficiência visual, proporcionando uma melhor compreensão dos botões por meio de recursos de leitura de tela.
Ao aplicar o diff do código fornecido, podemos observar as modificações feitas nos arquivos **`index.html`** e **`style.css`**.
No arquivo **`index.html`**, foi adicionada a classe **`sr-only`** às tags **``** dentro dos botões. Essa classe é utilizada para ocultar visualmente o texto dos botões, mas ainda assim torná-lo disponível para leitura de tela. Além disso, foram adicionadas descrições acessíveis para cada botão, como "Ativar / desativar light mode", "Iniciar contador", "Pausar contador", "Ajustar contador", "Reiniciar contador", "Iniciar música" e "Parar música".
No arquivo **`style.css`**, foi criada uma classe **`.sr-only`** para estilizar os elementos com a classe correspondente. Essa classe define propriedades como largura e altura de 1 pixel, posicionamento absoluto, efeitos de margem e preenchimento negativos, além de remover a aparência padrão do elemento. Essas propriedades garantem que o conteúdo seja ocultado visualmente, mas permaneça acessível para leitores de tela.
Essas modificações visam garantir que os botões sejam adequadamente identificados e entendidos pelos usuários com deficiência visual, melhorando a experiência de acessibilidade do aplicativo FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/a8d6addbcd7f8a61fd7e23ebfa6540b79c495227)
####################################################################################################
10. Adicionando a logica do ligh mode:
Nesta aula do projeto FocusTimer, aprenderemos a adicionar a lógica para alternar entre os modos de visualização light e dark no aplicativo. O objetivo é permitir que os usuários personalizem a aparência do timer de acordo com suas preferências.
Ao aplicar o diff do código fornecido, notamos que foram feitas modificações nos arquivos **`index.html`**, **`main.js`** e **`toggle-mode.js`**.
No arquivo **`index.html`**, removemos a classe **`light`** da tag **``**. Essa classe é responsável por definir o modo light por padrão. Também adicionamos o atributo **`type="module"`** ao script principal e definimos seu caminho para **`./src/main.js`**. Isso garante que o arquivo **`main.js`** seja importado corretamente.
Criamos um novo arquivo chamado **`toggle-mode.js`** no diretório **`src`**. Esse arquivo contém a lógica para alternar entre os modos de visualização. Ao clicar no botão de toggle, a classe **`light`** é alternada na tag **``**, ativando ou desativando o modo light. Além disso, o texto do botão é atualizado para refletir o modo ativado. A variável **`darkMode`** é usada para rastrear o estado atual do modo.
Essas modificações permitem que os usuários ativem ou desativem o modo light no aplicativo FocusTimer, fornecendo uma opção de personalização visual.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/7a7b846d59abfc1bee6c869236140c0933f05210)
####################################################################################################
11. Construindo o modulo FocusTimer:
Nesta aula do projeto FocusTimer, vamos nos concentrar na construção do módulo principal do aplicativo, chamado FocusTimer. O objetivo é criar a estrutura básica do timer e implementar a funcionalidade de iniciar o contador.
Durante a aula, serão abordados conceitos importantes de programação JavaScript, como a criação de módulos usando o recurso de exportação e importação do ES6. Os alunos aprenderão a criar um novo arquivo chamado **`index.js`** dentro do diretório **`FocusTimer`**, que conterá a função **`start`** responsável por iniciar o timer.
O resultado dessa aula é a criação do arquivo **`index.js`** no diretório **`FocusTimer`**, contendo a função **`start`** que recebe os parâmetros **`minutes`** e **`seconds`** e imprime seus valores no console. Além disso, no arquivo **`main.js`**, importamos o módulo **`FocusTimer`** e chamamos a função **`start`** com valores iniciais de 0 para os minutos e 6 para os segundos.
Essas modificações permitem que o módulo FocusTimer seja construído e a função de iniciar o contador seja implementada. Com isso, estamos um passo mais perto de termos um timer funcional no projeto FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/c6ce79cbed4da6d17ec7ee46adf2983cc6bc82c2)
####################################################################################################
12. Criando o estado da aplicacao:
Nesta aula do projeto FocusTimer, vamos nos concentrar em criar o estado da aplicação, que irá armazenar e controlar as informações relevantes para o funcionamento do timer.
Durante a aula, será criado um novo arquivo chamado **`state.js`** no diretório **`FocusTimer`**, que irá exportar um objeto contendo as propriedades do estado da aplicação. Esse objeto incluirá informações como os minutos, segundos, status de execução e o status de mudo do timer.
No arquivo **`index.js`**, importaremos o módulo **`state`** e utilizaremos as propriedades **`minutes`** e **`seconds`** para atualizar o estado do timer quando a função **`start`** for chamada. Através do objeto **`state`**, teremos acesso às informações atualizadas do timer, permitindo que possamos manipulá-las e realizar operações de controle.
O resultado dessa aula é a criação do arquivo **`state.js`** no diretório **`FocusTimer`**, contendo um objeto que representa o estado da aplicação. Além disso, no arquivo **`index.js`**, utilizamos o estado para atualizar as propriedades **`minutes`** e **`seconds`** ao chamar a função **`start`**, e em seguida, imprimimos o estado atualizado no console.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/df5f20ef0a477a3769335e3e495ef711709049d0)
####################################################################################################
13. Registrando eventos dos botoes:
Nesta aula do projeto FocusTimer, aprenderemos como registrar eventos nos botões do timer. O objetivo é permitir que os botões tenham comportamentos interativos, respondendo a cliques do usuário.
Durante a aula, serão criados dois novos arquivos: **`elements.js`** e **`events.js`**. No arquivo **`elements.js`**, exportaremos o elemento **`controls`**, que representa o container dos botões do timer. Em seguida, no arquivo **`events.js`**, importaremos o elemento **`controls`** e criaremos a função **`registerControls`** para registrar os eventos dos botões.
Dentro da função **`registerControls`**, utilizaremos o método **`addEventListener`** para adicionar um ouvinte de evento de clique nos botões. Quando um botão for clicado, será exibido no console o elemento HTML correspondente ao botão clicado.
No arquivo **`index.js`**, além de importarmos o módulo **`events`**, chamaremos a função **`registerControls`** dentro da função **`start`**. Isso garantirá que os eventos dos botões sejam registrados quando o timer for iniciado.
O resultado dessa aula é a criação dos arquivos **`elements.js`** e **`events.js`**, e a implementação da função **`registerControls`**. Ao iniciar o timer através da função **`start`**, os eventos dos botões serão registrados e exibirão no console o elemento HTML correspondente ao botão clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/e03caac55ad7626932208d91ad4aa6cc4198586c)
####################################################################################################
14. Dataset para controle das acoes:
Nesta aula do projeto FocusTimer, aprenderemos a utilizar o atributo **`data`** dos elementos HTML para controlar as ações dos botões. O objetivo é associar um valor personalizado a cada botão para identificar a ação correspondente quando um botão for clicado.
Durante a aula, faremos modificações no arquivo **`index.html`**. Adicionaremos o atributo **`data-action`** a cada botão, atribuindo um valor específico para indicar a ação correspondente. Por exemplo, definiremos **`data-action="toggleRunning"`** para o botão de iniciar e pausar o contador, **`data-action="set"`** para o botão de ajustar o contador e assim por diante.
No arquivo **`events.js`**, faremos modificações para capturar o valor do atributo **`data-action`** quando um botão for clicado. Utilizaremos a propriedade **`dataset`** do elemento alvo do evento para obter o valor do atributo **`data-action`**. Em seguida, realizaremos um **`console.log`** para exibir a ação correspondente no console.
O resultado dessa aula é a adição do atributo **`data-action`** a cada botão no arquivo **`index.html`** e a modificação da função **`registerControls`** no arquivo **`events.js`** para capturar e exibir a ação correspondente quando um botão for clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/e03caac55ad7626932208d91ad4aa6cc4198586c)
####################################################################################################
15. Conectando as primeiras acoes:
Nesta aula do projeto FocusTimer, aprenderemos a conectar as primeiras ações aos eventos dos botões. O objetivo é fazer com que as ações correspondentes sejam executadas quando um botão for clicado.
Durante a aula, criaremos um novo arquivo chamado **`actions.js`** no diretório **`FocusTimer`**. Nesse arquivo, implementaremos a função **`toggleRunning`** que será responsável por alternar a execução do timer. No exemplo fornecido, a função simplesmente exibirá uma mensagem no console para indicar que a ação foi acionada.
No arquivo **`events.js`**, faremos modificações para importar o módulo **`actions`** que contém as funções de ação. Em seguida, atualizaremos a função **`registerControls`** para executar a ação correspondente quando um botão for clicado. Utilizaremos a ação como uma chave para obter a função correspondente do objeto **`actions`** e chamá-la.
O resultado dessa aula é a criação do arquivo **`actions.js`** com a função **`toggleRunning`**, e a modificação da função **`registerControls`** no arquivo **`events.js`** para executar a ação correspondente quando um botão for clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/2a4d5caa92f32f08375bcc072665654bf7c427da)
####################################################################################################
16. Alterando o estado da apliacao conforme a acao:
Nesta aula do projeto FocusTimer, aprenderemos a alterar o estado da aplicação conforme a ação realizada pelo usuário nos botões. O objetivo é modificar o estado do timer e controlar a aparência do aplicativo com base nas ações executadas.
O resultado dessa aula é a modificação do arquivo **`actions.js`**, adicionando as implementações das funções **`toggleRunning`**, **`reset`**, **`set`** e **`toggleMusic`**, que alteram o estado do timer e controlam as classes CSS correspondentes.
Essas modificações permitem que o estado da aplicação seja atualizado conforme as ações realizadas pelos usuários nos botões, proporcionando uma experiência interativa e visualmente coerente no projeto FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/eeeeb0c72109c7d1dcd1482e25fe143a97d5c2f7)
####################################################################################################
17. Atualizando o display do contador:
Nesta aula do projeto FocusTimer, aprenderemos a atualizar o display do contador para exibir o tempo restante de forma adequada. O objetivo é garantir que os minutos e segundos sejam exibidos corretamente no formato de dois dígitos, preenchendo com zero à esquerda, quando necessário.
Durante a aula, faremos modificações nos arquivos **`elements.js`**, **`index.js`** e criaremos um novo arquivo chamado **`timer.js`**.
No arquivo **`elements.js`**, adicionaremos as constantes **`minutes`** e **`seconds`**, que correspondem aos elementos HTML onde o tempo restante será exibido.
No arquivo **`index.js`**, importaremos o módulo **`timer`** e chamaremos a função **`updateDisplay`** logo após definir os valores iniciais dos minutos e segundos. Isso permitirá que o display seja atualizado de acordo com os valores iniciais do contador.
No arquivo **`timer.js`**, criaremos a função **`updateDisplay`**, que recebe os parâmetros **`minutes`** e **`seconds`**. Essa função atualiza os elementos **`el.minutes`** e **`el.seconds`** (obtidos do arquivo **`elements.js`**) com o tempo atualizado do contador. Os valores de minutos e segundos são padronizados para dois dígitos, preenchendo com zero à esquerda, usando o método **`padStart`**.
O resultado dessa aula é a criação do arquivo **`timer.js`**, contendo a função **`updateDisplay`**, e as modificações nos arquivos **`elements.js`** e **`index.js`**. Agora, o display do contador será atualizado corretamente com os valores dos minutos e segundos.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/29649ee8f32eacea2e596e4b8af36629c4cc4197)
####################################################################################################
18. Estruturando o countdown:
Na próxima aula do projeto FocusTimer, iremos estruturar o countdown, que é a contagem regressiva do timer. O objetivo é implementar a lógica para fazer a contagem regressiva a partir dos valores de minutos e segundos definidos pelo usuário.
Durante a aula, faremos modificações nos arquivos **`actions.js`** e **`timer.js`**.
No arquivo **`actions.js`**, importaremos o módulo **`timer`** e chamaremos a função **`countdown`** ao alternar a execução do timer. Isso permitirá iniciar o countdown quando o timer estiver em execução.
No arquivo **`timer.js`**, criaremos a função **`countdown`**, que será responsável pela contagem regressiva do timer. Primeiro, verificaremos se o timer está em execução. Caso contrário, a função será interrompida.
Em seguida, utilizaremos a função **`setTimeout`** para chamar recursivamente a função **`countdown`** após 1 segundo (1000 milissegundos). Dessa forma, a contagem regressiva será executada a cada segundo.
O resultado dessa aula é a estruturação do countdown no arquivo **`timer.js`**, através da função **`countdown`**, e a modificação no arquivo **`actions.js`** para chamar o countdown ao alternar a execução do timer.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/f896f70a65d65a91d9414bf1e277bfef667c0281)
####################################################################################################
19. Logica do countdown:
Nesta aula do projeto FocusTimer, implementamos a lógica do countdown, que consiste na contagem regressiva dos minutos e segundos do timer.
No arquivo **`actions.js`**, adicionamos a chamada da função **`updateDisplay`** no método **`reset`**, para atualizar o display quando o timer for resetado.
No arquivo **`timer.js`**, implementamos a função **`countdown`** que decrementa os valores de minutos e segundos a cada segundo. Se os segundos chegam a zero, decrementamos os minutos e ajustamos os segundos para 59. Se os minutos chegam a zero, chamamos a função **`reset`** para encerrar o countdown.
Essas modificações permitem que o projeto FocusTimer execute a contagem regressiva corretamente, atualizando o display do contador e finalizando a contagem quando o tempo definido for atingido.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/3817a1c2086c26a6d41140892956d852f5aabe43)
####################################################################################################
20. Alterando conteudo de uma tag com contenteditable:
Na aula, aprenderemos a utilizar o atributo **`contenteditable`** para permitir que o usuário edite o conteúdo de uma tag específica. O objetivo é proporcionar uma forma interativa para o usuário personalizar o tempo exibido no contador.
Durante a aula, faremos modificações no arquivo **`actions.js`**.
No arquivo **`actions.js`**, adicionaremos a função **`set`** para habilitar a edição do conteúdo dos minutos. Utilizaremos o método **`setAttribute`** para definir o atributo **`contenteditable`** como **`true`** na tag dos minutos, possibilitando que o usuário possa editar esse valor.
O resultado dessa aula é a adição da função **`set`** no arquivo **`actions.js`**, que habilita a edição do conteúdo dos minutos por meio do atributo **`contenteditable`**.
Essa modificação permite que o projeto FocusTimer ofereça a funcionalidade de edição interativa do tempo, proporcionando ao usuário a capacidade de personalizar os valores exibidos no contador de forma flexível.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/7a9ddecf2d9a64f3b37fd55db47e52ddb5025568)
####################################################################################################
21. Limpando o conteudo de uma tag com evento de focus:
Nesta aula, aprendemos a limpar o conteúdo de uma tag quando ela recebe o foco do usuário. Fizemos alterações nos arquivos **`actions.js`**, **`events.js`** e **`index.js`**.
No arquivo **`actions.js`**, adicionamos o método **`focus()`** à função **`set()`** para que o campo dos minutos receba automaticamente o foco quando ativado.
No arquivo **`events.js`**, criamos a função **`setMinutes()`** para adicionar um ouvinte de evento de foco à tag dos minutos. Quando o campo recebe o foco, o conteúdo existente é limpo, deixando-o em branco para que o usuário possa inserir um novo valor.
No arquivo **`index.js`**, chamamos a função **`setMinutes()`** na função **`start()`** para registrar o evento de foco e limpar o conteúdo dos minutos.
Essas modificações permitem uma melhor experiência do usuário, tornando mais fácil a inserção de novos valores nos minutos, pois o conteúdo existente é apagado automaticamente quando o campo é ativado.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/8adc419dd5accb3338d8c5c538ba401347e99f79)
####################################################################################################
22. Aceitando apenas numeros no contador:
Nesta aula do projeto FocusTimer, implementamos a funcionalidade que permite apenas a inserção de números no campo dos minutos do contador. Para isso, adicionamos um manipulador de evento **`onkeypress`** ao campo dos minutos no arquivo **`events.js`**.
Com essa modificação, garantimos que apenas números sejam aceitos como entrada no campo dos minutos, impedindo a inserção de caracteres não numéricos. Isso ajuda a manter a integridade dos dados e a coerência das informações inseridas no contador.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/1b78cc530055f565b923412dac1b46aa448469f4)
####################################################################################################
23. Finalizando a escolha dos minutos do temporizador:
Nesta aula, concluímos a funcionalidade de seleção dos minutos para o temporizador. Realizamos alterações no arquivo **`events.js`** para finalizar a escolha dos minutos.
No arquivo **`events.js`**, importamos o módulo **`state`** para acessar o estado da aplicação e o módulo **`updateDisplay`** para atualizar a exibição do contador. Também adicionamos um manipulador de evento **`blur`** ao campo dos minutos.
Quando o campo dos minutos perde o foco (evento **`blur`**), capturamos o valor inserido pelo usuário. Em seguida, verificamos se o valor é maior que 60, pois o temporizador só suporta até 60 minutos. Caso seja maior, definimos o valor como 60.
Atualizamos o estado da aplicação com os minutos escolhidos e os segundos definidos como zero. Em seguida, chamamos a função **`updateDisplay`** para refletir as alterações na exibição do contador.
Por fim, removemos o atributo **`contenteditable`** do campo dos minutos para impedir edições posteriores.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/de0789600e950f39339489f4bdddc4c547fb51c8)
####################################################################################################
24. Adicionando sons na aplicacao:
Nessa aula , implementamos a funcionalidade de reprodução de sons para melhorar a experiência do usuário. Adicionamos três arquivos de áudio à pasta "assets" e importamos o módulo "sounds.js" para controlar os sons na aplicação. Modificamos as funções existentes para reproduzir os sons em momentos específicos, como ao pressionar botões e quando o temporizador chega a zero.
Essas alterações tornam a aplicação mais interativa e envolvente para o usuário.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/1d1cffe54e913fef4f0c01c182ff3c83d94a1498)
####################################################################################################
25. Corrigindo o Acúmulo de Timeout:
[Commit: Corrigindo o Acúmulo de Timeout](https://github.com/rocketseat-education/focus-timer-v2/tree/cb650e44b9e4cd7070888f0eb05de276906589c7)
Nesta aula, vamos corrigir um bug em nossa aplicação. Quando clicamos rapidamente em play e pause, o contador começa a acelerar cada vez mais. Isso acontece porque a cada clique, um novo setTimeout é criado, acumulando timeouts anteriores e acelerando o contador. Para corrigir isso, vamos armazenar o ID de cada setTimeout em nosso estado e limpar o timeout anterior antes de criar um novo. Dessa forma, mesmo que cliquemos rapidamente, o contador continuará a contar de segundo a segundo, sem acelerar.
####################################################################################################
26. Despedida do Módulo:
[Commit: Despedida do Módulo](https://github.com/rocketseat-education/focus-timer-v2)
Neste módulo, você concluiu um projeto incrível que possui um Dark Light Mode, contador e som. Parabéns pelo seu sucesso! Embora possam existir alguns erros que serão descobertos posteriormente, o importante é que você já conseguiu realizar muitas coisas. Continue avançando, pois há muito mais pela frente. Nos vemos nas próximas aulas! Um grande abraço do Maikão!
####################################################################################################
01. Apresentacao do projeto:
Nesta aula, iremos desenvolver o "Focus Timer", um projeto de timer que utiliza ES6 modules, estados, variáveis, callback functions e um modo escuro / claro.
Aprenderemos como criar um timer funcional usando JavaScript moderno com a utilização de módulos ES6, que nos ajudam a organizar o código de maneira modular e reutilizável.
Exploraremos o conceito de estados para controlar o tempo decorrido e a contagem regressiva do timer. Utilizaremos variáveis para armazenar informações importantes e atualizar dinamicamente o nosso timer.
Além disso, abordaremos as callback functions, que nos permitirão executar ações específicas quando certos eventos ocorrerem, como o término do tempo ou a mudança do modo escuro para o claro.
Por fim, implementaremos uma funcionalidade de dark / light mode, onde o usuário poderá alternar entre os modos escuro e claro para melhorar a experiência visual do timer.
Acesse aqui o [**Figma do projeto**](https://www.figma.com/community/file/1263574581735209131/Focus-Timer-V2-%E2%80%A2-Projeto-Explorer).
[Acesse aqui os **assets do projeto**](https://github.com/rocketseat-education/focus-timer-v2/tree/main/assets).
####################################################################################################
03. Estruturando o HTML:
Vamos montar a estrutura inicial do projeto em HTML?
**[Aqui neste link](https://github.com/rocketseat-education/focus-timer-v2/tree/e6ccab9d7205ea8ca94b0f2d294a9797c5cad466)** você pode acessar o código da aula no GitHub.
####################################################################################################
04. Adicionando icones:
[Commit: Adicionando ícones](https://github.com/rocketseat-education/focus-timer-v2/tree/073914ae80b8f15008472141b13a4215009755d8)
Está na hora de adicionar ícones ao projeto e, para isso, vamos usar uma biblioteca externa, a https://phosphoricons.com/
Para utilizar a Biblioteca, copie a linha abaixo e cole entre as tags ` ` no seu HTML:
```jsx
```
Uma dica: ao longo do projeto, o Mayk usará os ícones tanto com tags do tipo como com tags do tipo . Aproveite para visitar a documentação da biblioteca e conhecer esses e outros usos.
[Visite o site da biblioteca Phosphor Icons](https://phosphoricons.com/)
Criaremos botões para ativar/desativar o modo claro/escuro, e utilizaremos os ícones fornecidos pelo Phosphor Icons para melhorar a usabilidade e a aparência visual dos botões.
Além disso, modificaremos a seção de controles do timer, substituindo os botões existentes pelos novos botões com ícones. Essa alteração deixará o layout mais intuitivo e amigável para o usuário.
Ao final desta aula, teremos um HTML bem estruturado e organizado, pronto para ser estilizado e ter a lógica do JavaScript implementada.
####################################################################################################
05. Iniciando os estilos e variaveis:
Nesta aula, realizamos alterações no HTML e CSS do projeto Focus Timer. Adicionamos a classe "flex" para estilizar o layout dos elementos do timer e dos controles, permitindo que sejam organizados em uma linha horizontal.
No CSS, criamos variáveis para definir cores principais, como a cor de fundo e do texto. Também estabelecemos estilos iniciais para o body e o #app, centralizando o conteúdo verticalmente na tela.
Com essas alterações, demos início à estilização do timer e à criação de variáveis CSS. Nos próximos passos, continuaremos a estilização e aprimoramento do timer, além de implementar a lógica em JavaScript para torná-lo totalmente funcional.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/8b45a20fc8ac2a8afdefe776384eb3a534597096)
####################################################################################################
06. Estilizando o relogio e botoes:
Nesta aula, realizamos a estilização do relógio e dos botões do projeto Focus Timer. Utilizamos as classes "running" e "music-on" para controlar a exibição dos ícones de acordo com o estado do timer. Além disso, aplicamos estilos para a cor secundária dos elementos.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/a8d4291d32aec5123600c82c4746b8ea866f5a3a)
####################################################################################################
07. CSS not para remover botoes da tela:
Nesta aula do projeto FocusTimer, aprendemos a usar o seletor **`:not`** no CSS para remover botões da tela. Através de modificações no arquivo **`style.css`**, os botões são estilizados com base em classes como **`.running`** e **`.music-on`**. Isso permite ocultar ou exibir os botões de acordo com o estado do temporizador, melhorando a interação com o aplicativo.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/21c0be26c3d63aa6fe69762ea82cdf6e0eda5b53)
####################################################################################################
08. Estilos para o light mode:
Nesta aula, adicionamos a classe **`light`** ao elemento **``** para alternar entre os modos claro e escuro.
No arquivo CSS, aplicamos estilos diferentes para o modo claro e escuro usando variáveis CSS. Utilizamos a propriedade **`not`** para ocultar os ícones de sol e lua dependendo da presença ou ausência da classe **`light`**.
Além disso, estilizamos o botão **`toggle-mode`** para uma melhor aparência e posicionamento na tela.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/823f96c7633fc0ac4b40cd7d30b192fa9eb24d21)
####################################################################################################
09. Adicionando acessibilidade aos botoes:
Nesta aula do projeto FocusTimer, focaremos em adicionar acessibilidade aos botões do aplicativo. O objetivo é tornar a experiência mais inclusiva para usuários com deficiência visual, proporcionando uma melhor compreensão dos botões por meio de recursos de leitura de tela.
Ao aplicar o diff do código fornecido, podemos observar as modificações feitas nos arquivos **`index.html`** e **`style.css`**.
No arquivo **`index.html`**, foi adicionada a classe **`sr-only`** às tags **``** dentro dos botões. Essa classe é utilizada para ocultar visualmente o texto dos botões, mas ainda assim torná-lo disponível para leitura de tela. Além disso, foram adicionadas descrições acessíveis para cada botão, como "Ativar / desativar light mode", "Iniciar contador", "Pausar contador", "Ajustar contador", "Reiniciar contador", "Iniciar música" e "Parar música".
No arquivo **`style.css`**, foi criada uma classe **`.sr-only`** para estilizar os elementos com a classe correspondente. Essa classe define propriedades como largura e altura de 1 pixel, posicionamento absoluto, efeitos de margem e preenchimento negativos, além de remover a aparência padrão do elemento. Essas propriedades garantem que o conteúdo seja ocultado visualmente, mas permaneça acessível para leitores de tela.
Essas modificações visam garantir que os botões sejam adequadamente identificados e entendidos pelos usuários com deficiência visual, melhorando a experiência de acessibilidade do aplicativo FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/a8d6addbcd7f8a61fd7e23ebfa6540b79c495227)
####################################################################################################
10. Adicionando a logica do ligh mode:
Nesta aula do projeto FocusTimer, aprenderemos a adicionar a lógica para alternar entre os modos de visualização light e dark no aplicativo. O objetivo é permitir que os usuários personalizem a aparência do timer de acordo com suas preferências.
Ao aplicar o diff do código fornecido, notamos que foram feitas modificações nos arquivos **`index.html`**, **`main.js`** e **`toggle-mode.js`**.
No arquivo **`index.html`**, removemos a classe **`light`** da tag **``**. Essa classe é responsável por definir o modo light por padrão. Também adicionamos o atributo **`type="module"`** ao script principal e definimos seu caminho para **`./src/main.js`**. Isso garante que o arquivo **`main.js`** seja importado corretamente.
Criamos um novo arquivo chamado **`toggle-mode.js`** no diretório **`src`**. Esse arquivo contém a lógica para alternar entre os modos de visualização. Ao clicar no botão de toggle, a classe **`light`** é alternada na tag **``**, ativando ou desativando o modo light. Além disso, o texto do botão é atualizado para refletir o modo ativado. A variável **`darkMode`** é usada para rastrear o estado atual do modo.
Essas modificações permitem que os usuários ativem ou desativem o modo light no aplicativo FocusTimer, fornecendo uma opção de personalização visual.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/7a7b846d59abfc1bee6c869236140c0933f05210)
####################################################################################################
11. Construindo o modulo FocusTimer:
Nesta aula do projeto FocusTimer, vamos nos concentrar na construção do módulo principal do aplicativo, chamado FocusTimer. O objetivo é criar a estrutura básica do timer e implementar a funcionalidade de iniciar o contador.
Durante a aula, serão abordados conceitos importantes de programação JavaScript, como a criação de módulos usando o recurso de exportação e importação do ES6. Os alunos aprenderão a criar um novo arquivo chamado **`index.js`** dentro do diretório **`FocusTimer`**, que conterá a função **`start`** responsável por iniciar o timer.
O resultado dessa aula é a criação do arquivo **`index.js`** no diretório **`FocusTimer`**, contendo a função **`start`** que recebe os parâmetros **`minutes`** e **`seconds`** e imprime seus valores no console. Além disso, no arquivo **`main.js`**, importamos o módulo **`FocusTimer`** e chamamos a função **`start`** com valores iniciais de 0 para os minutos e 6 para os segundos.
Essas modificações permitem que o módulo FocusTimer seja construído e a função de iniciar o contador seja implementada. Com isso, estamos um passo mais perto de termos um timer funcional no projeto FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/c6ce79cbed4da6d17ec7ee46adf2983cc6bc82c2)
####################################################################################################
12. Criando o estado da aplicacao:
Nesta aula do projeto FocusTimer, vamos nos concentrar em criar o estado da aplicação, que irá armazenar e controlar as informações relevantes para o funcionamento do timer.
Durante a aula, será criado um novo arquivo chamado **`state.js`** no diretório **`FocusTimer`**, que irá exportar um objeto contendo as propriedades do estado da aplicação. Esse objeto incluirá informações como os minutos, segundos, status de execução e o status de mudo do timer.
No arquivo **`index.js`**, importaremos o módulo **`state`** e utilizaremos as propriedades **`minutes`** e **`seconds`** para atualizar o estado do timer quando a função **`start`** for chamada. Através do objeto **`state`**, teremos acesso às informações atualizadas do timer, permitindo que possamos manipulá-las e realizar operações de controle.
O resultado dessa aula é a criação do arquivo **`state.js`** no diretório **`FocusTimer`**, contendo um objeto que representa o estado da aplicação. Além disso, no arquivo **`index.js`**, utilizamos o estado para atualizar as propriedades **`minutes`** e **`seconds`** ao chamar a função **`start`**, e em seguida, imprimimos o estado atualizado no console.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/df5f20ef0a477a3769335e3e495ef711709049d0)
####################################################################################################
13. Registrando eventos dos botoes:
Nesta aula do projeto FocusTimer, aprenderemos como registrar eventos nos botões do timer. O objetivo é permitir que os botões tenham comportamentos interativos, respondendo a cliques do usuário.
Durante a aula, serão criados dois novos arquivos: **`elements.js`** e **`events.js`**. No arquivo **`elements.js`**, exportaremos o elemento **`controls`**, que representa o container dos botões do timer. Em seguida, no arquivo **`events.js`**, importaremos o elemento **`controls`** e criaremos a função **`registerControls`** para registrar os eventos dos botões.
Dentro da função **`registerControls`**, utilizaremos o método **`addEventListener`** para adicionar um ouvinte de evento de clique nos botões. Quando um botão for clicado, será exibido no console o elemento HTML correspondente ao botão clicado.
No arquivo **`index.js`**, além de importarmos o módulo **`events`**, chamaremos a função **`registerControls`** dentro da função **`start`**. Isso garantirá que os eventos dos botões sejam registrados quando o timer for iniciado.
O resultado dessa aula é a criação dos arquivos **`elements.js`** e **`events.js`**, e a implementação da função **`registerControls`**. Ao iniciar o timer através da função **`start`**, os eventos dos botões serão registrados e exibirão no console o elemento HTML correspondente ao botão clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/e03caac55ad7626932208d91ad4aa6cc4198586c)
####################################################################################################
14. Dataset para controle das acoes:
Nesta aula do projeto FocusTimer, aprenderemos a utilizar o atributo **`data`** dos elementos HTML para controlar as ações dos botões. O objetivo é associar um valor personalizado a cada botão para identificar a ação correspondente quando um botão for clicado.
Durante a aula, faremos modificações no arquivo **`index.html`**. Adicionaremos o atributo **`data-action`** a cada botão, atribuindo um valor específico para indicar a ação correspondente. Por exemplo, definiremos **`data-action="toggleRunning"`** para o botão de iniciar e pausar o contador, **`data-action="set"`** para o botão de ajustar o contador e assim por diante.
No arquivo **`events.js`**, faremos modificações para capturar o valor do atributo **`data-action`** quando um botão for clicado. Utilizaremos a propriedade **`dataset`** do elemento alvo do evento para obter o valor do atributo **`data-action`**. Em seguida, realizaremos um **`console.log`** para exibir a ação correspondente no console.
O resultado dessa aula é a adição do atributo **`data-action`** a cada botão no arquivo **`index.html`** e a modificação da função **`registerControls`** no arquivo **`events.js`** para capturar e exibir a ação correspondente quando um botão for clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/e03caac55ad7626932208d91ad4aa6cc4198586c)
####################################################################################################
15. Conectando as primeiras acoes:
Nesta aula do projeto FocusTimer, aprenderemos a conectar as primeiras ações aos eventos dos botões. O objetivo é fazer com que as ações correspondentes sejam executadas quando um botão for clicado.
Durante a aula, criaremos um novo arquivo chamado **`actions.js`** no diretório **`FocusTimer`**. Nesse arquivo, implementaremos a função **`toggleRunning`** que será responsável por alternar a execução do timer. No exemplo fornecido, a função simplesmente exibirá uma mensagem no console para indicar que a ação foi acionada.
No arquivo **`events.js`**, faremos modificações para importar o módulo **`actions`** que contém as funções de ação. Em seguida, atualizaremos a função **`registerControls`** para executar a ação correspondente quando um botão for clicado. Utilizaremos a ação como uma chave para obter a função correspondente do objeto **`actions`** e chamá-la.
O resultado dessa aula é a criação do arquivo **`actions.js`** com a função **`toggleRunning`**, e a modificação da função **`registerControls`** no arquivo **`events.js`** para executar a ação correspondente quando um botão for clicado.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/2a4d5caa92f32f08375bcc072665654bf7c427da)
####################################################################################################
16. Alterando o estado da apliacao conforme a acao:
Nesta aula do projeto FocusTimer, aprenderemos a alterar o estado da aplicação conforme a ação realizada pelo usuário nos botões. O objetivo é modificar o estado do timer e controlar a aparência do aplicativo com base nas ações executadas.
O resultado dessa aula é a modificação do arquivo **`actions.js`**, adicionando as implementações das funções **`toggleRunning`**, **`reset`**, **`set`** e **`toggleMusic`**, que alteram o estado do timer e controlam as classes CSS correspondentes.
Essas modificações permitem que o estado da aplicação seja atualizado conforme as ações realizadas pelos usuários nos botões, proporcionando uma experiência interativa e visualmente coerente no projeto FocusTimer.
[Aqui neste link você vê o código final da aula.](https://github.com/rocketseat-education/focus-timer-v2/tree/eeeeb0c72109c7d1dcd1482e25fe143a97d5c2f7)
####################################################################################################
17. Atualizando o display do contador:
Nesta aula do projeto FocusTimer, aprenderemos a atualizar o display do contador para exibir o tempo restante de forma adequada. O objetivo é garantir que os minutos e segundos sejam exibidos corretamente no formato de dois dígitos, preenchendo com zero à esquerda, quando necessário.
Durante a aula, faremos modificações nos arquivos **`elements.js`**, **`index.js`** e criaremos um novo arquivo chamado **`timer.js`**.
No arquivo **`elements.js`**, adicionaremos as constantes **`minutes`** e **`seconds`**, que correspondem aos elementos HTML onde o tempo restante será exibido.
No arquivo **`index.js`**, importaremos o módulo **`timer`** e chamaremos a função **`updateDisplay`** logo após definir os valores iniciais dos minutos e segundos. Isso permitirá que o display seja atualizado de acordo com os valores iniciais do contador.
No arquivo **`timer.js`**, criaremos a função **`updateDisplay`**, que recebe os parâmetros **`minutes`** e **`seconds`**. Essa função atualiza os elementos **`el.minutes`** e **`el.seconds`** (obtidos do arquivo **`elements.js`**) com o tempo atualizado do contador. Os valores de minutos e segundos são padronizados para dois dígitos, preenchendo com zero à esquerda, usando o método **`padStart`**.
O resultado dessa aula é a criação do arquivo **`timer.js`**, contendo a função **`updateDisplay`**, e as modificações nos arquivos **`elements.js`** e **`index.js`**. Agora, o display do contador será atualizado corretamente com os valores dos minutos e segundos.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/29649ee8f32eacea2e596e4b8af36629c4cc4197)
####################################################################################################
18. Estruturando o countdown:
Na próxima aula do projeto FocusTimer, iremos estruturar o countdown, que é a contagem regressiva do timer. O objetivo é implementar a lógica para fazer a contagem regressiva a partir dos valores de minutos e segundos definidos pelo usuário.
Durante a aula, faremos modificações nos arquivos **`actions.js`** e **`timer.js`**.
No arquivo **`actions.js`**, importaremos o módulo **`timer`** e chamaremos a função **`countdown`** ao alternar a execução do timer. Isso permitirá iniciar o countdown quando o timer estiver em execução.
No arquivo **`timer.js`**, criaremos a função **`countdown`**, que será responsável pela contagem regressiva do timer. Primeiro, verificaremos se o timer está em execução. Caso contrário, a função será interrompida.
Em seguida, utilizaremos a função **`setTimeout`** para chamar recursivamente a função **`countdown`** após 1 segundo (1000 milissegundos). Dessa forma, a contagem regressiva será executada a cada segundo.
O resultado dessa aula é a estruturação do countdown no arquivo **`timer.js`**, através da função **`countdown`**, e a modificação no arquivo **`actions.js`** para chamar o countdown ao alternar a execução do timer.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/f896f70a65d65a91d9414bf1e277bfef667c0281)
####################################################################################################
19. Logica do countdown:
Nesta aula do projeto FocusTimer, implementamos a lógica do countdown, que consiste na contagem regressiva dos minutos e segundos do timer.
No arquivo **`actions.js`**, adicionamos a chamada da função **`updateDisplay`** no método **`reset`**, para atualizar o display quando o timer for resetado.
No arquivo **`timer.js`**, implementamos a função **`countdown`** que decrementa os valores de minutos e segundos a cada segundo. Se os segundos chegam a zero, decrementamos os minutos e ajustamos os segundos para 59. Se os minutos chegam a zero, chamamos a função **`reset`** para encerrar o countdown.
Essas modificações permitem que o projeto FocusTimer execute a contagem regressiva corretamente, atualizando o display do contador e finalizando a contagem quando o tempo definido for atingido.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/3817a1c2086c26a6d41140892956d852f5aabe43)
####################################################################################################
20. Alterando conteudo de uma tag com contenteditable:
Na aula, aprenderemos a utilizar o atributo **`contenteditable`** para permitir que o usuário edite o conteúdo de uma tag específica. O objetivo é proporcionar uma forma interativa para o usuário personalizar o tempo exibido no contador.
Durante a aula, faremos modificações no arquivo **`actions.js`**.
No arquivo **`actions.js`**, adicionaremos a função **`set`** para habilitar a edição do conteúdo dos minutos. Utilizaremos o método **`setAttribute`** para definir o atributo **`contenteditable`** como **`true`** na tag dos minutos, possibilitando que o usuário possa editar esse valor.
O resultado dessa aula é a adição da função **`set`** no arquivo **`actions.js`**, que habilita a edição do conteúdo dos minutos por meio do atributo **`contenteditable`**.
Essa modificação permite que o projeto FocusTimer ofereça a funcionalidade de edição interativa do tempo, proporcionando ao usuário a capacidade de personalizar os valores exibidos no contador de forma flexível.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/7a9ddecf2d9a64f3b37fd55db47e52ddb5025568)
####################################################################################################
21. Limpando o conteudo de uma tag com evento de focus:
Nesta aula, aprendemos a limpar o conteúdo de uma tag quando ela recebe o foco do usuário. Fizemos alterações nos arquivos **`actions.js`**, **`events.js`** e **`index.js`**.
No arquivo **`actions.js`**, adicionamos o método **`focus()`** à função **`set()`** para que o campo dos minutos receba automaticamente o foco quando ativado.
No arquivo **`events.js`**, criamos a função **`setMinutes()`** para adicionar um ouvinte de evento de foco à tag dos minutos. Quando o campo recebe o foco, o conteúdo existente é limpo, deixando-o em branco para que o usuário possa inserir um novo valor.
No arquivo **`index.js`**, chamamos a função **`setMinutes()`** na função **`start()`** para registrar o evento de foco e limpar o conteúdo dos minutos.
Essas modificações permitem uma melhor experiência do usuário, tornando mais fácil a inserção de novos valores nos minutos, pois o conteúdo existente é apagado automaticamente quando o campo é ativado.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/8adc419dd5accb3338d8c5c538ba401347e99f79)
####################################################################################################
22. Aceitando apenas numeros no contador:
Nesta aula do projeto FocusTimer, implementamos a funcionalidade que permite apenas a inserção de números no campo dos minutos do contador. Para isso, adicionamos um manipulador de evento **`onkeypress`** ao campo dos minutos no arquivo **`events.js`**.
Com essa modificação, garantimos que apenas números sejam aceitos como entrada no campo dos minutos, impedindo a inserção de caracteres não numéricos. Isso ajuda a manter a integridade dos dados e a coerência das informações inseridas no contador.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/1b78cc530055f565b923412dac1b46aa448469f4)
####################################################################################################
23. Finalizando a escolha dos minutos do temporizador:
Nesta aula, concluímos a funcionalidade de seleção dos minutos para o temporizador. Realizamos alterações no arquivo **`events.js`** para finalizar a escolha dos minutos.
No arquivo **`events.js`**, importamos o módulo **`state`** para acessar o estado da aplicação e o módulo **`updateDisplay`** para atualizar a exibição do contador. Também adicionamos um manipulador de evento **`blur`** ao campo dos minutos.
Quando o campo dos minutos perde o foco (evento **`blur`**), capturamos o valor inserido pelo usuário. Em seguida, verificamos se o valor é maior que 60, pois o temporizador só suporta até 60 minutos. Caso seja maior, definimos o valor como 60.
Atualizamos o estado da aplicação com os minutos escolhidos e os segundos definidos como zero. Em seguida, chamamos a função **`updateDisplay`** para refletir as alterações na exibição do contador.
Por fim, removemos o atributo **`contenteditable`** do campo dos minutos para impedir edições posteriores.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/de0789600e950f39339489f4bdddc4c547fb51c8)
####################################################################################################
24. Adicionando sons na aplicacao:
Nessa aula , implementamos a funcionalidade de reprodução de sons para melhorar a experiência do usuário. Adicionamos três arquivos de áudio à pasta "assets" e importamos o módulo "sounds.js" para controlar os sons na aplicação. Modificamos as funções existentes para reproduzir os sons em momentos específicos, como ao pressionar botões e quando o temporizador chega a zero.
Essas alterações tornam a aplicação mais interativa e envolvente para o usuário.
[**Aqui neste link você vê o código final da aula.**](https://github.com/rocketseat-education/focus-timer-v2/tree/1d1cffe54e913fef4f0c01c182ff3c83d94a1498)
####################################################################################################
25. Corrigindo o Acúmulo de Timeout:
[Commit: Corrigindo o Acúmulo de Timeout](https://github.com/rocketseat-education/focus-timer-v2/tree/cb650e44b9e4cd7070888f0eb05de276906589c7)
Nesta aula, vamos corrigir um bug em nossa aplicação. Quando clicamos rapidamente em play e pause, o contador começa a acelerar cada vez mais. Isso acontece porque a cada clique, um novo setTimeout é criado, acumulando timeouts anteriores e acelerando o contador. Para corrigir isso, vamos armazenar o ID de cada setTimeout em nosso estado e limpar o timeout anterior antes de criar um novo. Dessa forma, mesmo que cliquemos rapidamente, o contador continuará a contar de segundo a segundo, sem acelerar.
####################################################################################################
26. Despedida do Módulo:
[Commit: Despedida do Módulo](https://github.com/rocketseat-education/focus-timer-v2)
Neste módulo, você concluiu um projeto incrível que possui um Dark Light Mode, contador e som. Parabéns pelo seu sucesso! Embora possam existir alguns erros que serão descobertos posteriormente, o importante é que você já conseguiu realizar muitas coisas. Continue avançando, pois há muito mais pela frente. Nos vemos nas próximas aulas! Um grande abraço do Maikão!