Escolha seu idioma | Choose your language

Launch Countdown Timer

Desafio do FrontEnd Mentor de uma página com um contador regressivo

Ver online

Índice

1. Sobre o projeto
   • Feito com
   • Notas de destaque
   • Desafios e aprendizados
2. Utilização
3. Contato

Sobre o projeto

Esse projeto é um contador de tempo para o lançamento de um site!

(back to top)

Feito com

(back to top)

Notas de destaque

Apesar da animação ser um bônus para o desafio, eu infelizmente tentei de várias formas e não consegui fazer uma boa transição nessa animação de flip, e como optei por não copiar, não usar uma lib (a maioria não tem a customização necessária), nem há tanto exemplos mais modernos e esse foi o resultado. 😖

(back to top)

Desafios e aprendizados

🌬️ Tailwind CSS
Fiz um teste de aprendizado para ver se conseguiria lidar com esse framework que é utilizado em algumas das maiores empresas de tech do mundo, o resultado foi surpreendente e me agradou bastante.

As partes tristes foram ver repetição de código em mais de uma linha e mais de 50 linhas de CSS dentro de um único componente. 😨

⏲️Timer!
A parte mais importante do projeto era garantir que o timer funcionasse adequadamente, para isso foi necessário pegar o tempo total de uma data até outra e dividir esse tempo de acordo com o card desejado (dias, horas, minutos, segundos). Além disso também foi feito o tratamento aondecaso o tempo acabe será exibida uma mensagem.

🥶 Animação de flip
Acredito que o real desafio seja esse, é o boss final tem muito hp e várias tentativas são necessárias pra concluir.

Tentei usar tanta coisa, desde animações usando cubic-bezier, transições maiores/menores, transições com etapas, mudanças nos cards, alteração de intervalos e no final o mais próximo que eu consegui chegar foi aqui. 😬

Eu acredito que o erro esteja na aplicação do setTimeOut relacionado aos cards de flip, todavia não consegui solucionar 😥

Em resumo foi possível aprender e praticar:

• Aprender um pouco de Tailwind CSS e suas possibilidades
• Lógica de contagem do JavaScript
• Praticar bastante React

(back to top)

Utilização

Após clonar, baixar ou fazer um fork, utilize o comando abaixo para instalar as dependências do projeto:

npm install

Esse projeto te permite:

• Ver uma contagem regressiva
• Alterar "currentDayTime" na função "timeCalculation" pode acelerar o tempo do contador pra chegar no fim

(back to top)

Contato

💌 Para me mandar uma mensagem basta usar um dos botões abaixo!

(back to top)