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 metros cúbicos a litros</h3>
    <form action="">
        <label for="">metros cúbicos:</label>
        <input type="number" id="m3"><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 m3 = parseFloat(document.getElementById('m3').value);
            let convertir = m3 * 1000;
            document.getElementById('resultado').value = `${convertir} l`;
        }
    </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:

1. Declaración del documento

<!DOCTYPE html>

Indica al navegador que el documento está escrito en HTML5, permitiendo interpretar correctamente todas las etiquetas.

2. Etiqueta HTML

Es la etiqueta principal del documento. El atributo lang="es" indica que la página está escrita en español.

3. Sección <head>

charset="UTF-8": Permite mostrar correctamente letras, acentos y símbolos.
X-UA-Compatible: Hace que Internet Explorer utilice su versión más reciente.
viewport: Permite que la página sea adaptable a dispositivos móviles.
title: Define el nombre que aparece en la pestaña del navegador.

4. Título del ejercicio

<h3>Convertir metros cúbicos a litros</h3>

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

5. Formulario

Agrupa todos los controles del ejercicio, como las cajas de texto y los botones.

6. Etiqueta del dato

<label>metros cúbicos:</label>

Indica al usuario que debe ingresar la cantidad de metros cúbicos.

7. Caja de entrada

type="number": Solo permite ingresar números.
id="m3": Identifica la caja para que JavaScript pueda acceder a ella.

8. Botón Convertir

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

9. Botón Limpiar

Borra todos los datos ingresados en el formulario.

10. Caja de resultado

Muestra el resultado de la conversión realizada.

11. Función convertir()

function convertir(){ }

Esta función contiene todas las instrucciones necesarias para realizar la conversión de metros cúbicos a litros.

12. Obtener el valor ingresado

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

getElementById('m3') busca la caja de texto.
.value obtiene el valor escrito.
parseFloat() convierte el texto en un número decimal.

13. Realizar la conversión

let convertir = m3 * 1000;

Multiplica el valor ingresado por 1000, ya que un metro cúbico equivale a mil litros.

1 m³ = 1000 litros

14. Mostrar el resultado

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

Coloca el resultado de la conversión dentro de la caja de texto con el identificador resultado y agrega la unidad l (litros).

15. Resumen del funcionamiento

El usuario escribe la cantidad de metros cúbicos.
Hace clic en el botón Convertir.
JavaScript obtiene el número ingresado.
Multiplica ese número por 1000.
El resultado se muestra automáticamente en litros.

Litros = Metros cúbicos × 1000

Ejercicios de programación

Páginas

sábado, 20 de junio de 2026

Convertir metros cúbicos a litros en HTML y JavaScript