Skip to content

Commit bfa0b29

Browse files
gabrnunesgabrnunes
authored
Merge pull request #24 from codecon-dev/revert-23-main
Revert "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 1d59c9b + 52be407 commit bfa0b29

9 files changed

+211
-1189
lines changed

‎.gitignore

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

‎README.md

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

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.
3+
Este é um aplicativo simples de timer que foi usado durante a [gravação deste vídeo](https://www.youtube.com/watch?v=ir8MIBhGbcA).
44

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)
5+
O layout está [aqui no Figma](https://www.figma.com/design/97maginjN0aHjiQPy3dCDS/%231---Timer?m=auto&t=B8ND36dunZtQcZQe-1).

‎images/clock-regular.svg

-10
This file was deleted.

‎images/gear-solid.svg

-3
This file was deleted.

‎images/moon-regular.svg

-10
This file was deleted.

‎images/sun-regular.svg

-10
This file was deleted.

‎index.html

+47-88
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,50 @@
11
<!DOCTYPE html>
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>
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 />
5916
</div>
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>
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>
8133
</div>
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>
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>

0 commit comments

Comments
 (0)