https://github.com/kauanrodrigues01/fokus-dom

Projeto realizado durante curso de Javascript: manipulando elementos do DOM
https://github.com/kauanrodrigues01/fokus-dom

Last synced: 3 months ago
JSON representation

Projeto realizado durante curso de Javascript: manipulando elementos do DOM

• Host: GitHub
• URL: https://github.com/kauanrodrigues01/fokus-dom
• Owner: Kauanrodrigues01
• License: mit
• Created: 2024-07-04T03:40:58.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-07-06T02:57:26.000Z (12 months ago)
• Last Synced: 2025-01-26T17:42:27.051Z (5 months ago)
• Language: CSS
• Homepage: https://kauanrodrigues01.github.io/Fokus-DOM/
• Size: 8.79 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fokus

Foi um projeto desenvolvido durante o curso de Javascript: manipulando elementos do DOM. Durante o curso foram abordados principal conceitos de manipulação de DOM e interação com o usuário.

## Uma pouco sobre o Projeto

![](print.png)

## Tecnologias Utilizadas

[![My Skills](https://skillicons.dev/icons?i=html,css,js,git,github,vscode&perline=13)](#)

## Funcionalidades Principais

- **Temporizador Ajustável:** Permite configurar diferentes modos de tempo para períodos de foco (25 minutos), pausas curtas (5 minutos) e pausas longas (15 minutos).

- **Controle de Áudio:** Opção de alternar uma música de fundo para períodos de foco.

- **Interface Amigável:** Visualização clara do tempo restante, com feedback sonoro ao final de cada ciclo.

## Conteúdos Abordados durante o curso

Este projeto foi desenvolvido como parte de um curso abrangente que explorou diversos conceitos essenciais para o desenvolvimento web front-end. Durante o curso, os seguintes tópicos foram cobertos:

- **JavaScript Básico e intermediária:** Aprendizado da linguagem JavaScript para lógica de programação, manipulação do DOM, eventos e temporizadores.

- **HTML e CSS:** Construção da estrutura e estilização da interface do usuário utilizando HTML semântico e técnicas avançadas de CSS, como Flexbox e Grid Layout.

- **Interação com o Usuário:** Implementação de elementos interativos, como botões de controle e feedback visual dinâmico.

- **Audio API:** Integração de áudio para feedback sonoro durante o temporizador.

- **Áudio no Navegador:** Utilização da API de áudio do navegador para reprodução de sons durante eventos específicos do temporizador.

- **Contagem Regressiva e Temporizadores:** Desenvolvimento de lógica para contagem regressiva e atualização dinâmica do tempo restante.

- **Gerenciamento de Estado:** Implementação de funções para iniciar, pausar e reiniciar o temporizador, mantendo consistência no estado da aplicação.

- **Organização e Estruturação de Código:** Práticas recomendadas para estruturação modular do código JavaScript, facilitando a manutenção e expansão do projeto.