<br /> <p align="center"> <img src="https://i.imgur.com/bSVdIck.pngf" alt="Logo" width="1000"> <h3 align="center">Pomodoro by <a href="https://github.com/Lorenalgm">Lorena</a></h3> <br /> <p align="center"> Cronômetro pomodoro para gerenciamento de tempo <br /> <br /> <a href="https://github.com/devchallenge-io/pomodoro">Desafio</a> · <a href="https://www.devchallenge.com.br/">DevChallenge</a> </p> </p>

Índice

• Devchallenge
• Desafio
• Techs
• Como começar
• Dicas
  • Cores
  • Modelo
  • Imagens
  • Icones
  • Tipo de fonte
• Compartilhe

Devchallenge

<a href="https://devchallenge.now.sh/"> DevChallenge</a> permite que você evolua suas skills como programador! Participe da nossa <a href="https://discord.gg/yvYXhGj">comunidade</a> o/

Desafio

Seu desafio é criar um cronômetro que utiliza a técnica do pomodoro para ajudar na gestão de tempo! O modelo final está disponível na pasta "design"

Requisitos:

• Sua página deverá uma tela inicial onde será possível configurar o tempo de trabalho, tempo de pausa e a quantidade de vezes que isso será feito.<br>
• Por padrão, virá 25 minutos, 5 minutos e 3 vezes. Porém, o usuário poderá alterar esses dados clicando nas setas para cima ou baixo<br>
• Após isso, o usuário poderá clicar em continuar e iniciar seu cronômetro
• O usuário poderá pausar ou dar play no cronômetro

Requisitos bônus

• Você poderá adicionar um círculo em volta do inicador de tempo, que será preenchido conforme o tempo vai chegando ao fim.
• Você poderá adicionar um alerta sonoro quando o tempo acabar, para avisar o usuário

Techs:

• HTML e CSS
• Framework ou linguagem que preferir :)

Como começar:

1 - Use esse template (clicando em Use this template) ou faça um fork deste repositório com o código inicial<br> 2 - Leia as instruções no readme.md<br> 3 - Comece a codar! Sinta-se livre para utilizar o fluxo de trabalho que ache mais confortável<br> 4 - Compartilhe seu resultado com a comunidade! Se puder, mostre seus resultado aqui no repositório também, criando uma Issue :)<br>

Dicas

Cores:

Azul mais escuro: #333853<br> Azul mais claro: #3C4262<br> Verde: #219653<br> Amarelo: #F2C94C

Modelo:

O modelo final desktop está disponível na pasta ./design

Icones

Para os ícones, recomendamos que utilize alguma biblioteca, como o Font Awesome

Tipo de fonte:

• Roboto

Compartilhe!

Inicie seu projeto utilizando esse template no seu github como um repositório público<br> Faça um print, gif ou vídeo e compartilhe o resultado no seu Linkedin<br>

Desafio criado por <a href="https://www.linkedin.com/in/lorenagmontes/">Lorena</a> :)