Regreso al futuro
ProgramaciónCá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!
Código fuente de la solución
[/not_logged_in]
¿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…
