Crear calculadora en el HTML que muestre que cantidad de tierra en litros se necesita para una maceta circular con un diámetro superior y diámetro inferior.
¡Claro que sí! Aquí te muestro cómo crear una calculadora en HTML y JavaScript que te permita calcular la cantidad de tierra en litros necesaria para una maceta circular con diámetros superior e inferior:
Primero, necesitamos crear un formulario HTML con los campos necesarios para ingresar los datos de la maceta:
```html
<form>
<label for="diametro-superior">Diámetro superior (cm): </label>
<input type="number" id="diametro-superior" name="diametro-superior" required>
<br>
<label for="diametro-inferior">Diámetro inferior (cm): </label>
<input type="number" id="diametro-inferior" name="diametro-inferior" required>
<br>
<label for="altura">Altura (cm): </label>
<input type="number" id="altura" name="altura" required>
<br>
<button type="submit" id="calcular-btn">Calcular</button>
</form>
<div id="resultado"></div>
```
Este formulario es similar al anterior, pero en lugar de tener un campo para el diámetro base y otro para el diámetro alto de la maceta, tenemos campos para el diámetro superior y el diámetro inferior.
Ahora, necesitamos una función de JavaScript que calcule la cantidad de tierra necesaria y muestre el resultado en el `div` correspondiente:
```javascript
function calcularTierraDiametros() {
// Obtenemos los valores de los campos de entrada
const diametroSuperior = document.getElementById("diametro-superior").value;
const diametroInferior = document.getElementById("diametro-inferior").value;
const altura = document.getElementById("altura").value;
// Realizamos el cálculo de la cantidad de tierra y la almacenamos en una variable
const radio = (Number(diametroSuperior) + Number(diametroInferior)) / 4;
const volumen = (Math.PI * altura * (3 * radio**2 + altura**2)) / 6;
const litrosTierra = volumen / 1000;
// Mostramos el resultado en el div correspondiente
const resultadoDiv = document.getElementById("resultado");
resultadoDiv.innerHTML = "Necesitas " + litrosTierra + " litros de tierra";
}
```
En esta función, obtenemos los valores de los campos de entrada para el diámetro superior, el diámetro inferior y la altura de la maceta. Luego, realizamos el cálculo de la cantidad de tierra necesaria y la almacenamos en una variable llamada `litrosTierra`.
Finalmente, mostramos el resultado en el `div` correspondiente, el cual tiene el identificador `resultado`.
Para hacer que la función se ejecute cuando se presione el botón de calcular, podemos agregar un evento `onclick` al botón `calcular-btn` en el archivo JavaScript:
```javascript
const calcularBtn = document.getElementById("calcular-btn");
calcularBtn.onclick = calcularTierraDiametros;
```
Con esto, la función `calcularTierraDiametros` se ejecutará cuando se presione el botón de calcular.
Espero que esta calculadora te sea útil. ¡Saludos!
