<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Bucles en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-loop { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input[type="number"] { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 8px 0 14px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .lista-resultados { background: #f1f5f9; border-radius: 6px; padding: 12px 20px; font-family: monospace; font-size: 0.95rem; }
  </style>
</head>
<body>

  <div class="card-loop">
    <h3 style="margin-top: 0; color: #0f172a;">Generador con Bucle for</h3>

    <label for="numero-tabla">Número base:</label>
    <input type="number" id="numero-tabla" min="1" max="20" value="7">

    <button onclick="generarTabla()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Calcular con Bucle &raquo;
    </button>

    <div style="margin-top: 15px;">
      <strong>Resultado del ciclo:</strong>
      <div id="salida-bucle" class="lista-resultados"></div>
    </div>

    <script>
      function generarTabla() {
        const base = Number(document.getElementById('numero-tabla').value);
        let lineasHtml = "";

        // Bucle for tradicional de 1 a 10
        for (let i = 1; i <= 10; i++) {
          const resultado = base * i;
          lineasHtml += `${base} &times; ${i} = <strong>${resultado}</strong><br>`;
        }

        document.getElementById('salida-bucle').innerHTML = lineasHtml;
      }

      generarTabla();
    </script>
  </div>

</body>
</html>