Focus Timer - Versão 3

Projeto Desenvolvido como Desafio do Stage 05 / Módulo 03 do curso Explorer da Rocketseat.

Trilha Explorer

Focus-Timer.webm

💻 Projeto

Projeto de um Timer Funcional, estilo Pomodoro, utilizando módulos ES6, que ajuda a organizar o código de maneira modular e reutilizável.
Neste aplicativo o usuário poderá adicionar ou remover 5 minutos do timer, até o limite máximo de 60 minutos e mínimo de 5 minutos. Se o usuário insistir em passar do limite, os botões de + e - serão bloqueados e uma mensagem aparecerá na tela avisando.
Foram implementados 4 botões com opções de músicas de temas diversos e também, a funcionalidade de dark / light mode, onde o usuário poderá alternar entre os modos escuro ou claro de acordo com a sua preferência.

🚀 Recursos Utilizados

• Variáveis CSS
• Estilização usando display flex e grid
• Phosphor Icons - biblioteca externa para adicionar ícones
• Utilização do seletor :not no CSS para remover botões da tela
• Utilização da função clamp() do CSS, para ajustar automaticamente o tamanho da fonte de acordo com a largura da tela
• Funcionalidade de Dark / Light mode
• Adicionado acessibilidade aos botões
• Utilização de ES6 modules
• Variáveis para armazenar informações importantes e atualizar dinamicamente o timer.
• Estados para controlar o tempo decorrido e a contagem regressiva do timer
• Callback Functions
• Dataset para controle das ações
• Versão mobile
  

🚀 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

• HTML
• CSS
• Git e Github

Contato: gisellemacedo.dev@gmail.com

Feito com 💜 by Giselle