1

estoy haciendo algunos ejercicios de javascript y me encontre con la siguiente consigna:

Por cada clase del programa existente, vamos a pedir: horas, minutos y segundos de cada video. Ej. Si un video dura 2 horas, 38 minutos y 20 segundos, vamos a rellenar 3 campos de texto con cada dato. al apretar el botón "Calcular tiempo total", debe mostrar en un pre-creado el tiempo total de los videos.

Mi codigo de HTML es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAREA HORAS</title>
</head>
<body>
    <h1>TAREA CALCULAS HORAS R/ARGENTINA PROGRAMA</h1>

    <form>
        <label>CLASE 1</label>
        <input type="number" placeholder="Indique las horas." id="horas-clase1">
        <input type="number" placeholder="Indique los minutos." id="minutos-clase1">
        <input type="number" placeholder="Indique los segundos." id="segundos-clase1">
    </form>
    <br>
    <form>
        <label>CLASE 2</label>
        <input type="number" placeholder="Indique las horas." id="horas-clase2">
        <input type="number" placeholder="Indique los minutos." id="minutos-clase2">
        <input type="number" placeholder="Indique los segundos." id="segundos-clase2">
    </form>
    <br>
    <form>
        <label>CLASE 3</label>
        <input type="number" placeholder="Indique las horas." id="horas-clase3">
        <input type="number" placeholder="Indique los minutos." id="minutos-clase3">
        <input type="number" placeholder="Indique los segundos." id="segundos-clase3">
    </form>
    <br>
    <form>
        <label>CLASE 4</label>
        <input type="number" placeholder="Indique las horas." id="horas-clase4">
        <input type="number" placeholder="Indique los minutos." id="minutos-clase4">
        <input type="number" placeholder="Indique los segundos." id="segundos-clase4">
    </form>
    <br>
    <form>
        <label>CLASE 5</label>
        <input type="number" placeholder="Indique las horas." id="horas-clase5">
        <input type="number" placeholder="Indique los minutos." id="minutos-clase5">
        <input type="number" placeholder="Indique los segundos." id="segundos-clase5">
    </form>
    <br>
    <button id="boton-calcular">CALCULAR!</button>
    <br>


    <div id="vacio">
        <strong>

        </strong>
    </div>
</body>

<script src="tareahoras.js"></script>
</html>

Mi codigo de JS es el siguiente:

const horasTotales = [];
const minutosTotales = [];
const segundosTotales = [];

const botonCalcular = document.querySelector("#boton-calcular")

botonCalcular.onclick = function () {
//HORAS
const horasClase1 = Number(document.querySelector("#horas-clase1").value);
horasTotales.push(horasClase1);

const horasClase2 = Number(document.querySelector("#horas-clase2").value);
horasTotales.push(horasClase2);

const horasClase3 = Number(document.querySelector("#horas-clase3").value);
horasTotales.push(horasClase3);

const horasClase4 = Number(document.querySelector("#horas-clase4").value);
horasTotales.push(horasClase4);


const horasClase5 = Number(document.querySelector("#horas-clase5").value);
horasTotales.push(horasClase5);


let totalHoras = horasTotales.reduce((a, b) => a + b, 0);  //TOTAL HORAS
                           

//MINUTOS
const minutosClase1 = Number(document.querySelector("#minutos-clase1").value);
minutosTotales.push(minutosClase1);


const minutosClase2 = Number(document.querySelector("#minutos-clase2").value);
minutosTotales.push(minutosClase2);


const minutosClase3 = Number(document.querySelector("#minutos-clase3").value);
minutosTotales.push(minutosClase3);


const minutosClase4 = Number(document.querySelector("#minutos-clase4").value);
minutosTotales.push(minutosClase4);


const minutosClase5 = Number(document.querySelector("#minutos-clase5").value);
minutosTotales.push(minutosClase5);

let totalMinutos = minutosTotales.reduce((a, b) => a + b, 0);  //TOTAL MINUTOS


//SEGUNDOS
const segundosClase1 = Number(document.querySelector("#segundos-clase1").value);
segundosTotales.push(segundosClase1);


const segundosClase2 = Number(document.querySelector("#segundos-clase2").value);
segundosTotales.push(segundosClase2);


const segundosClase3 = Number(document.querySelector("#segundos-clase3").value);
segundosTotales.push(segundosClase3);


const segundosClase4 = Number(document.querySelector("#segundos-clase4").value);
segundosTotales.push(segundosClase4);



const segundosClase5 = Number(document.querySelector("#segundos-clase5").value);
segundosTotales.push(segundosClase5);

let totalSegundos = segundosTotales.reduce((a, b) => a + b, 0);  //TOTAL SEGUNDOS


const minutosFinales = totalMinutos % 60;
console.log(minutosFinales)
const segundosFinales = totalSegundos % 60;
console.log(segundosFinales)


document.querySelector("#vacio").innerText = `El total de sus videos es de ${totalHoras} horas, ${totalMinutos} minutos y ${totalSegundos} segundos.`

}

