Focus-timer-Modes

Sobre o projeto

Projeto criado como exercício de aprendizado da DOM (Document Object Module) proposto pela @rocketseat-education, tendo como finalidades:

• Utilização, reutilização e entendimento do funcionamento da DOM;
• ES6 Modules - Importação e Exportação de arquivos e dados JS;
• Factory function e seu potencial;
• Injeção de dependências;
• Bubbling event;
• local storage;
• Clean code e refatoração;

* Mesmo visualizando e entendo o processo de Clean code, resolvi manter os comentários dos arquivos a título de processo de aprendizaegm.

Primeiro passo 🚀

Tendo como base, de ideia e de estrutura de dados, os arquivos do projeto Focus Timer 2.0, agora com controle de volume e mudança de tema.

• Entender e elaborar adequadamente o que foi majestrosamente planejado, baseado nos ensinamentos da trilha Explorer da @rocketseat-education.

Passo seguinte - 🔥 Caminhando sozinho 🔥

Visando ME DESAFIAR:

1. Como desafiado, ao clicar no botão de áudio, o volume fica em 50%:

   Utilizando o método event.stopPropagation():

   • Aoo clicar toca ou para o som, e;
   • O volume, se já não estiver, volta a ser 50%;

2. Como aprendizado, fiz o desafio Theme switcher:

   • Utilizei e pratiquei o uso do local Storage do HTML5 que permite armazenar/ registrar algumas escolhas feitas pelo usuário, neste cadso o tema preferido;

3. Mais um áudio, mudando o designer e sendo mais um desafio no CSS:

   • Ao clicar toca o som;
   • Muda a aparência para mostrar que esta escolhida;

4. Deixei a aplicação RESPONSIVA;

   • Procurando respeitar e manter o design do projeto original;

5. Adicionei um FAVICON, como instruído

Atualizei o FIGMA para melhor visualização da ideia;

Imagem e projeto aqui

Projeto finalizado.

Projeto funcionando

Fique focado, com seu tema predileto!