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 pies a yardas</h3>
    <form action="">
        <label for="">pie:</label>
        <input type="number" id="pie"><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 pie = parseFloat(document.getElementById('pie').value);
            let convertir = pie * 0.333333;
            document.getElementById('resultado').value = `${convertir} yd`;
        }
    </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 pies (ft) a yardas (yd). El usuario escribe una cantidad en pies, presiona el botón Convertir y el resultado aparece en la caja de texto correspondiente.

1. Campo para ingresar los pies

Este campo permite al usuario ingresar la cantidad de pies que desea convertir.

2. Botón Convertir

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

3. Botón Limpiar

Este botón borra todos los datos ingresados en el formulario.

4. Campo de resultado

Aquí se mostrará el resultado de la conversión en yardas.

5. Función JavaScript

function convertir(){
  let pie = parseFloat(document.getElementById('pie').value);
  let convertir = pie * 0.333333;
  document.getElementById('resultado').value = `${convertir} yd`;
}

La función realiza los siguientes pasos:

Obtiene el valor ingresado en el campo con id pie.
Convierte el valor a número utilizando parseFloat().
Multiplica los pies por 0.333333, ya que 1 pie equivale aproximadamente a 0.333333 yardas.
Muestra el resultado en el campo de texto agregando la unidad yd.

Ejemplo de ejecución

Dato ingresado: 9 pies

Operación:

9 × 0.333333 = 2.999997

Resultado mostrado: 2.999997 yd

Resumen

El programa recibe una cantidad en pies, la convierte a yardas mediante una multiplicación y muestra el resultado automáticamente al usuario.

Ejercicios de programación

Páginas

jueves, 18 de junio de 2026

Convertir pies a yardas en HTML y JavaScript