Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Condicionales en JS — Ejemplo 3</title>
    <style>
        body  { font-family: Arial, sans-serif; padding: 20px; background: #fff; max-width: 650px; }
        h3    { margin: 20px 0 8px; font-size: 15px; color: #333; }
        table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
        th    { background: #F7DF1E; color: #333; padding: 8px 12px; text-align: left; font-size: 13px; }
        td    { padding: 8px 12px; border-bottom: 1px solid #eee; font-size: 13px; }
        td:first-child { font-family: monospace; color: #555; }
        td:last-child  { font-weight: bold; }
        .ok  { color: #059669; }
        .mal { color: #dc2626; }
        .bloque { border-left: 4px solid #F7DF1E; background: #fffde7; padding: 10px 14px; margin: 6px 0; border-radius: 0 6px 6px 0; font-size: 14px; font-family: monospace; }
    </style>
</head>
<body>

<h2>Condicionales — Ternario y operadores lógicos</h2>

<h3>Operador ternario</h3>
  <table id="tabla-ternario"></table>

<h3>Operadores lógicos — && y ||</h3>
  <table id="tabla-logicos"></table>

<h3>?? — Nullish coalescing (valores por defecto)</h3>
  <table id="tabla-nullish"></table>

<h3>Casos prácticos combinados</h3>
  <div id="practicos"></div>

// ── Ternario ──────────────────────────────────────────────────────────
    const edad     = 20;
    const precio   = 1200;
    const stock    = 0;
    const usuario  = "Ana";

const tablaT = document.getElementById("tabla-ternario");
    tablaT.innerHTML = `<tr><th>Expresión</th><th>Resultado</th></tr>`;

const filaT = (expr, res) =>
        `<tr><td>${expr}</td><td>${res}</td></tr>`;

tablaT.innerHTML += filaT(
        `edad >= 18 ? "mayor" : "menor"`,
        edad >= 18 ? "mayor" : "menor"
    );
    tablaT.innerHTML += filaT(
        `stock > 0 ? "Disponible" : "Sin stock"`,
        stock > 0 ? "Disponible" : `<span class="mal">Sin stock</span>`
    );
    tablaT.innerHTML += filaT(
        `precio > 500 ? 0.20 : 0.10  (descuento)`,
        `${precio > 500 ? 0.20 : 0.10} (${precio > 500 ? 20 : 10}%)`
    );
    const precioFinal = precio * (1 - (precio > 500 ? 0.20 : 0.10));
    tablaT.innerHTML += filaT(
        `precio $${precio} con descuento`,
        `$${precioFinal.toFixed(2)}`
    );
    tablaT.innerHTML += filaT(
        `\`Hola \${usuario || "Anónimo"}\``,
        `Hola ${usuario || "Anónimo"}`
    );

// ── && y || ───────────────────────────────────────────────────────────
    const logueado   = true;
    const esAdmin    = false;
    const nombre     = "";
    const ciudad     = "Córdoba";

const tablaL = document.getElementById("tabla-logicos");
    tablaL.innerHTML = `<tr><th>Expresión</th><th>Resultado</th></tr>`;

const filaL = (expr, res) =>
        `<tr><td>${expr}</td><td>${res}</td></tr>`;

tablaL.innerHTML += filaL(`logueado && esAdmin`,      String(logueado && esAdmin));
    tablaL.innerHTML += filaL(`logueado || esAdmin`,      String(logueado || esAdmin));
    tablaL.innerHTML += filaL(`!logueado`,                String(!logueado));
    tablaL.innerHTML += filaL(`logueado && "Bienvenido"`, String(logueado && "Bienvenido"));
    tablaL.innerHTML += filaL(`esAdmin && "Panel admin"`, String(esAdmin && "Panel admin"));
    tablaL.innerHTML += filaL(`nombre || "Anónimo"`,      String(nombre || "Anónimo"));
    tablaL.innerHTML += filaL(`ciudad || "Sin ciudad"`,   String(ciudad || "Sin ciudad"));

// ── ?? Nullish ─────────────────────────────────────────────────────────
    const tablaNull = document.getElementById("tabla-nullish");
    tablaNull.innerHTML = `<tr><th>Expresión</th><th>Con ||</th><th>Con ??</th></tr>`;

const casosNull = [
        ["null",      null],
        ["undefined", undefined],
        ['""',        ""],
        ["0",         0],
        ["false",     false],
        ['"texto"',   "texto"],
    ];

casosNull.forEach(([label, val]) => {
        const conOr  = String(val || "defecto");
        const conNull = String(val ?? "defecto");
        const distintos = conOr !== conNull;
        tablaNull.innerHTML +=
            `<tr>
                <td>${label}</td>
                <td>${conOr}</td>
                <td class="${distintos ? "ok" : ""}">${conNull}${distintos ? " ←" : ""}</td>
            </tr>`;
    });

// ── Casos prácticos ───────────────────────────────────────────────────
    const div = document.getElementById("practicos");

// 1. Acceso a usuario
    const user = { nombre: "Ana", rol: "admin" };
    const bienvenida = user
        ? `${user.nombre} (${user.rol})`
        : "Invitado";
    div.innerHTML += `<div class="bloque">Usuario: ${bienvenida}</div>`;

// 2. Precio con descuento y texto
    const p = 850;
    const desc = p > 500 ? 0.15 : 0;
    const pFinal = p * (1 - desc);
    const textoDesc = desc > 0 ? ` (${desc * 100}% off)` : "";
    div.innerHTML += `<div class="bloque">Precio: $${p}${textoDesc} → $${pFinal.toFixed(2)}</div>`;

// 3. Validación rápida de nombre
    const inputs = ["Ana", "", "  ", "J", "Carlos López"];
    inputs.forEach(inp => {
        const limpio = inp.trim();
        const ok = limpio.length >= 2;
        div.innerHTML +=
            `<div class="bloque">"${inp}" → ${ok
                ? `<span class="ok">✓ válido</span>`
                : `<span class="mal">✗ inválido</span>`
            }</div>`;
    });
  </script>

</body>
</html>