E aí, pessoal! Hoje vou compartilhar com vocês uma experiência que tive com um projetinho que chamei de “chrono60”. A ideia era simples: criar um timer regressivo de 60 segundos, bem básico mesmo. Mas, como sempre, a gente aprende um bocado no caminho.
Começando do Zero
Primeiro, peguei um papel e uma caneta (sim, sou desses!) e rascunhei como queria que o timer funcionasse. Pensei: “Preciso de um botão para iniciar, um display para mostrar os segundos e, claro, o código para fazer a contagem regressiva.”
Com a ideia na cabeça, abri meu editor de código favorito. Escolhi usar HTML, CSS e JavaScript, porque são ferramentas que já estou mais acostumado a usar no dia a dia.
Montando a Estrutura
Comecei pelo HTML, criando a estrutura básica da página. Adicionei um elemento <div> para o display do timer e um botão com o texto “Iniciar”.
No CSS, dei uma ajeitada no visual. Defini o tamanho da fonte, as cores e o posicionamento dos elementos. Nada muito extravagante, só para ficar apresentável.
A Mágica do JavaScript
Agora, a parte divertida: fazer o timer funcionar! No JavaScript, criei uma variável para armazenar os segundos (começando em 60, claro). Depois, adicionei um “event listener” ao botão, ou seja, um código que é executado quando alguém clica no botão “Iniciar”.
Dentro desse “event listener”, usei a função setInterval(). Essa função é como um relógio: ela executa um pedaço de código a cada intervalo de tempo determinado. No meu caso, configurei para executar a cada 1000 milissegundos (ou seja, 1 segundo).
A cada vez que esse código é executado, diminuo 1 da variável dos segundos e atualizo o texto do display com o novo valor. Simples assim!
Testando e Refinando
Com o código pronto, fui testar. Cliquei no botão e… nada! 😅 Descobri que tinha esquecido de um detalhe: precisava verificar se os segundos chegaram a zero. Se chegasse, o timer deveria parar.
Adicionei um if para verificar isso e usei a função clearInterval() para parar o “relógio” do setInterval(). Pronto, agora sim funcionou!
O Resultado Final
Depois de alguns ajustes e testes, consegui criar meu timer regressivo de 60 segundos. Não é nada revolucionário, mas foi um ótimo exercício para praticar minhas habilidades e aprender algumas coisinhas novas. E o mais legal é que agora tenho um timer personalizado que posso usar em outras aplicações!
- Rascunhar a ideia inicial.
- Abrir o editor de código.
- Começar pelo HTML.
- Adicionar elementos.
- Definir CSS.
- Criar variável.
- Adicionar event listener.
- Configurar Interval.
- Diminuir variável.
- Testar o código.
