Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Condicionales en JS — Ejemplo 1</title>
    <style>
        body  { font-family: Arial, sans-serif; padding: 20px; background: #fff; }
        .ok   { background: #d1fae5; border-left: 4px solid #059669; padding: 8px 14px; margin: 6px 0; border-radius: 0 6px 6px 0; font-size: 14px; }
        .no   { background: #fee2e2; border-left: 4px solid #dc2626; padding: 8px 14px; margin: 6px 0; border-radius: 0 6px 6px 0; font-size: 14px; color: #991b1b; }
        .info { background: #dbeafe; border-left: 4px solid #3b82f6; padding: 8px 14px; margin: 6px 0; border-radius: 0 6px 6px 0; font-size: 14px; }
        h3    { margin: 18px 0 6px; font-size: 15px; color: #333; }
        .fila { font-family: monospace; padding: 4px 0; font-size: 13px; }
    </style>
</head>
<body>

<h2>Condicionales en JS — if básico</h2>

<h3>Verificaciones básicas</h3>
  <div id="verificaciones"></div>

<h3>Truthy y Falsy</h3>
  <div id="truthy"></div>

<h3>Comparación === vs ==</h3>
  <div id="comparacion"></div>

const edad        = 20;
    const saldo       = 150.50;
    const nombre      = "Carlos";
    const temperatura = 10;
    const carrito     = ["laptop", "mouse"];

// ── Verificaciones ───────────────────────────────────────────────────
    const div = document.getElementById("verificaciones");

function mostrar(condicion, textoOk, textoNo) {
        const el = document.createElement("div");
        el.className = condicion ? "ok" : "no";
        el.textContent = condicion ? "✓ " + textoOk : "✗ " + textoNo;
        div.appendChild(el);
    }

mostrar(edad >= 18,           "Mayor de edad (" + edad + " años)", "Menor de edad");
    mostrar(saldo > 0,            "Tiene saldo: $" + saldo, "Sin saldo");
    mostrar(nombre.length > 3,    `Nombre válido: "${nombre}"`, "Nombre demasiado corto");
    mostrar(temperatura > 30,     "Hace calor", "No hace calor (" + temperatura + "°)");
    mostrar(carrito.length > 0,   "Carrito con " + carrito.length + " items", "Carrito vacío");

// ── Truthy / Falsy ────────────────────────────────────────────────────
    const divTF = document.getElementById("truthy");
    const valores = [
        [0,           "0"],
        ["",          '""'],
        [null,        "null"],
        [undefined,   "undefined"],
        [false,       "false"],
        [NaN,         "NaN"],
        [1,           "1"],
        ["hola",      '"hola"'],
        [[],          "[] (array vacío)"],
        [{},          "{} (objeto vacío)"],
    ];

valores.forEach(([val, label]) => {
        const el = document.createElement("div");
        el.className = val ? "ok" : "no";
        el.textContent = (val ? "truthy" : "falsy") + " → " + label;
        divTF.appendChild(el);
    });

// ── === vs == ─────────────────────────────────────────────────────────
    const divComp = document.getElementById("comparacion");
    const casos = [
        [`5 === "5"`, 5 === "5"],
        [`5 == "5"`,  5 == "5"],
        [`0 === false`, 0 === false],
        [`0 == false`,  0 == false],
        [`"" === false`, "" === false],
        [`"" == false`,  "" == false],
        [`null === undefined`, null === undefined],
        [`null == undefined`,  null == undefined],
    ];

casos.forEach(([expr, res]) => {
        const el = document.createElement("div");
        el.className = "info";
        el.innerHTML = `<span class="fila">${expr} → <strong>${res}</strong></span>`;
        divComp.appendChild(el);
    });
  </script>

</body>
</html>