8.9 KiB
8.9 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7158d8c442eddfaeb5bd0f | Build a Pomodoro Clock | true | 3 | Construir un reloj pomodoro |
Description
id="break-label"
que contiene una cadena (por ejemplo, "Break Length"). Historia de usuario n. ° 2: Puedo ver un elemento con id="session-label"
que contiene una cadena (por ejemplo, "Session Length"). Historia de usuario n. ° 3: Puedo ver dos elementos seleccionables con las ID correspondientes: id="break-decrement"
e id="session-decrement"
. Historia de usuario n. ° 4: Puedo ver dos elementos seleccionables con las ID correspondientes: id="break-increment"
e id="session-increment"
. Historia de usuario n. ° 5: Puedo ver un elemento con un id="break-length"
correspondiente id="break-length"
, que de manera predeterminada (en carga) muestra un valor de 5. Historia de usuario n. ° 6: puedo ver un elemento con un id="session-length"
correspondiente id="session-length"
, que por defecto muestra un valor de 25. Historia de usuario n. ° 7: Puedo ver un elemento con una id="timer-label"
correspondiente id="timer-label"
, que contiene una cadena que indica que una sesión está inicializada (por ejemplo," Sesión ") . Historia de usuario n. ° 8: Puedo ver un elemento con id="time-left"
correspondiente id="time-left"
. NOTA: En pausa o en ejecución, el valor en este campo siempre debe mostrarse en formato mm:ss
(es decir, 25:00). Historia de usuario n. ° 9: Puedo ver un elemento seleccionable con un id="start_stop"
correspondiente id="start_stop"
. Historia de usuario n. ° 10: Puedo ver un elemento seleccionable con un id="reset"
correspondiente id="reset"
. Historia de usuario n. ° 11: Cuando hago clic en el elemento con el ID de reset
, se debe detener cualquier temporizador en ejecución, el valor dentro de id="break-length"
debe regresar a 5
, el valor dentro de id="session-length"
debe regresar a 25, y el elemento con id="time-left"
debería restablecerse a su estado predeterminado. Historia de usuario n. ° 12: Cuando hago clic en el elemento con el id de break-decrement
, el valor dentro de id="break-length"
reduce en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 13: Cuando hago clic en el elemento con la identificación de break-increment
de break-increment
, el valor dentro de id="break-length"
aumenta en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 14: Cuando hago clic en el elemento con el id de session-decrement
de session-decrement
, el valor dentro de id="session-length"
reduce en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 15: Cuando hago clic en el elemento con el id de session-increment
de session-increment
, el valor dentro de id="session-length"
incrementa en un valor de 1, y puedo ver el valor actualizado. Historia de usuario n. ° 16: No debería poder establecer una sesión o una duración de descanso en <= 0. Historia de usuario n. ° 17: No debería poder establecer una sesión o duración de desconexión en> 60. Historia de usuario n. ° 18: Cuando primero haga clic en el elemento con id="start_stop"
, el temporizador debe comenzar a ejecutarse desde el valor actualmente mostrado en id="session-length"
, incluso si el valor se ha incrementado o disminuido desde el valor original de 25. User Story # 19 : Si el temporizador se está ejecutando, el elemento con el id de time-left
debería mostrar el tiempo restante en formato mm:ss
(disminuyendo en un valor de 1 y actualizando la pantalla cada 1000 ms). Historia de usuario n. ° 20: Si el temporizador se está ejecutando y hago clic en el elemento con id="start_stop"
, la cuenta regresiva debe id="start_stop"
. Historia de usuario n. ° 21: si el temporizador está en pausa y hago clic en el elemento con id="start_stop"
, la cuenta regresiva debe reanudarse desde el punto en que se pausó. Historia de usuario n. ° 22: cuando la cuenta regresiva de la sesión llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), y comienza una nueva cuenta regresiva, el elemento con el id de timer-label
del timer-label
debe mostrar una cadena que indica que ha comenzado una ruptura. Historia de usuario n. ° 23: cuando la cuenta regresiva de la sesión llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe comenzar una nueva cuenta regresiva de receso, contando desde el valor que se muestra actualmente en el elemento id="break-length"
. Historia de usuario n. ° 24: Cuando una cuenta regresiva de ruptura llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), y comienza una nueva cuenta regresiva, el elemento con el id de timer-label
del timer-label
debe mostrar una cadena que indica que la sesión ha comenzado. Historia de usuario n. ° 25: cuando una cuenta regresiva de interrupción llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe comenzar una nueva cuenta regresiva de la sesión, contando desde el valor que se muestra actualmente en el elemento id="session-length"
. Historia de usuario n. ° 26: cuando una cuenta regresiva llega a cero (NOTA: el temporizador DEBE alcanzar las 00:00), debe reproducirse un sonido que indique que el tiempo ha transcurrido. Esto debe utilizar una etiqueta de audio
HTML5 y tener un id="beep"
correspondiente id="beep"
. Historia de usuario # 27: El elemento de audio con id="beep"
debe ser de 1 segundo o más. Historia de usuario n. ° 28: el elemento de audio con id de beep
debe dejar de reproducirse y rebobinarse al principio cuando se hace clic en el elemento con el id de reset
. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required