freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock.span...

39 lines
8.9 KiB
Markdown
Raw Normal View History

2018-10-08 17:34:43 +00:00
---
id: bd7158d8c442eddfaeb5bd0f
title: Build a Pomodoro Clock
isRequired: true
challengeType: 3
2018-10-10 20:20:40 +00:00
videoUrl: ''
localeTitle: Construir un reloj pomodoro
2018-10-08 17:34:43 +00:00
---
## Description
2018-10-10 20:20:40 +00:00
<section id="description"> <strong>Objetivo:</strong> crear una aplicación <a href="https://codepen.io" target="_blank">CodePen.io</a> que sea funcionalmente similar a esta: <a href="https://codepen.io/freeCodeCamp/full/XpKrrW" target="_blank">https://codepen.io/freeCodeCamp/full/XpKrrW</a> . Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede completar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debería usar un marco frontend (como React, por ejemplo) porque esta sección trata sobre el aprendizaje de marcos frontend. No se recomiendan las tecnologías adicionales no enumeradas anteriormente y su uso es bajo su propio riesgo. Estamos considerando la compatibilidad con otros marcos de frontend, como Angular y Vue, pero actualmente no se admiten. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación! <strong>Historia de usuario n. ° 1:</strong> Puedo ver un elemento con <code>id=&quot;break-label&quot;</code> que contiene una cadena (por ejemplo, &quot;Break Length&quot;). <strong>Historia de usuario n. ° 2:</strong> Puedo ver un elemento con <code>id=&quot;session-label&quot;</code> que contiene una cadena (por ejemplo, &quot;Session Length&quot;). <strong>Historia de usuario n. ° 3:</strong> Puedo ver dos elementos seleccionables con las ID correspondientes: <code>id=&quot;break-decrement&quot;</code> e <code>id=&quot;session-decrement&quot;</code> . <strong>Historia de usuario n. ° 4:</strong> Puedo ver dos elementos seleccionables con las ID correspondientes: <code>id=&quot;break-increment&quot;</code> e <code>id=&quot;session-increment&quot;</code> . <strong>Historia de usuario n. ° 5:</strong> Puedo ver un elemento con un <code>id=&quot;break-length&quot;</code> correspondiente <code>id=&quot;break-length&quot;</code> , que de manera predeterminada (en carga) muestra un valor de 5. <strong>Historia de usuario n. ° 6:</strong> puedo ver un elemento con un <code>id=&quot;session-length&quot;</code> correspondiente <code>id=&quot;session-length&quot;</code> , que por defecto muestra un valor de 25. <strong>Historia de usuario n. ° 7:</strong> Puedo ver un elemento con una <code>id=&quot;timer-label&quot;</code> correspondiente <code>id=&quot;timer-label&quot;</code> , que contiene una cadena que indica que una sesión está inicializada (por ejemplo,&quot; Sesión &quot;) . <strong>Historia de usuario n. ° 8:</strong> Puedo ver un elemento con <code>id=&quot;time-left&quot;</code> correspondiente <code>id=&quot;time-left&quot;</code> . NOTA: En pausa o en ejecución, el valor en este campo siempre debe mostrarse en formato <code>mm:ss</code> (es decir, 25:00). <strong>Historia de usuario n. ° 9:</strong> Puedo ver un elemento seleccionable con un <code>id=&quot;start_stop&quot;</code> correspondiente <code>id=&quot;start_stop&quot;</code> . <strong>Historia de usuario n. ° 10:</strong> Puedo ver un elemento seleccionable con un <code>id=&quot;reset&quot;</code> correspondiente <code>id=&quot;reset&quot;</code> . <strong>Historia de usuario n. ° 11:</strong> Cuando hago clic en el elemento con el ID de <code>reset</code> , se debe detener cualquier temporizador en ejecución, el valor dentro de <code>id=&quot;break-length&quot;</code> debe regresar a <code>5</code> , el valor dentro de <code>id=&quot;session-length&quot;</code> debe regresar a 25, y el elemento con <code>id=&quot;time-left&quot;</code> debería restablecerse a su estado predeterminado. <strong>Historia de usuario n. ° 12:</strong> Cuando hago clic en el elemento con el id de <code>break-decrement</code> , el valor dentro de <code>id=&quot;break-length&quot;</code> reduce en un valor de 1, y puedo ver el valor actualizado. <strong>Historia de usuario n. ° 13:</strong> Cuando hago clic en el elemento con la identificación de <code>b
2018-10-08 17:34:43 +00:00
## Instructions
2018-10-10 20:20:40 +00:00
<section id="instructions">
2018-10-08 17:34:43 +00:00
</section>
## Tests
<section id='tests'>
```yml
tests: []
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>