Módulo 8 - Ejercicio P2P obligatorio

Explicación de la tarea

Añadir al cronómetro con memoria una lista debajo de los botones, que muestre los instantes en que el cronómetro ha parado de contar. La lista deberá vaciarse con el botón de inicializar del cronómetro. La lista deberá guardarse además en una variable de localStorage, para que los valores se guarden entre invocaciones sucesivas.

Sugerencia: añadir un bloque div vacio debajo de los botones donde se guarden los instantes de parada como líneas HTML separadas por br. En cada parada se añadirá una nueva línea.

Modificar además lo siguiente:

La respuesta al botón de inicializar, para no inicializar si se pulsa mientras el cronómetro está en marcha. Se sugiere comprobar “t === undefined” antes de inicializar.
Añadir los eventos tactiles tap y swipe sobre el body del cronómetro, para que las operaciones parar/arrancar e inicializar se puedan hacer con tap y swipe respectivamente.
Añadir una imagen de fondo con una esfera de cronómetro a la caja donde está el contador y posicionar el contador en la parte de la imagen donde estaría la cuenta en uno real, de forma que se visualice con más realismo. Se puede utilizar la imagen de cronómetro que se suministra con los ejemplos del módulo o buscar una en Internet. La lista de paradas estará debajo de la esfera.
Alojar el script como un recurso público en un servidor en la nube para que pueda accederse por cualquier usuario desde cualquier navegador.

Solución

See the Pen Crono táctil con historial by Alberto Marín (@albertomarin) on CodePen.