feat: add estilizacao e cronometro por segundos#5
feat: add estilizacao e cronometro por segundos#5geanfarias merged 6 commits intocodecon-dev:mainfrom
Conversation
|
põe uns prints e uns gifs de como ficou |
| return { seconds, minutes, hours }; | ||
| } | ||
|
|
||
| function setValues(fromSeconds = 0) { |
There was a problem hiding this comment.
enfim alguém escreveu a função correta 👏🏼
|
@Mcl-Oliveira, consegue apontar o seu pr para o pr #4? |
|
@geanfarias vou ficar devendo o apontamento por nao conseguir apontar a branch do pr, mas me comprometo a atualizar esse PR caso o outro seja aceito No mais, fiz a adicao de algumas imagens na descricao e tambem adicionei um changelog pra listar algumas alteracoes pequenas que fiz hoje ps: nao fiz o gif por que apanhei pro linux (acontece... kkkk) |
| <button class="js-restart-button" id="restartBtn"> | ||
| <img src="/images/cancel.svg" alt="Reiniciar" /> | ||
| </button> |
There was a problem hiding this comment.
A ideia é que não tivesse o botão de cancelar aqui mesmo. Coloquei o layout do Figma no README, dá uma olhada.
Também seria legal que o tamanmho do texto no countdown-number fosse maior hehe
There was a problem hiding this comment.
top, vou dar uma olhada la depois e ajustar
|
@Mcl-Oliveira, ajusta os conflitos, por favor |
| run(); | ||
| } | ||
| const DEFAULT_SECONDS = 30; | ||
| let TIMER_STATUS = "STOPED"; |
There was a problem hiding this comment.
o que acha de criar um "enum" pra esses status, algo como:
const TimerStatus = {
STOPPED: "STOPPED",
PAUSED: "PAUSED",
COUNTDOWN: "COUNTDOWN"
RUNNING: "RUNNING"
}assim você evitaria duas coisas:
- ficar comparando string
- centralizar os valores que você poder ter
se quiser dá para criar funções específicas também, algo assim:
const TimerStatus = {
STOPPED: "STOPPED",
PAUSED: "PAUSED",
COUNTDOWN: "COUNTDOWN",
RUNNING: "RUNNING",
isRunning: (status) => status === TimerStatus.RUNNING,
isCountdown : (status) => status === TimerStatus.COUNTDOWN
}assim facilita também as validações que você faz na linha 156
| return sumSeconds; | ||
| } | ||
|
|
||
| // Pega os valores do timer separadamente |
There was a problem hiding this comment.
Sei que os comentários ajudam a entender o que a função faz ou a variável tem, mas o quanto mais descritivo você deixar, menos você precisará de comentários.
Exemplo da função abaixo: getValues.
Mas de onde? De onde vem esses values?
Se você coloca algo como: getValuesFromInput, fica mais claro, e evita a necessidade de comentar.
Outros nomes que podem ajudar:
getHMSFromInputs (h = hour; m = minutes; s = seconds)
getTimeFromInputs
readTimeInputs
Pensa em como refatorar seu código diminuindo os comentários e deixando os nomes das funções/variáveis mais específicas.
|
@Mcl-Oliveira, vai conseguir realizar os ajutes? |
|
@geanfarias ajustei os conflitos, refiz o nome de algumas funções conforme o pedido, também gostei da sugestão do TimerStatus então apliquei no código, ajustei o tamanho da fonte quando estamos no countdown e parei por ai a semana resolveu ficar mais corrida de uma hora pra outra, perdão ter demorado a vir aqui no PR 😅, talvez eu contribua mais em outro PR, deixar a galerinha fazer o deles também 🚀 |
|
Obrigado pela contribuição @Mcl-Oliveira |
3 participants
Peguei algumas ideias de outro pr que estava aberto, mas to sem tempo pra fazer base nele, pois ja tinha feito esse aqui quando fui almocar
Acho que me empolguei um pouco enquanto estava fazendo, no mais um abraco a todos, to curtindo muito o conteudo do canal
Inicial
Timer rolando
Timer em countdown
Timer zerado
Modo de edicao
Changelog