Temporizador de productividad personalizado, también conocido como temporizador de técnica Pomodoro. Esta técnica implica alternar entre períodos de trabajo (llamados "sesiones") y períodos de descanso (llamados "pausas" o "breaks") para aumentar la productividad y el enfoque.
La aplicación permite al usuario ver y personalizar la duración de estas sesiones y pausas. Los ajustes por defecto son una sesión de trabajo de 25 minutos y una pausa de 5 minutos. La interfaz de la aplicación permite al usuario aumentar o disminuir la duración de las sesiones y las pausas, con límites entre 1 y 60 minutos para evitar que el usuario establezca tiempos de trabajo o descanso irrazonables.
Cuenta con un cronómetro visual que muestra el tiempo restante en el actual periodo de trabajo o descanso. El cronómetro puede iniciarse, pausarse y reiniciarse según las necesidades del usuario. Al final de cada periodo, el cronómetro reinicia automáticamente el tiempo correspondiente al siguiente periodo (trabajo o descanso), alternando entre ellos.
Cuando un período se agota, la aplicación emite un sonido para alertar al usuario de que es hora de comenzar el siguiente período. Todo en esta aplicación está diseñado para mantener al usuario enfocado y productivo, proporcionando un marco de tiempo estructurado y señales auditivas para indicar el inicio y el fin de cada período.
Historias de usuario:
- Ver un elemento con id="break-label" que contiene una cadena (por ejemplo: "Break Length").
- Ver un elemento con id="session-label" que contiene una cadena (por ejemplo: "Session Length").
- Ver dos elementos cliqueables con los siguientes IDs: id="break-decrement" y id="session-decrement".
- Ver dos elementos cliqueables con los siguientes IDs: id="break-increment" y id="session-increment".
- Ver un elemento con el correspondiente id="break-length" que por defecto (al cargarse) muestra el valor 5.
- Ver un elemento con el correspondiente id="session-length", que por defecto muestra el valor 25.
- Ver un elemento con el correspondiente id="timer-label", que contiene una cadena indicando si la sesión está inicializada (por ejemplo: "Session").
- 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).
- Ver un elemento cliqueable con el correspondiente id="start_stop".
- Ver un elemento cliqueable con el correspondiente id="reset".
- Al hacer 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.
- Al hacer clic en el elemento con id: break-decrement, el valor en id="break-length" se reduce en 1, y puedo ver el valor actualizado.
- Al hacer clic en el elemento con id: break-increment, el valor en id="break-length" se incrementa en 1 y puedo ver el valor actualizado.
- Al hacer clic en el elemento con id: session-decrement, el valor en id="session-length" se reduce en 1 y puedo ver el valor actualizado.
- Al hacer clic en el elemento con id: session-increment, el valor en id="session-length" se incrementa en 1 y puedo ver el valor actualizado.
- No poder establecer una duración de la sesión o pausa < = 0.
- No poder establecer una duración de la sesión o pausa > 60.
- 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.
- 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).
- Si el temporizador se está ejecutando y hago clic en el elemento id="start_stop", la cuenta atrás debe pausarse.
- 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.
- 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.
- 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".
- 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.
- 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".
- 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".
- El elemento de audio id="beep" debe ser de 1 segundo o mayor.
- El elemento de audio con id: beep dejará de reproducirse y se reiniciará al hacer clic en el elemento con id: reset.