Este é um cronômetro simples desenvolvido usando HTML, CSS e JavaScript para o nosso projeto em grupo. Aqui, descreveremos o processo de desenvolvimento, as dificuldades encontradas e como o cronômetro funciona.
-
HTML: Começamos criando a estrutura HTML básica que incluiu um cabeçalho, um título, o cronômetro em si e três botões - Iniciar, Pausar e Parar.
-
CSS: Em seguida, aplicamos estilos para tornar o cronômetro mais atraente. Isso incluiu a definição de cores de fundo, tamanhos de fonte e estilos de botão. Também tornamos o design responsivo, adaptando-o a diferentes tamanhos de tela usando media queries.
-
JavaScript: A lógica do cronômetro foi implementada em JavaScript. Criamos funções para atualizar o tempo, iniciar, pausar e parar o cronômetro. Usamos
setInterval
para atualizar o tempo a cada segundo.
-
Manipulação do Tempo: Uma das principais dificuldades foi lidar com a manipulação do tempo. Converter segundos em minutos e horas e atualizar o cronômetro a cada segundo exigiu um planejamento cuidadoso.
-
Responsividade: Garantir que o cronômetro parecesse bom em telas de diferentes tamanhos foi um desafio. No entanto, conseguimos ajustar os estilos usando media queries para proporcionar uma boa experiência em todas as telas.
- Clique no botão "Iniciar" para começar o cronômetro.
- Clique no botão "Pausar" para interromper o cronômetro temporariamente.
- Clique no botão "Parar" para reiniciar o cronômetro.
- Desenvolver este cronômetro foi como uma montanha-russa emocional 🎢.
- As dificuldades foram desafiadoras, mas também estimulantes 💪.
- Esperamos que este cronômetro seja útil para nosso projeto em grupo! 🤞
Você pode conferir o código-fonte completo aqui.
Este é um resumo do processo de desenvolvimento do nosso cronômetro. Se você tiver alguma dúvida ou sugestão de melhoria, sinta-se à vontade para compartilhar. 👍