8.2 KiB
8.2 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7158d8c442eddfaeb5bd0f | Build a Pomodoro Clock | true | 3 | Construa um relógio Pomodoro |
Description
id="break-label"
que contém uma string (por exemplo, "Break Length"). User Story # 2: Eu posso ver um elemento com id="session-label"
que contém uma string (por exemplo, "Session Length"). User Story # 3: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-decrement"
e id="session-decrement"
. User Story # 4: Eu posso ver dois elementos clicáveis com IDs correspondentes: id="break-increment"
e id="session-increment"
. User Story # 5: Eu posso ver um elemento com um id="break-length"
, que por padrão (on load) exibe um valor de 5. User Story # 6: Eu posso ver um elemento com um id="session-length"
correspondente id="session-length"
, que por padrão exibe um valor de 25. User Story # 7: Eu posso ver um elemento com um id="timer-label"
, que contém uma string indicando que uma sessão foi inicializada (por exemplo," Session ") . User Story # 8: Eu posso ver um elemento com id="time-left"
. NOTA: Pausado ou em execução, o valor nesse campo sempre deve ser exibido no formato mm:ss
(ou seja, 25:00). História do usuário nº 9: posso ver um elemento clicável com um id="start_stop"
. User Story # 10: Eu posso ver um elemento clicável com um id="reset"
. User Story # 11: Quando eu clico no elemento com o id de reset
, qualquer timer em execução deve ser parado, o valor em id="break-length"
deve retornar para 5
, o valor em id="session-length"
deve retornar para 25, e o elemento com id="time-left"
deve redefinir para seu estado padrão. User Story # 12: Quando eu clico no elemento com o id de break-decrement
, o valor dentro de id="break-length"
diminui por um valor de 1, e eu posso ver o valor atualizado. User Story # 13: Quando eu clico no elemento com o id de break-increment
, o valor dentro de id="break-length"
incrementado por um valor de 1, e eu posso ver o valor atualizado. User Story # 14: Quando eu clico no elemento com o id de session-decrement
de session-decrement
, o valor dentro de id="session-length"
diminui por um valor de 1, e eu posso ver o valor atualizado. História do usuário # 15: quando eu clico no elemento com o id de session-increment
de session-increment
, o valor dentro de id="session-length"
incrementado pelo valor de 1, e eu posso ver o valor atualizado. User Story # 16: Eu não deveria ser capaz de definir uma sessão ou quebrar a duração para <= 0. User Story # 17: Eu não deveria ser capaz de definir uma sessão ou break length para> 60. User Story # 18: Quando eu primeiro clique no elemento com id="start_stop"
, o cronômetro deve começar a ser executado a partir do valor exibido no id="session-length"
, mesmo que o valor tenha sido incrementado ou decrementado em relação ao valor original de 25. User Story # 19 : Se o temporizador estiver em execução, o elemento com o id de time-left
deverá exibir o tempo restante no formato mm:ss
(diminuindo por um valor de 1 e atualizando a exibição a cada 1000ms). User Story # 20: Se o cronômetro estiver em execução e eu clicar no elemento com id="start_stop"
, a contagem regressiva deverá ser pausada. História do usuário nº 21: se o cronômetro estiver pausado e eu clicar no elemento com id="start_stop"
, a contagem regressiva deverá voltar a ser executada a partir do ponto em que ela foi pausada. User Story # 22: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label
do timer-label
deverá exibir uma string indicando que uma quebra começou. User Story # 23: Quando uma contagem regressiva da sessão atingir zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da pausa deve começar, contando a partir do valor exibido atualmente no elemento id="break-length"
. História do usuário nº 24: Quando uma contagem regressiva da quebra atingir zero (NOTA: o cronômetro DEVE chegar às 00:00), e uma nova contagem regressiva começar, o elemento com o id do timer-label
do timer-label
deverá exibir uma cadeia indicando que uma sessão começou. User Story # 25: Quando uma contagem regressiva da quebra chegar a zero (NOTA: o timer DEVE chegar às 00:00), uma nova contagem regressiva da sessão deve começar, contando a partir do valor exibido no elemento id="session-length"
. User Story # 26: Quando uma contagem regressiva chegar a zero (NOTA: o temporizador DEVE chegar às 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag de audio
HTML5 e ter um id="beep"
correspondente a id="beep"
. User Story # 27: O elemento de áudio com id="beep"
deve ser de 1 segundo ou mais. User Story # 28: O elemento audio com id de beep
deve parar de tocar e ser rebobinado para o começo quando o elemento com o id de reset
é clicado. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required