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 minutos en horas</h3>
    <form action="">
        <label for="">minuto:</label>
        <input type="number" id="minuto"><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 minuto = parseFloat(document.getElementById('minuto').value);
            let resultado = (minuto * 1) / 60;
            document.getElementById('resultado').value = `${resultado} h`;
        }
    </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.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
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 ingresar una cantidad de minutos y convertirlos automáticamente a horas utilizando HTML para la interfaz y JavaScript para realizar el cálculo.

1. Declaración del documento HTML


<!DOCTYPE html>

Indica que el documento está escrito en HTML5. Esto permite que el navegador interprete correctamente la página.

2. Etiqueta HTML


<html lang="es">

La etiqueta <html> contiene todo el contenido de la página. El atributo lang="es" indica que el idioma es español.

3. Sección <head>


<meta charset="UTF-8">

Permite mostrar correctamente letras, tildes y caracteres especiales.


<meta http-equiv="X-UA-Compatible" content="IE=edge">

Hace que el navegador utilice su versión más moderna para mostrar la página.


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hace que la página sea adaptable a celulares, tabletas y computadoras.


<title>Ejercicio HTML y JavaScript</title>

Define el nombre que aparece en la pestaña del navegador.

4. Título del ejercicio


<h3>Convertir minutos en horas</h3>

Muestra el título del ejercicio en la página.

5. Formulario


<form>
...
</form>

Agrupa todos los controles que utiliza el programa.

6. Etiqueta y caja para ingresar minutos


<label>minuto:</label>

Muestra el texto que indica al usuario qué dato debe ingresar.


<input type="number" id="minuto">

type="number" permite ingresar únicamente números.
id="minuto" identifica la caja para que JavaScript pueda obtener su valor.

7. Botón Convertir


<input type="button" value="Convertir" onclick="convertir()">

type="button" crea un botón.
value="Convertir" es el texto que aparece en el botón.
onclick="convertir()" ejecuta la función convertir() cuando el usuario hace clic.

8. Botón Limpiar


<input type="reset" value="Limpiar">

Borra los datos escritos en el formulario y deja las cajas vacías.

9. Caja de resultado


<input type="text" id="resultado">

Aquí se muestra el resultado de la conversión de minutos a horas.

10. Función convertir()


function convertir(){

}

La función se ejecuta cuando el usuario presiona el botón Convertir. Dentro de ella se realiza todo el proceso de conversión.

11. Leer el valor ingresado


let minuto = parseFloat(document.getElementById('minuto').value);

document.getElementById('minuto') busca la caja de texto.
.value obtiene el número escrito por el usuario.
parseFloat() convierte ese dato en un número decimal.
let minuto guarda el valor en una variable llamada minuto.

12. Realizar la conversión


let resultado = (minuto * 1) / 60;

Convierte los minutos en horas dividiendo los minutos entre 60. La multiplicación por 1 no cambia el resultado y podría omitirse.

Fórmula utilizada:


Horas = Minutos / 60

Ejemplo:

60 minutos = 1 hora.
90 minutos = 1.5 horas.
120 minutos = 2 horas.

13. Mostrar el resultado


document.getElementById('resultado').value = `${resultado} h`;

Busca la caja de resultado.
Coloca el valor calculado.
Agrega la letra h para indicar que el resultado está expresado en horas.

Resumen del funcionamiento

El usuario escribe la cantidad de minutos.
Hace clic en Convertir.
JavaScript obtiene el número ingresado.
Divide los minutos entre 60.
El resultado se muestra en la caja correspondiente acompañado de la letra h.

Ejercicios de programación

Páginas

lunes, 22 de junio de 2026

Convertir minutos en horas en HTML y JavaScript