<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Operadores de Comparación en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-comp { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .resultado-caja { background: #f1f5f9; border-left: 4px solid #0284c7; padding: 12px; margin-top: 15px; border-radius: 4px; }
    .btn { background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
  </style>
</head>
<body>

  <div class="card-comp">
    <h3 style="margin-top: 0; color: #0f172a;">Calculadora de Comparación</h3>
    <p>Vamos a comparar el número <code>10</code> contra el texto <code>"10"</code>:</p>

    <button class="btn" onclick="ejecutarComparacion()">Evaluar Operadores</button>

    <div id="resultado" class="resultado-caja">
      Presiona el botón para ejecutar la prueba...
    </div>

    <script>
      function ejecutarComparacion() {
        const num = 10;
        const str = "10";

        const resDebil = (num == str);
        const resEstricto = (num === str);

        document.getElementById('resultado').innerHTML = `
          <strong>Resultados:</strong><br>
          • Débil: <code>10 == "10"</code> &rarr; <strong>${resDebil}</strong> (hizo conversión automática)<br>
          • Estricto: <code>10 === "10"</code> &rarr; <strong style="color: #ef4444;">${resEstricto}</strong> (detectó que son tipos diferentes)<br>
          <br>
          <small>💡 <em>Conclusión: Usa siempre <code>===</code> para evitar bugs inesperados.</em></small>
        `;
      }
    </script>
  </div>

</body>
</html>