39 lines
8.2 KiB
Markdown
39 lines
8.2 KiB
Markdown
|
---
|
|||
|
|
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="break-label"</code> que contém uma string (por exemplo, "Break Length"). <strong>User Story # 2:</strong> Eu posso ver um elemento com <code>id="session-label"</code> que contém uma string (por exemplo, "Session Length"). <strong>User Story # 3:</strong> Eu posso ver dois elementos clicáveis com IDs correspondentes: <code>id="break-decrement"</code> e <code>id="session-decrement"</code> . <strong>User Story # 4:</strong> Eu posso ver dois elementos clicáveis com IDs correspondentes: <code>id="break-increment"</code> e <code>id="session-increment"</code> . <strong>User Story # 5:</strong> Eu posso ver um elemento com um <code>id="break-length"</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="session-length"</code> correspondente <code>id="session-length"</code> , que por padrão exibe um valor de 25. <strong>User Story # 7:</strong> Eu posso ver um elemento com um <code>id="timer-label"</code> , que contém uma string indicando que uma sessão foi inicializada (por exemplo," Session ") . <strong>User Story # 8:</strong> Eu posso ver um elemento com <code>id="time-left"</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="start_stop"</code> . <strong>User Story # 10:</strong> Eu posso ver um elemento clicável com um <code>id="reset"</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="break-length"</code> deve retornar para <code>5</code> , o valor em <code>id="session-length"</code> deve retornar para 25, e o elemento com <code>id="time-left"</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="break-length"</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="break-length"</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="session-length"</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-i
|
|||
|
|
|
|||
|
|
## 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>
|