---
id: bd7158d8c442eddfaeb5bd0f
title: Build a Pomodoro Clock
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Construa um relógio Pomodoro
---

## Description
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/XpKrrW" target="_blank">https://codepen.io/freeCodeCamp/full/XpKrrW</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>User Story # 1:</strong> Eu posso ver um elemento com <code>id=&quot;break-label&quot;</code> que contém uma string (por exemplo, &quot;Break Length&quot;). <strong>User Story # 2:</strong> Eu posso ver um elemento com <code>id=&quot;session-label&quot;</code> que contém uma string (por exemplo, &quot;Session Length&quot;). <strong>User Story # 3:</strong> Eu posso ver dois elementos clicáveis ​​com IDs correspondentes: <code>id=&quot;break-decrement&quot;</code> e <code>id=&quot;session-decrement&quot;</code> . <strong>User Story # 4:</strong> Eu posso ver dois elementos clicáveis ​​com IDs correspondentes: <code>id=&quot;break-increment&quot;</code> e <code>id=&quot;session-increment&quot;</code> . <strong>User Story # 5:</strong> Eu posso ver um elemento com um <code>id=&quot;break-length&quot;</code> , que por padrão (on load) exibe um valor de 5. <strong>User Story # 6:</strong> Eu posso ver um elemento com um <code>id=&quot;session-length&quot;</code> correspondente <code>id=&quot;session-length&quot;</code> , que por padrão exibe um valor de 25. <strong>User Story # 7:</strong> Eu posso ver um elemento com um <code>id=&quot;timer-label&quot;</code> , que contém uma string indicando que uma sessão foi inicializada (por exemplo,&quot; Session &quot;) . <strong>User Story # 8:</strong> Eu posso ver um elemento com <code>id=&quot;time-left&quot;</code> . NOTA: Pausado ou em execução, o valor nesse campo sempre deve ser exibido no formato <code>mm:ss</code> (ou seja, 25:00). <strong>História do usuário nº 9:</strong> posso ver um elemento clicável com um <code>id=&quot;start_stop&quot;</code> . <strong>User Story # 10:</strong> Eu posso ver um elemento clicável com um <code>id=&quot;reset&quot;</code> . <strong>User Story # 11:</strong> Quando eu clico no elemento com o id de <code>reset</code> , qualquer timer em execução deve ser parado, o valor em <code>id=&quot;break-length&quot;</code> deve retornar para <code>5</code> , o valor em <code>id=&quot;session-length&quot;</code> deve retornar para 25, e o elemento com <code>id=&quot;time-left&quot;</code> deve redefinir para seu estado padrão. <strong>User Story # 12:</strong> Quando eu clico no elemento com o id de <code>break-decrement</code> , o valor dentro de <code>id=&quot;break-length&quot;</code> diminui por um valor de 1, e eu posso ver o valor atualizado. <strong>User Story # 13:</strong> Quando eu clico no elemento com o id de <code>break-increment</code> , o valor dentro de <code>id=&quot;break-length&quot;</code> incrementado por um valor de 1, e eu posso ver o valor atualizado. <strong>User Story # 14:</strong> Quando eu clico no elemento com o id de <code>session-decrement</code> de <code>session-decrement</code> , o valor dentro de <code>id=&quot;session-length&quot;</code> diminui por um valor de 1, e eu posso ver o valor atualizado. <strong>História do usuário # 15:</strong> quando eu clico no elemento com o id de <code>session-increment</code> de <code>session-increment</code> , o valor dentro de <code>id=&quot;session-length&quot;</code> incrementado pelo valor de 1, e eu posso ver o valor atualizado. <strong>User Story # 16:</strong> Eu não deveria ser capaz de definir uma sessão ou quebrar a duração para &lt;= 0. <strong>User Story # 17:</strong> Eu não deveria ser capaz de definir uma sessão ou break length para&gt; 60. <strong>User Story # 18:</strong> Quando eu primeiro clique no elemento com <code>id=&quot;start_stop&quot;</code> , o cronômetro deve começar a ser executado a partir do valor exibido no <code>id=&quot;session-length&quot;</code> , mesmo que o valor tenha sido incrementado ou decrementado em relação ao valor original de 25. <strong>User Story # 19 :</strong> Se o temporizador estiver em execução, o elemento com o id de <code>time-left</code> deverá exibir o tempo restante no formato <code>mm:ss</code> (diminuindo por um valor de 1 e atualizando a exibição a cada 1000ms). <strong>User Story # 20:</strong> Se o cronômetro estiver em execução e eu clicar no elemento com <code>id=&quot;start_stop&quot;</code> , a contagem regressiva deverá ser pausada. <strong>História do usuário nº 21:</strong> se o cronômetro estiver pausado e eu clicar no elemento com <code>id=&quot;start_stop&quot;</code> , a contagem regressiva deverá voltar a ser executada a partir do ponto em que ela foi pausada. <strong>User Story # 22:</strong> 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 <code>timer-label</code> do <code>timer-label</code> deverá exibir uma string indicando que uma quebra começou. <strong>User Story # 23:</strong> 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 <code>id=&quot;break-length&quot;</code> . <strong>História do usuário nº 24:</strong> 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 <code>timer-label</code> do <code>timer-label</code> deverá exibir uma cadeia indicando que uma sessão começou. <strong>User Story # 25:</strong> 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 <code>id=&quot;session-length&quot;</code> . <strong>User Story # 26:</strong> 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 <code>audio</code> HTML5 e ter um <code>id=&quot;beep&quot;</code> correspondente a <code>id=&quot;beep&quot;</code> . <strong>User Story # 27:</strong> O elemento de áudio com <code>id=&quot;beep&quot;</code> deve ser de 1 segundo ou mais. <strong>User Story # 28:</strong> O elemento audio com id de <code>beep</code> deve parar de tocar e ser rebobinado para o começo quando o elemento com o id de <code>reset</code> é clicado. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>

## Instructions
<section id="instructions">
</section>

## Tests
<section id='tests'>

```yml
tests: []

```

</section>

## Challenge Seed
<section id='challengeSeed'>

</section>

## Solution
<section id='solution'>

```js
// solution required
```
</section>
