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.