Se me hace imposible sumar bien los segundos y minutos y no puedo encontrar la forma, me serviria muchisimo una explicacion. Desde ya muchas gracias.

1 respuesta 1

1

Se ve que casi lo tenias.

Tienes que dividir por 60 para determinar cuántos segundos son en realidad minutos (y quedarte con la parte entera) . Y también ocupar el operador resto entero '%' para determinar con cuantos segundos te quedas.

Por ejemplo, tienes 222 segundos:

  • minutos = 222 / 60 = 3.7 => parte entera => 3
  • segundos = 222 % 60 = 42

Comprobamos: 3x60 + 42 = 180 + 42 = 222

Luego esos minutos debes sumarlos a los minutos originales y volver a hacer lo mismo, pasando esta vez a las horas.

Por lo tanto al final de tu código tienes que poner algo así:

    const segundosFinales = (totalSegundos % 60);
    const minutosAdicionales = parseInt( totalSegundos / 60);
    const minutosFinales = (minutosAdicionales + totalMinutos) % 60;
    const horasAdicionales = parseInt((minutosAdicionales + totalMinutos) / 60);

    document.querySelector("#vacio").innerText = `El total de sus videos es de ${totalHoras + horasAdicionales} horas, ${minutosFinales} minutos y ${segundosFinales} segundos.`;

Dos recomendaciones adicionales:

  1. Las constates globales que tienes debes ponerlas dentro de la función onclick:
botonCalcular.onclick = function() {
const horasTotales = [];
const minutosTotales = [];
const segundosTotales = [];
//...etc

Si las tienes fuera, cada vez que presionas el botón "CALCULAR!" se vuelve a sumar sobre el resultado anterior

  1. Cada vez que tienes algo como:
    const horasClase1 = Number(document.querySelector("#horas-clase1").value);
    horasTotales.push(horasClase1);

    const horasClase2 = Number(document.querySelector("#horas-clase2").value);
    horasTotales.push(horasClase2);

    //etc...hasta horasTotales99999

Eso debería estar dentro de un for, imagina tuvieras mil parámetros, te llevaría una vida

UPDATE ( Leer con un for)

Lo más simple es colocar unas clases de css a las horas, minutos y segundos:

<input class="horas" type="number" placeholder="Indique las horas." id="horas-clase1">
<input class="minutos" type="number" placeholder="Indique los minutos." id="minutos-clase1" >
<input class="segundos" type="number" placeholder="Indique los segundos." id="segundos-clase1" >

//ETC...resto de los inputs
let horas=0;
let minutos=0;
let segundos=0;
document.querySelectorAll(".horas").forEach(
    (el) => {
        horas += Number(el.value);
    });

Luego haces lo mismo para minutos y segundos.

Update 3 (for a función)

Otra mejora es crear una función

function GetSumaValores(clase) {
    let suma = 0;
    document.querySelectorAll(clase).forEach(
    (el) => {
        suma += Number(el.value);
    });
    return suma;
}

Y luego la llamas:

let horas = GetSumaValores(".horas");
let minutos = GetSumaValores(".minutos");
let segundos = GetSumaValores(".segundos");
3
  • Sos un crack, me salvaste y lo entendi poerfecto. Voy a enroscarme para meterlo dentro de un for.
    – pipe
    Commented el 8 sept. 2022 a las 2:05
  • @PipePouyssegur Actualicé la respuesta, para ayudarte un poco con lo que te comentaba del for
    – Yussef
    Commented el 8 sept. 2022 a las 2:32
  • tremendo... super avanazado y eficiente ese codigo. muchas gracias te mando un saludo.
    – pipe
    Commented el 8 sept. 2022 a las 17:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.