Olá, Diego. Como vai?
Excelente resolução da lista de exercícios! A sua seleção de elementos utilizando o document.querySelector está perfeita. Você mapeou com precisão todas as classes do projeto Fokus (.app__card-timer, .app__image, .app__title, entre outras) e organizou as variáveis de tempo de forma muito limpa usando segundos (1500 segundos para 25 minutos de foco, por exemplo), que é o padrão ideal para trabalhar com o setInterval no JavaScript.
O uso dos comentários para separar as etapas do exercício e os console.log para testar se os elementos foram capturados corretamente são ótimas práticas de desenvolvimento!
Dica de Ouro: Organização com Data Attributes
O seu código está totalmente correto e funcional para essa etapa do projeto. Como uma sugestão de boa prática para o seu progresso no curso, vale a pena conhecer o uso dos Data Attributes (atributos personalizados do HTML5).
No projeto Fokus, você usará os botões de foco, descanso curto e descanso longo para alterar o contexto da aplicação (mudar a imagem de fundo, as cores e os textos). Em vez de depender puramente das classes de estilização CSS (como .app__card-button--foco), você pode capturar esses elementos ou identificar seus estados usando atributos data-contexto.
Veja um exemplo de como o HTML do projeto costuma ser estruturado:
<button data-contexto="foco" class="app__card-button app__card-button--foco">Foco</button>
<button data-contexto="curto" class="app__card-button app__card-button--curto">Descanso curto</button>
E no seu JavaScript, você pode capturar todos eles de uma vez só ou criar uma lógica baseada nesse atributo usando o getAttribute:
// Exemplo de como ler o atributo de contexto ao clicar em um botão
focoButton.addEventListener('click', () => {
html.setAttribute('data-contexto', 'foco');
// Isso facilita mudar as imagens e cores dinamicamente no CSS!
});
Essa abordagem desacopla o seu código JavaScript das classes de estilização do CSS. Se no futuro o time de design decidir mudar o nome da classe de .app__card-button--foco para .btn-foco, o seu código JavaScript não quebra, pois ele continua focado no atributo data-contexto.
Parabéns pelo excelente começo de projeto e pelo domínio na manipulação do DOM!
Espero que possa ter lhe ajudado!
