/Projeto-Fokus

Projeto feito no curso front-end da Alura

Primary LanguageCSS

Projeto-Fokus

HTML, CSS JavaScript

Introdução

Este projeto, denominado Fokus, é projetado para ajudar os usuários a gerenciar seu tempo de forma eficaz, utilizando um cronômetro para sessões de trabalho focado e pausas. Foi desenvolvido como parte de um curso de JavaScript para demonstrar como manipular elementos do DOM.

Interface do Projeto Fokus

Principais Funcionalidades

  • Funcionalidade de cronômetro para sessões de trabalho focado, pausas curtas e pausas longas.
  • Botão de Iniciar/Pausar para controlar o cronômetro.
  • Alternância de música para tocar ou pausar a música de fundo durante as sessões.
  • Atualizações dinâmicas do display do cronômetro.
  • Mudanças contextuais nos elementos da interface do usuário com base no modo do cronômetro (foco, pausa curta, pausa longa).

Elementos do DOM Utilizados

O projeto Fokus utiliza diversos elementos do DOM e métodos para criar uma interface de usuário dinâmica e interativa. Abaixo está uma lista dos principais elementos e seus métodos:

Métodos JavaScript Utilizados:

  • querySelector(): Utilizado para selecionar elementos do DOM.
  • addEventListener(): Utilizado para adicionar manipuladores de eventos aos elementos.
  • setInterval(): Utilizado para executar a contagem regressiva do cronômetro.
  • clearInterval(): Utilizado para parar o cronômetro.
  • setAttribute(): Utilizado para alterar atributos dos elementos do DOM.
  • innerHTML e textContent: Utilizados para atualizar o conteúdo dos elementos.