Skip to content

Commit 1d59c9b

Browse files
geanfariasgeanfarias
authored
Merge pull request #23 from imdouglasoliveira/main
Melhorias em funções e comportamentos do time, na descrição adicionei toda as adequações. O time roda em https://timer.a8z.com.br/
2 parents 36dd65c + fea00f8 commit 1d59c9b

9 files changed

Lines changed: 1189 additions & 211 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules/
22
dist/
33
.parcel-cache/
4-
.DS_STORE
4+
.DS_STORE
5+
*backup

‎README.md‎

Lines changed: 103 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,105 @@
1-
# Timer criado durante gravação de vídeo no Youtube
1+
# Timer - Cronômetro Simples
22

3-
Este é um aplicativo simples de timer que foi usado durante a [gravação deste vídeo](https://www.youtube.com/watch?v=ir8MIBhGbcA).
3+
Este é um projeto de timer (cronômetro) desenvolvido com HTML, CSS e JavaScript. Originalmente criado para os vídeos da Codecon, este timer foi aprimorado com diversas melhorias que otimizam a usabilidade e a experiência do usuário.
44

5-
O layout está [aqui no Figma](https://www.figma.com/design/97maginjN0aHjiQPy3dCDS/%231---Timer?m=auto&t=B8ND36dunZtQcZQe-1).
5+
O timer pode ser acessado em:
6+
7+
[Github Pages](https://codecon-dev.github.io/code-kata-timer/) ou [Domínio da a8z](https://timer.a8z.com.br/ ).
8+
9+
## Funcionalidades
10+
11+
- **Exibição de Tempo Personalizada:**
12+
Exibe o tempo em horas, minutos e segundos com formatação padronizada, garantindo clareza na visualização.
13+
14+
- **Contagem Regressiva com Alerta Visual:**
15+
Quando o tempo estiver próximo de zerar, o layout muda para um alerta visual com efeito blink, chamando a atenção do usuário.
16+
17+
- **Controles de Operação Intuitivos:**
18+
Permite iniciar, pausar, resetar e editar o tempo do cronômetro por meio de botões com feedback visual e animações.
19+
20+
- **Bloqueio de Ações Durante Execução:**
21+
Se o timer estiver rodando, os botões de reprodução e edição ficam desabilitados, evitando cliques acidentais e alterações indesejadas.
22+
23+
- **Modo de Edição Seguro:**
24+
Permite alterar os valores de horas, minutos e segundos somente quando o timer está pausado, assegurando a consistência da contagem.
25+
26+
- **Tooltips Informativas Customizadas:**
27+
Todos os botões exibem breves descrições ao posicionar o cursor, facilitando o entendimento das funcionalidades.
28+
29+
- **Adição de Tempo Simplificada:**
30+
Inclui botões para adicionar 30 segundos ao cronômetro. Há controles específicos para estados pausado, parado e em execução.
31+
32+
- **Alternância de Tema (Dark/Light):**
33+
Permite alternar entre temas escuro e claro, alterando dinamicamente a paleta de cores e o ícone do tema.
34+
35+
- **Suporte a Tela Cheia (Fullscreen):**
36+
Oferece a opção de alternar para o modo tela cheia, proporcionando uma experiência imersiva.
37+
38+
- **Feedback Visual e Animações:**
39+
Animações e efeitos de feedback, como o “pulse” nos botões e o efeito blink durante a contagem regressiva, enriquecem a interatividade.
40+
41+
- **Validação e Formatação de Entradas:**
42+
Os campos de entrada para horas, minutos e segundos são validados e formatados automaticamente para garantir valores corretos.
43+
44+
- **Overlay para Encerramento do Modo de Edição:**
45+
Ao entrar no modo de edição, um overlay permite encerrar a edição ao clicar fora dos campos, aumentando a usabilidade.
46+
47+
- **Favicon Personalizado:**
48+
O projeto inclui um favicon (`clock-regular.svg`) para reforçar a identidade visual.
49+
50+
## Tecnologias Utilizadas
51+
52+
- **HTML5:** Estrutura e marcação da interface.
53+
- **CSS3:** Estilização com transições, efeitos de hover, animações e variáveis CSS.
54+
- **JavaScript:** Lógica do cronômetro, manipulação do DOM e gerenciamento dos diversos estados (rodando, pausado, editando, countdown, etc).
55+
56+
## Como Utilizar
57+
58+
1. **Clone o Repositório:**
59+
```bash
60+
git clone https://github.com/codecon-dev/code-kata-timer.git
61+
```
62+
63+
**ou**
64+
65+
```bash
66+
git clone https://github.com/imdouglasoliveira/code-kata-timer.git
67+
```
68+
2. **Acesse a Pasta do Projeto:**
69+
```bash
70+
cd code-kata-timer
71+
```
72+
3. **Execute o Projeto:**
73+
Abra o arquivo `index.html` em seu navegador preferido.
74+
75+
## Customizações
76+
77+
- **Estilização:**
78+
O design segue um padrão definido no [Figma](https://www.figma.com/design/97maginjN0aHjiQPy3dCDS/%231---Timer?m=auto&t=B8ND36dunZtQcZQe-1).
79+
Você pode ajustar as cores e demais estilos editando o arquivo `style.css`, onde as variáveis CSS (como `--primary-bg-color` e `--primary-text-color`) são definidas.
80+
81+
- **Tooltips:**
82+
As tooltips foram implementadas utilizando atributos `data-tooltip` e manipulação via JavaScript, possibilitando customizações avançadas para cores e formatos.
83+
84+
- **Lógica do Timer e Gerenciamento de Estados:**
85+
Toda a lógica do cronômetro e o gerenciamento dos estados (STOPPED, PAUSED, RUNNING, COUNTDOWN e EDITING) estão implementados em `script.js`, proporcionando uma experiência fluida e intuitiva.
86+
87+
## Contribuições
88+
89+
Contribuições são bem-vindas! Se você tiver sugestões, melhorias ou correções, sinta-se à vontade para abrir uma issue ou enviar um pull request. Sua colaboração ajudará a tornar este projeto ainda melhor.
90+
91+
## Licença
92+
93+
Distribuído sob a licença MIT. Consulte o arquivo `LICENSE` para mais detalhes.
94+
95+
## Referências
96+
97+
- **Vídeo de Demonstração no YouTube:**
98+
[Assistir Vídeo](https://www.youtube.com/watch?v=ir8MIBhGbcA)
99+
100+
- **Design no Figma:**
101+
[Acessar Layout no Figma](https://www.figma.com/design/97maginjN0aHjiQPy3dCDS/%231---Timer?m=auto&t=B8ND36dunZtQcZQe-1)
102+
103+
## Contributors
104+
105+
[![Contributors](https://contrib.rocks/image?repo=codecon-dev/code-kata-timer)](https://github.com/codecon-dev/code-kata-timer/graphs/contributors)

‎images/clock-regular.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎images/gear-solid.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎images/moon-regular.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎images/sun-regular.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 88 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,91 @@
11
<!DOCTYPE html>
2-
<html lang="pt">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="style.css" />
7-
<title>Cronômetro</title>
8-
</head>
9-
<body>
10-
<div class="input-stopwatch">
11-
<input type="number" min="00" id="hour" disabled />
12-
:
13-
<input type="number" min="00" id="min" disabled />
14-
:
15-
<input type="number" min="00" id="sec" disabled />
2+
<html lang="pt" data-theme="dark">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" href="/images/clock-regular.svg" type="image/svg+xml">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Cronômetro</title>
9+
</head>
10+
<body>
11+
<button id="themeToggle" data-tooltip="Mudar para tema claro">
12+
<img id="themeIcon" src="/images/sun-regular.svg" alt="Alternar tema">
13+
</button>
14+
<button id="configToggle" data-tooltip="Configurações">
15+
<img src="/images/gear-solid.svg" alt="Configurações">
16+
</button>
17+
<div class="editing-label"></div>
18+
<div class="input-stopwatch">
19+
<input type="number" min="00" id="hour" disabled tabindex="-1">
20+
:
21+
<input type="number" min="00" id="min" disabled tabindex="-1">
22+
:
23+
<input type="number" min="00" id="sec" disabled tabindex="-1">
24+
</div>
25+
<div class="button-wrapper js-stopwatch-button">
26+
<button class="js-active-fullscreen" data-tooltip="Alternar tela cheia">
27+
<img src="/images/full-screen.svg" alt="Fullscreen">
28+
</button>
29+
<button class="js-edit-button" data-tooltip="Editar o tempo do cronômetro">
30+
<img src="/images/edit.svg" alt="Editar">
31+
</button>
32+
<button class="js-stop-button" id="toZeroBtn" data-tooltip="Zerar o cronômetro">
33+
<img src="/images/reset.svg" alt="Resetar">
34+
</button>
35+
<button class="js-play-button" id="startBtn" data-tooltip="Iniciar o cronômetro">
36+
<img src="/images/play.svg" alt="Iniciar">
37+
</button>
38+
<button class="js-pause-button hide" id="pauseBtn" data-tooltip="Pausar o cronômetro">
39+
<img src="/images/pause.svg" alt="Pausar">
40+
</button>
41+
<button id="add30sPaused" data-tooltip="Adicionar 30 segundos ao cronômetro" class="hide">+30s</button>
42+
<button id="add30sStopped" data-tooltip="Adicionar 30 segundos ao cronômetro" class="hide">+30s</button>
43+
<button id="add30sRunning" data-tooltip="Adicionar 30 segundos ao timer em execução" class="hide">+30s</button>
44+
</div>
45+
<div class="button-wrapper js-edit-container-stopwatch hide">
46+
<button class="js-cancel-button" data-tooltip="Cancelar edição">
47+
<img src="/images/cancel.svg" alt="Cancelar">
48+
</button>
49+
<button class="js-finish-edit-button" data-tooltip="Finalizar edição">
50+
<img src="/images/ok.svg" alt="Finalizar">
51+
</button>
52+
</div>
53+
<section id="contributors">
54+
<h4>Contribuidores</h4>
55+
<div class="contributors-list">
56+
<a href="https://github.com/codecon-dev/code-kata-timer/graphs/contributors">
57+
<img src="https://contrib.rocks/image?repo=codecon-dev/code-kata-timer" alt="Contribuidores do projeto">
58+
</a>
1659
</div>
17-
<div class="button-wrapper js-stopwatch-button">
18-
<button class="js-active-fullscreen">
19-
<img src="/images/full-screen.svg" alt="Colocar em tela cheia" />
20-
</button>
21-
<button class="js-edit-button">
22-
<img src="/images/edit.svg" alt="Editar" />
23-
</button>
24-
<button class="js-stop-button" id="toZeroBtn">
25-
<img src="/images/reset.svg" alt="Resetar" />
26-
</button>
27-
<button class="js-play-button" id="startBtn">
28-
<img src="/images/play.svg" alt="Iniciar" />
29-
</button>
30-
<button class="js-pause-button" id="pauseBtn">
31-
<img src="/images/pause.svg" alt="Pausar" />
32-
</button>
60+
</section>
61+
<div id="configPopup" class="overlay hide">
62+
<div class="modal">
63+
<div class="modal-header">
64+
<h2>Configurações</h2>
65+
<button id="closeConfig" class="close-btn">
66+
<img src="/images/cancel.svg" alt="Fechar">
67+
</button>
68+
</div>
69+
<div class="toggle-container">
70+
<span class="toggle-label">Exibir contribuidores do projeto</span>
71+
<label class="switch">
72+
<input type="checkbox" id="showContributors" checked>
73+
<span class="slider"></span>
74+
</label>
75+
</div>
76+
<div class="avatars">
77+
<div class="avatar"></div>
78+
<div class="avatar"></div>
79+
<div class="avatar"></div>
80+
</div>
3381
</div>
34-
<div class="button-wrapper js-edit-container-stopwatch hide">
35-
<button class="js-cancel-button">
36-
<img src="/images/cancel.svg" alt="Cancelar" />
37-
</button>
38-
<button class="js-finish-edit-button">
39-
<img src="/images/ok.svg" alt="Finalizar" />
40-
</button>
41-
</div>
42-
<div id="countdown" class="hide">
43-
<span id="countdown-number"></span>
44-
<button class="js-restart-button" id="restartBtn">
45-
<img src="/images/cancel.svg" alt="Reiniciar" />
46-
</button>
47-
</div>
48-
<script src="script.js"></script>
49-
</body>
50-
</html>
82+
</div>
83+
<div id="countdown" class="hide">
84+
<span id="countdown-number"></span>
85+
<button class="js-restart-button" id="restartBtn" data-tooltip="Reiniciar o cronômetro">
86+
<img src="/images/cancel.svg" alt="Reiniciar">
87+
</button>
88+
</div>
89+
<script src="script.js"></script>
90+
</body>
91+
</html>

0 commit comments

Comments
 (0)