Reto resuelto: Programando el Delorean de Marty McFly

Regreso al futuro

Programación

Cálculos con fechas

Fue Marty McFly quien se presentó en vivo y en directo subido a su monopatín en nuestra casa atemporal. Doc y él habían programado la máquina del tiempo pero necesitaban una pequeña funcionalidad para saber exactamente cuánto viajaban al futuro o al pasado y que os contaba en esta entrada.

Enunciado del reto:

El reto decía:

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.

En este caso, pensamos que no había mucho donde rascar, y resolvimos el reto de una única manera:

• En primer lugar definimos un array para colocar los meses en español.
• A continuación extrajimos todos los campos de las fechas del formulario.
• Convertimos los campos de fecha en un objeto de tipo Date.
• Finalmente realizamos los cálculos para saber cuántos minutos, horas, días y años había entre las dos fechas y mostramos la información.

Pero como siempre, recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

• Cómo definir un array constante de cadenas de tres caracteres.
• Cómo extraer la información de los campos de un formulario.
• Cómo transformar datos numéricos en un objeto Date.
• Cómo realizar cálculos para conocer el tiempo que transcurre entre dos fechas.
• El procedimiento de transformación de milisegundos a otras unidades de tiempo (¡son operaciones aritméticas sin trampa ni cartón!).
• Cómo mostrar la información textual en una etiqueta HTML.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo!

¿Tú cómo lo habrías hecho? ¡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…