Reto

Forrest Gump

Javascript

Cronó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:

¡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 planteó 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! 🙂

Regreso al futuro

Programación

Cálculos con fechas

Marty McFly y Doc están a punto de probar su Delorean para viajar en el tiempo. De momento han implementado dos visores: uno con la fecha de destino y otra con la fecha actual.

El caso es que han pensado que les gustaría saber cuántos años, días, horas y minutos viajarían al pasado o al futuro a partir de los datos que metieran en el formulario. El mismo Marty se plantó ayer en nuestra casa con su monopatín volador para contarnos lo que necesitaban. El asunto viene a ser algo así:

Tenemos los dos visores de las fechas destino y presente y sus valores pueden introducirse libremente por el usuario en cada uno de los campos.
Necesitamos que, al pulsar el botón de cálculo de viaje nos diga si vamos a viajar al futuro o al pasado, y cuántos años, días, minutos y segundos vamos a desplazarnos.
Ejemplo de entrada:
En los campos de presente: OCT 26 1985 01:21
En los campos de destino: JUN 01 2020 17:00
Ejemplo de salida: Vas a viajar al futuro 34 años, 227 días, 14 horas y 39 minutos.
Nota: no necesitamos los meses porque pueden tener 28, 30 o 31 días.

Nos han facilitado el código del formulario para que no tengamos que preocuparnos de hacerlo nosotros. Tiene alguna validación sencilla en HTML5 y consideramos que no se van a meter datos erróneos. Los nombres de los meses contienen las tres primeras letras en español (ENE, FEB, MAR…).

¡Recuerda que puedes trabajar con fechas mediante el objeto Date, que almacena los milisegundos que pasan desde el 1 de enero de 1970 hasta la fecha elegida!

Tweet

Y, para no variar, Edu nos planteó alguna cuestión…

Si los meses van con letra, necesitarás algún tipo de estructura para guardarlos, ¿no? Si las fechas se almacenan en milisegundos, ¿has pensado cómo harás para transformarlos a otras unidades de tiempo? ¿Te has dado cuenta que el resultado varía si viajas al futuro o al pasado? Por cierto, ¿sabes si estará el monopatín de Marty en AliExpress?

Resignación… escuché las preguntas, anoté alguna cosa que se me ocurrió y le dije: «No sé si el patinete estará, pero la chaqueta fijo».

¿Seréis capaces de resolverlo vosotros también antes de que pasen 10 días? ¡Mucho ánimo!