Este projeto é inspirado na técnica Pomodoro, que visa a concentração em tarefas importantes. Dessa forma, concentramo-nos em uma atividade por 25 minutos, por exemplo, e após esse período, é possível pausar por 5 minutos ou optar por uma pausa mais longa de 15 minutos.

Link para o Figma

Neste projeto, vamos aprender a manipular elementos no DOM usando JavaScript. A manipulação envolve a ação de modificar elementos na tela. Vamos abordar os seguintes métodos:

• innerHTML para alterar os textos da tela;
• setAttribute para alterar o caminho das imagens;
• classList para alterar as classes e o estilo dos botões;
• querySelector para pegar os elementos;
• EventList para escutar a interação com a nossa página.

Antes de começar, é importante ter conhecimento em:

• HTML
• CSS
• Funções JavaScript
• Métodos do JavaScript

1. Iniciar a Manipulação no DOM: DOM (Document Object Model) e como ele representa a árvore de nós e objetos.

2. Trabalhar com Elementos no DOM: Manipular elementos no DOM usando JavaScript, concentrando-nos principalmente na manipulação de botões.

3. Usar Seletores: Uso de vários seletores e métodos, como querySelector, querySelectorAll, getElementsByClassName e getElementById, para selecionar elementos no DOM.

4. Diferenciar o DOM vs Document: Diferenças entre o Document e o DOM; o Document é um objeto global que representa o HTML, enquanto o DOM é uma representação conjunta de vários elementos.

5. Criar Variáveis para Elementos HTML: Criar uma variável para representar um elemento HTML em JavaScript.

6. Alterar Textos HTML com innerHTML: Alterar a estrutura de conteúdo HTML com textos, tags e classes. Além disso, utilizaremos o método switch para alternar contextos e alterar a exibição de textos de acordo com o contexto.

7. Ativar e Desativar Áudio com Input Checkbox: Ativar e desativar um arquivo de áudio na nossa página com a ajuda do input Checkbox. Criaremos um objeto de áudio, e utilizaremos propriedades e métodos de áudio para controlar a reprodução do áudio. Também configuraremos o áudio para loop contínuo.

8. Utilizar o setInterval e clearInterval: o papel do método setInterval na execução contínua de trechos de código. Aprenderemos também a utilizar o método clearInterval para interromper a execução do código.

9. Concatenar Strings e Variáveis: Utilizaremos o operador + para juntar strings e variáveis.

10. **Implementar o Objeto Date:**Implementar o objeto Date do JavaScript no projeto Fokus para formatar minutos e segundos. Configuraremos diferentes temporizadores para foco, descanso curto e descanso longo. Por fim, inseriremos o temporizador na tela com a função mostrarTempo().