<div style="background-color: #f0f8ff; padding: 15px; border-radius: 8px;">
  <label for="inputA">Introduce el precio de un refresco:</label>
  <input type="number" id="inputA" step="0.01" min="0" placeholder="Ejemplo: 2.00"><br><br>
  <label for="inputB">Introduce el valor del presupuesto:</label>
  <input type="number" id="inputB" step="1" min="10" placeholder="Ejemplo: 75"><br>
  
  <button onclick="calcular()">Calcular</button>

  <p id="resultadoProporción"></p>
  <p id="resultadoEntero"></p>
</div>

<script>
function calcular() {
  const a = parseFloat(document.getElementById("inputA").value);
  const b = parseFloat(document.getElementById("inputB").value);

  if (isNaN(a) || isNaN(b) || a <= 0 || b <= 0) {
    document.getElementById("resultadoProporción").textContent = "Introduce valores válidos para las variables.";
    document.getElementById("resultadoEntero").textContent = "";
    return;
  }

  const proporción = b / a;
  if (proporción < 1) {
    document.getElementById("resultadoProporción").textContent = "No se puede comprar nada.";
    document.getElementById("resultadoEntero").textContent = "";
  } else {
    document.getElementById("resultadoProporción").textContent = `Cociente = ${proporción.toFixed(2)}`;
    document.getElementById("resultadoEntero").textContent = `Puedes comprar: ${Math.floor(proporción)} refrescos`;
  }
}
</script>