Código del ejercicio:

<!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>Ejercicio HTML y JavaScript</title>
</head>
<body>
    <h3>Convertir horas a minutos</h3>
    <form action="">
        <label for="">hora:</label>
        <input type="number" id="hora"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let hora = parseFloat(document.getElementById('hora').value);
            let convertir = hora * 60; 
            document.getElementById('resultado').value = `${convertir} min`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<h3></h3> --> representa un encabezado de nivel 3.
<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
function --> es un bloque de código diseñado para realizar una tarea en particular.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.

Explicación del Código:

Este programa permite convertir una cantidad de horas a minutos utilizando HTML y JavaScript. El usuario ingresa un número de horas, presiona el botón Convertir y el sistema muestra el resultado en minutos.

1. Título del ejercicio

<h3>Convertir horas a minutos</h3>

Muestra el nombre del ejercicio en la página.

2. Campo para ingresar las horas

label: Muestra el texto "hora:".
input type="number": Permite ingresar solamente números.
id="hora": Identifica el campo para usarlo desde JavaScript.

3. Botón Convertir

Cuando el usuario hace clic en este botón se ejecuta la función convertir().

4. Botón Limpiar

Borra los datos ingresados en el formulario.

5. Campo para mostrar el resultado

<label>resultado:</label>
<input type="text" id="resultado">

Muestra el resultado de la conversión realizada.

6. Función JavaScript

function convertir(){
  let hora = parseFloat(document.getElementById('hora').value);
  let convertir = hora * 60;
  document.getElementById('resultado').value = `${convertir} min`;
}

Explicación línea por línea

parseFloat(...) obtiene el valor escrito por el usuario y lo convierte en un número decimal.
hora * 60 multiplica la cantidad de horas por 60, ya que una hora equivale a 60 minutos.
document.getElementById('resultado').value coloca el resultado dentro del campo de texto.
${convertir} min agrega la palabra "min" para indicar que el resultado está expresado en minutos.

Ejemplo de ejecución

Si el usuario ingresa:

Hora = 3

El programa realiza el siguiente cálculo:

3 × 60 = 180

Resultado mostrado:

180 min

Resumen

El programa solicita una cantidad de horas, la multiplica por 60 y muestra el equivalente en minutos. Todo el proceso se realiza mediante una función JavaScript que se ejecuta al presionar el botón Convertir.

Ejercicios de programación

Páginas

martes, 16 de junio de 2026

Convertir horas a minutos en HTML y JavaScript