Cron-metro-de-Segundos Tailwind Templates

Cron Metro De Segundos

Cronômetro desenvolvido para atender à necessidade de uma psicóloga, que precisava calcular manualmente os segundos. O cronômetro conta apenas segundos, com botões de Iniciar/Pausar e Zerar. Usando HTML semântico, Tailwind CSS e JavaScript, o design é responsivo e fácil de usar.

Cronômetro de Segundos

Este projeto foi desenvolvido para resolver uma necessidade específica de uma psicóloga, que precisava calcular manualmente a quantidade de segundos durante suas atividades. Para facilitar e automatizar esse processo, este cronômetro foi criado, exibindo exclusivamente os segundos de forma contínua, sem reiniciar a cada 60 segundos.

Funcionalidades

Contagem de segundos contínua:

O cronômetro não reinicia após 60 segundos, continuando a contagem (61, 62, 63...).

Botões funcionais:

Iniciar/Pausar:

Inicia e pausa o cronômetro utilizando o mesmo botão.

Zerar:

Pausa o cronômetro e reseta a contagem para zero.

Interface responsiva:

O design foi criado utilizando Tailwind CSS, garantindo que o cronômetro funcione perfeitamente em qualquer dispositivo.

Design simples e elegante:

Com uma paleta de cores estilosa e uma fonte moderna, a interface é agradável e intuitiva.

Tecnologias Utilizadas

HTML5 Semântico: Estrutura clara e acessível.

CSS com Tailwind: Estilização responsiva, moderna e rápida.

JavaScript: Lógica por trás do cronômetro, garantindo a funcionalidade de contagem e controle.

Como Usar

Clique em Iniciar para começar a contagem. O botão Iniciar se transforma em Pausar enquanto o cronômetro está rodando. Para reiniciar o cronômetro, clique em Zerar, o que também pausa a contagem. Exemplo Visual

Foto:

image

Como Rodar o Projeto :

1 - Clone o repositório para o seu computador:

Copiar código

git clone https://github.com/SEU_USUARIO/cronometro-de-segundos.git

Certifique-se de que você tenha Tailwind CSS configurado. Para instalar as dependências e iniciar o projeto, utilize:

Copiar código

npx tailwindcss -i ./style.css -o ./output.css --watch

Abra o arquivo index.html no seu navegador e pronto!

Contribuições

Contribuições são bem-vindas! Sinta-se à vontade para abrir uma issue ou fazer um fork do projeto.

Top categories

Loading Svelte Themes