Forrest Gump
JavascriptCronómetro avanzado
“Aquel día, sin ninguna razón en particular, decidí salir a correr. Corrí hasta el final del camino, y cuando llegué, pensé que tal vez podía correr hasta el final del pueblo. Y cuando llegué, pensé que tal vez podía correr hasta el condado de Greenbow. Noté que si había llegado tan lejos, tal vez podía correr a través del gran estado de Alabama. Corrí derecho hasta el océano. Y cuando llegué, noté que ya había llegado lejos, y que tal vez debía dar la vuelta y continuar corriendo. Y cuando llegué al otro océano, noté que debía dar la vuelta y continuar corriendo. Cuando tenía sueño, dormía. Cuando tenía hambre, comía. Cuando debía… tú sabes, iba.”
Forrest Gump se ha liado la manta a la cabeza y se ha puesto a correr sin parar de costa a costa. Pero como todo el mundo, tiene necesidades: comer, dormir… y lo que tú sabes. Por eso quiere controlar qué tiempo está realmente corriendo, y ha pensado hacerlo con un cronómetro insertado en una página web.
Desde Alabama nos llegó esta petición que me leyó Edu con mucha ilusión porque había pensado que no tenía mejor que hacer que acompañar a Forrest en su carrera:
Ada y Edu:
Hola, soy Forrest, Forrest Gump. Mi mamá me ha dicho que os escriba para pediros que me hagáis un cronómetro para saber cuánto corro. Yo le he dicho que no necesito saberlo porque me da igual, pero ha insistido así que os lo digo.
Quiero que el cronómetro tenga un botón para arrancarlo, otro para pausarlo, otro para pararlo y otro para ponerlo a cero. Como todos los cronómetros. Y que cuando lo arranque y lo pause me muestre una línea en la página para saber en qué momento lo he pausado y en qué momento lo he vuelto a arrancar. Si paro y reinicio debe borrarse el registro de la página. Nada más. Gracias.
¡Interesante reto! Solamente necesitábamos trabajar con las funciones de tiempo del objeto window… ¿sólo? Quizá también necesitaremos hacer algún que otro cálculo… Os dejo un par de lecciones que os vendrán bien:
Javascript – #1.07. Operadores aritméticos
Javascript – #2.16. Objetos del navegador (BOM). Window IV. Instrucciones de tiempo
¡Recuerda! La diferencia entre setTimeout y setInterval es que la segunda permite repetir una función en un intervalo de tiempo.
Tweet
Como siempre, Edu me planteó algunas cuestiones que tendríamos que tener en cuenta.
Para arrancar y parar funciones, ¿necesitarás asociar un evento de tiempo a una variable, no? ¿Si vas a trabajar con unidades de tiempo y todo se mide en milisegundos, deberás pasarlos a horas, minutos, segundos… ¿verdad? ¡No te olvides de poner el 0 delante de los minutos y los segundos! Oye, que me voy con Forrest de viaje por EEUU… ¡no me esperes despierta!
Anoté todas las cuestiones que me dijo Edu y me puse manos a la obra. ¿Te animas a hacerlo conmigo? ¡Así podrás poner en práctica los eventos de tiempo de Javascript! 🙂
¿Tú cómo lo harías? ¡Espero tus propuestas en los comentarios!
Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…
