números

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:

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…

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”.

¿Tú cómo lo harías? ¡Deja tus ideas 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…

Azul oscuro casi negro

Programación

Cambio de bases

Daniel Sánchez Arévalo, director de AzulOscuroCasiNegro, quiere hacer un remake de su película del 2006. Pero necesita darle un toque un poco más moderno y lo primero que ha pensado es cambiarle el título de la película por algo más “digital”. De ahí el nombre de este reto.

Al final se lió la manta a la cabeza y el remake no va a tener nada que ver. Trata de códigos, colores… y ahí entramos nosotros en el juego. Nos envió un mensaje que decía así:

Hola, Ada:
Necesito un programa sencillito que transforme un código en RGB en hexadecimal. La idea es que, a partir de tres variables (rojo, verde y azul) devuelva el código de color en hexadecimal.
Ejemplo de entrada: 0, 36, 255
Ejemplo de salida: #0024ff

Hay varias maneras de representar un color digital. En todas ellas necesitamos “cuánto” rojo, verde y azul (RGB) hay en la composición del color final.

Podemos hacerlo con tres números del 0 al 255, también llamado representación RGB; por ejemplo: 255, 35, 123.

También podemos transformar cada uno de esos números en su equivalente en hexadecimal (de 00 a FF); por ejemplo, #FF237B, de manera que en hexadecimal, FF es el 255, 23 es el 36 y 7B es el 123.

Y aquí tenemos al cansino de Edu preguntando…

Si las tres variables necesitan el mismo proceso, podrías crear una función, ¿no? ¿Sabes que en Javascript hay una función para transformar las bases? Tendrás que poner las letras en mayúsculas, ¿no?

“Venga, Edu, que este reto está tirao, no me líes“, le dije. Aún así, trataré de pensar alguna alternativa a lo que tengo en mi cabeza…

¿Tú cómo lo harías? ¡Deja tus ideas 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…