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…
…
¿Qué pasó, José Julio?
Qué raro. Acabo de probar a meter código y sí me funciona correctamente. Miraré a ver si es algún tema de seguridad… y sobre todo, estoy mirando una alternativa a lo que comentamos el otro día…
Forbidden
You don’t have permission to access this resource.
Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.
¿Dónde te sale ese error?
En Chromium y en Firefox
¿Pero en qué página? Yo estoy entrando con Chrome y Firefox y no me da ningún error… ¿no será la caché? ¿Y cómo estás escribiendo entonces los comentarios?
¡Jejejeje! Estas cosas pasan. Hay que fijarse bien en los mensajes de la consola: a veces nos obcecamos pensando que es otra cosa y nos lo está diciendo claramente.
¡Venga, muchísimo ánimo que estoy segura de que no te va a volver a pasar! 😉
Ocurre en esta página cuando le doy a “Publicar comentario” y parece que solo ocurre cuando intento enviar código.
¡Hola de nuevo, Federico!
A ver, este código tiene varios errores. En principio, hay dos paréntesis sin cerrar en los últimos addEventListener.
Y luego el innerHTML ese que me comentas que no encuentra “segundos”, es porque al poner el id en la etiqueta HTML has puesto dos puntos en lugar de un igual. El código está un poco lioso: mezclas sentencias sueltas con funciones en la mitad, pones indentaciones donde no las necesitas… intenta seguir una línea siempre igual: funciones arriba, funciones abajo… pero no mezcles tanto porque se hace bastante difícil de seguir 😉
¡Hale, ya tienes tarea! ¡Un saludo y ánimo!
Hola, Ada. Dejo por este medio el codepen de mi “intento” de resolución del reto. Me salió un error con el innerHTML pero no sé por qué, me dice que no se puede acceder porque según la variable es nula y se supone que la declaré de forma global.
https://codepen.io/Scipio14/pen/WNrGEJP
Hola, Ada, muchísimas gracias. No me puedo creer que al final el error del listener haya sido que no reconociera el id porque no le puse el igual. Estaba como loco con ese mensaje que me aparecía en la consola de que no estaba definido que luego continué con el código tal y como lo tenía planteado pero creo que me afectó ese error… Revisando el código veo que me da dolor de cabeza, por lo que es cierto que debo procurar ser más ordenado en el código. Es una lástima que los errores del css no aparezcan en la consola.
Muchas gracias por tus consejos.