6.5 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd0f | Construye un reloj 25 + 5 | 3 | 301373 | build-a-25--5-clock |
--description--
Objetivo: Crear una aplicación que sea funcionalmente similar a https://codepen.io/freeCodeCamp/full/XpKrrW.
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su uso corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
Historia de usuario #1: Puedo ver un elemento con id="break-label" que contiene una cadena (por ejemplo: "Break Length").
Historia de usuario #2: Puedo ver un elemento con id="session-label" que contiene una cadena (p.ej "Session Length").
Historia de usuario #3: Puedo ver dos elementos cliqueables con los siguientes IDs: id="break-decrement" y id="session-decrement".
Historia de usuario #4: Puedo ver dos elemento cliqueables con los siguientes IDs: id="break-increment" y id="session-increment".
Historia de usuario #5: Puedo ver un elemento con el correspondiente id="break-length" que por defecto (al cargarse) muestra el valor 5.
Historia de usuario #6: Puedo ver un elemento con el correspondiente id="session-length", que por defecto muestra el valor 25.
Historia de usuario #7: Puedo ver un elemento con el correspondiente id="timer-label", que contiene una cadena indicando si la sesión esta inicializada (p.ej. "Session").
Historia de usuario #8: Puedo ver un elemento con el correspondiente id="time-left". NOTA: En pausa o en ejecución, el valor en este campo debe mostrarse siempre en formato mm:ss (es decir: 25:00).
User Story #9: Puedo ver un elemento cliqueable con el correspondiente id="start_stop".
User Story #10: Puedo ver un elemento cliqueable con el correspondiente id="reset".
Historia de usuario #11: Cuando hago clic en el elemento con el id: reset, cualquier temporizador en ejecución debe detenerse. El valor en el id="break-length" debe regresar a 5, el valor en el id="session-length" debe regresar a 25 y el elemento con id="time-left" debe reiniciarse a su estado predeterminado.
Historia de usuario #12: Cuando hago clic en el elemento con id: break-decrement, el valor en id="break-length" se reduce en 1, y puedo ver el valor actualizado.
Historia de usuario #13: Cuando hago clic en el elemento con id: break-increment, el valor en id="break-length" se incrementa en 1 y puedo ver el valor actualizado.
Historia de usuario #14: Cuando hago clic en el elemento con id: session-decrement, el valor en id="session-length" se reduce en 1 y puedo ver el valor actualizado.
Historia de usuario #15: Cuando hago clic en el elemento con id: session-increment, el valor en id="session-length" se incrementa en 1 y puedo ver el valor actualizado.
Historia de usuario #16: No debo ser capaz de establecer una duración de la sesión o pausa <= 0.
Historia de usuario #17: No debo poder establecer una duración de la sesión o pausa > 60.
Historia de usuario #18: Cuando hago clic por primera vez en el elemento con el correspondiente id="start_stop", el temporizador debe comenzar a correr desde el valor mostrado actualmente en id="session-length", incluso si el valor se incrementó o se redujo respecto al valor original 25.
Historia de usuario #19: Si el temporizador se está ejecutando, el elemento con el id: time-left debe mostrar el tiempo restante en formato mm:ss (reduciendo 1 y actualizando el valor mostrado cada 1000ms).
Historia de usuario #20: Si el temporizador se está ejecutando y hago clic en el elemento id="start_stop", la cuenta atrás debe pausarse.
Historia de usuario #21: Si el temporizador está pausado y hago clic en el elemento id="start_stop", la cuenta atrás debe reanudarse desde el punto en el que fue pausada.
Historia de usuario #22: Cuando la cuenta atrás de la sesión llega a cero (NOTA: el temporizador DEBE llegar a 00:00) y una nueva cuenta atrás comienza, el elemento cuyo id es timer-label debería mostrar una cadena en la que se indica que el descanso (break) ha comenzado.
Historia de usuario #23: Cuando la cuenta atrás de la sesión llega a cero (NOTA: el temporizador DEBE llegar a 00:00), una nueva cuenta atrás comienza para el periodo de descanso (break) y se inicia desde el valor mostrado actualmente por el elemento id="break-length".
Historia de usuario #24: Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: el temporizador DEBE llegar a 00:00) y una nueva cuenta atrás debe comenzar, el elemento cuyo id es timer-label debe mostrar una cadena en la que se indica que la sesión ha comenzado.
Historia de usuario #25: Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: el temporizador DEBE llegar a 00:00), una nueva cuenta atrás debe comenzar para la sesión, la cual se inicia desde el valor mostrado actualmente por el elemento id="session-length".
Historia de usuario #26: Cuando una cuenta atrás llega a cero (NOTA: el temporizador DEBE llegar a 00:00), debe reproducirse un sonido que indica que el tiempo se ha agotado. Se debe utilizar una etiqueta HTML5 audio y tener un id="beep".
Historia de usuario #27: El elemento de audio id="beep" debe ser de 1 segundo o mayor.
Historia de usuario #28: El elemento de audio con id: beep dejará de reproducirse y se reiniciará al hacer clic en el elemento con id: reset.
Puedes construir tu proyecto con usando esta plantilla CodePen y haciendo clic en Save para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
--solutions--
// solution required