Reto #6 Regreso al futuro

by didacticode

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Regreso al futuro</title>
        <link rel="stylesheet" type="text/css" href="Reto06_RegresoAlFuturo.css">
        <script src="Reto06_RegresoAlFuturo.js"></script>
	</head>

	<body>
        <div class="centro">
            <p class="etiqueta">PRESENT TIME</p><br/>
            <p>
            <input type="text" value="OCT" size="3" maxlength="3" class="verde" id="presenteMes"/>
            <input type="number" value="26" size="2" min="1" max="31" class="verde" id="presenteDia"/>
            <input type="number" value="1985" size="4" min="0" max="9999" class="verde" id="presenteAno"/>
            <input type="number" value="01" size="2" min="0" max="23" class="verde" id="presenteHora"/>
            <input type="number" value="21" size="2" min="0" max="59" class="verde" id="presenteMinuto"/>
            </p><br/>
            <p class="etiqueta">DESTINATION TIME</p><br/>
            <p>
            <input type="text" value="OCT" size="3" maxlength="3" class="rojo" id="destinoMes"/>
            <input type="number" value="26" size="2"  min="1" max="31" class="rojo" id="destinoDia"/>
            <input type="number" value="1985" size="4" min="0" max="9999" class="rojo" id="destinoAno"/>
            <input type="number" value="01" size="2"  min="0" max="23" class="rojo" id="destinoHora"/>
            <input type="number" value="21" size="2"  min="0" max="59" class="rojo" id="destinoMinuto"/>
            </p><br/>
            <button type="button" id="calcular">Calcular viaje</button>
            <p id="mensaje"></p>
        </div>
	</body>
</html>

CSS

@font-face {
  font-family: "Digital";
  src: url("DS-DIGI.TTF"); /* https://www.dafont.com/es/ds-digital.font */
}

body {
    background-image: url("metal.jpg");/* https://wall.alphacoders.com/big.php?i=369168&lang=Spanish */
    align-content: center;
}

p {
  font-family: "Arial", sans-serif;
  text-align: center;
}

p#mensaje, p.etiqueta{
    background-color: black;
    color: white;
}
p.etiqueta {
    display: inline-block;
    padding: 10px 60px;
}
p#mensaje{
    padding: 20px;
}
input {
  font-family: "Digital", sans-serif;
  font-size: 2em;
  background-color: black;
}
.rojo { color: red}
.verde { color: green}
div.centro{
    text-align: center;
}

JavaScript

const meses = ["ENE", "FEB", "MAR", "ABR", "MAY", "JUN", "JUL", "AGO", "SEP", "OCT", "NOV", "DIC"];

window.addEventListener("load",inicio,true);

function inicio(){
    document.getElementById("calcular").addEventListener("click", calcularFechas);
}

function calcularFechas(){
    // ¡Ojo! Los meses van del 0 al 11
    // A la hora de crear una fecha podemos pasar todas las unidades que la componen
    let fechaPresente = new Date(presenteAno.value, meses.indexOf(presenteMes.value), presenteDia.value, presenteHora.value, presenteMinuto.value, 0, 0);

    let fechaDestino = new Date(destinoAno.value, meses.indexOf(destinoMes.value), destinoDia.value, destinoHora.value, destinoMinuto.value, 0, 0);

    let milisegundosEntreFechas = fechaDestino - fechaPresente;
    //Será positivo si la fecha de destino es futura, y negativo si es pasado
    msAAnosMesesDiasHorasMinutos(milisegundosEntreFechas); //

}
function msAAnosMesesDiasHorasMinutos (milisegundosEntreFechas) {
    if (milisegundosEntreFechas===0){
        mensaje.innerHTML = "No vas a viajar en el tiempo";
    }
    else {
        // La mayor parte de las variables definidas no son necesarias si utilizamos diréctamente los cálculos
        // Se han creado porque hacen el código mucho más legible, especialmente desde el punto de vista de la formación
        const msPorMinuto = 1000 * 60; //ms que hay en un minuto
        const msPorHora = msPorMinuto * 60; //ms que hay en una hora
        const msPorDia = msPorHora * 24; //ms que hay en un día
        // No calculamos los meses porque pueden ser de 28, 30 y 31 días
        const msPorAno = msPorDia * 365; //ms que hay en un año

        // Utilizamos .abs para no tener en cuenta si el valor es positivo o negativo
        // (será negativo si viajamos al pasado y positivo si viajamos al futuro)
        let anos = Math.floor(Math.abs(milisegundosEntreFechas)/msPorAno);
        // En esta variable vamos guardando los milisegundos que nos quedan por pasar
     ...