Trilha Explorer
Focus-Timer.webm
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.
- 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
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML
- CSS
- Git e Github
Contato: gisellemacedo.dev@gmail.com
