Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bucles en JS — Ejemplo 4</title>
    <style>
        body   { font-family: Arial, sans-serif; padding: 20px; background: #fff; max-width: 700px; }
        h3     { margin: 22px 0 8px; font-size: 15px; color: #333; }
        table  { border-collapse: collapse; width: 100%; margin-bottom: 14px; }
        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; }
        .ok    { color: #059669; font-weight: bold; }
        .mal   { color: #dc2626; font-weight: bold; }
        .md    { color: #d97706; }
        .stat  { display: inline-block; background: #f9f9f9; border: 1px solid #ddd; border-radius: 6px; padding: 10px 16px; margin: 4px; font-size: 14px; }
        .stat strong { display: block; font-size: 22px; color: #b8a000; }
        .barra-wrap  { background: #eee; border-radius: 4px; height: 14px; margin-top: 4px; }
        .barra       { background: #F7DF1E; height: 14px; border-radius: 4px; }
    </style>
</head>
<body>

<h2>Análisis de ventas — Bucles completo</h2>

<h3>Detalle de ventas</h3>
  <table id="tabla-ventas"></table>

<h3>Estadísticas</h3>
  <div id="stats"></div>

<h3>Ranking por cantidad vendida</h3>
  <table id="tabla-ranking"></table>

<h3>Ventas por categoría</h3>
  <table id="tabla-categoria"></table>

const ventas = [
        { producto: "Laptop",    cantidad: 3,  precio: 1200, categoria: "tech"   },
        { producto: "Mouse",     cantidad: 15, precio: 25,   categoria: "tech"   },
        { producto: "Teclado",   cantidad: 8,  precio: 75,   categoria: "tech"   },
        { producto: "Silla",     cantidad: 5,  precio: 350,  categoria: "mueble" },
        { producto: "Monitor",   cantidad: 6,  precio: 450,  categoria: "tech"   },
        { producto: "Escritorio",cantidad: 2,  precio: 280,  categoria: "mueble" },
        { producto: "Auricular", cantidad: 12, precio: 60,   categoria: "tech"   },
        { producto: "Webcam",    cantidad: 4,  precio: 90,   categoria: "tech"   },
    ];

// ── Detalle con for...of ──────────────────────────────────────────────
    const tablaVentas = document.getElementById("tabla-ventas");
    tablaVentas.innerHTML = `<tr><th>Producto</th><th>Cant.</th><th>Precio</th><th>Subtotal</th></tr>`;

// ── Estadísticas con for clásico ──────────────────────────────────────
    let maxCant = 0, minCant = Infinity;
    let idxMax  = 0, idxMin  = 0;
    let totalUnidades = 0;

for (let i = 0; i < ventas.length; i++) {
        totalUnidades += ventas[i].cantidad;
        if (ventas[i].cantidad > maxCant) { maxCant = ventas[i].cantidad; idxMax = i; }
        if (ventas[i].cantidad < minCant) { minCant = ventas[i].cantidad; idxMin = i; }
    }

const promedio = (totalGeneral / ventas.length).toFixed(0);

document.getElementById("stats").innerHTML = `
        <div class="stat"><strong>$${totalGeneral.toLocaleString()}</strong>Total facturado</div>
        <div class="stat"><strong>${totalUnidades}</strong>Unidades vendidas</div>
        <div class="stat"><strong>$${promedio}</strong>Promedio por producto</div>
        <div class="stat"><strong>${ventas[idxMax].producto}</strong>Más vendido (${maxCant} uds)</div>
        <div class="stat"><strong>${ventas[idxMin].producto}</strong>Menos vendido (${minCant} uds)</div>
    `;

// ── Ranking con for clásico (burbuja simple) ──────────────────────────
    // Copiamos el array para no modificar el original
    const ranking = [];
    for (const v of ventas) {
        ranking.push({ producto: v.producto, cantidad: v.cantidad, subtotal: v.cantidad * v.precio });
    }

// Ordenar por cantidad descendente (burbuja simple para mostrar el concepto)
    for (let i = 0; i < ranking.length - 1; i++) {
        for (let j = 0; j < ranking.length - 1 - i; j++) {
            if (ranking[j].cantidad < ranking[j + 1].cantidad) {
                const temp     = ranking[j];
                ranking[j]     = ranking[j + 1];
                ranking[j + 1] = temp;
            }
        }
    }

const tablaRanking = document.getElementById("tabla-ranking");
    tablaRanking.innerHTML = `<tr><th>#</th><th>Producto</th><th>Cant.</th><th>Subtotal</th><th>Proporción</th></tr>`;

for (let i = 0; i < ranking.length; i++) {
        const r   = ranking[i];
        const pct = Math.round((r.cantidad / totalUnidades) * 100);
        tablaRanking.innerHTML +=
            `<tr>
                <td>${i + 1}°</td>
                <td>${r.producto}</td>
                <td>${r.cantidad}</td>
                <td>$${r.subtotal.toLocaleString()}</td>
                <td>
                    ${pct}%
                    <div class="barra-wrap"><div class="barra" style="width:${pct}%"></div></div>
                </td>
            </tr>`;
    }

// ── Agrupar por categoría con for...of ────────────────────────────────
    const porCategoria = {};

for (const v of ventas) {
        if (!porCategoria[v.categoria]) {
            porCategoria[v.categoria] = { cantidad: 0, subtotal: 0, productos: 0 };
        }
        porCategoria[v.categoria].cantidad  += v.cantidad;
        porCategoria[v.categoria].subtotal  += v.cantidad * v.precio;
        porCategoria[v.categoria].productos += 1;
    }

const tablaCategoria = document.getElementById("tabla-categoria");
    tablaCategoria.innerHTML =
        `<tr><th>Categoría</th><th>Productos</th><th>Unidades</th><th>Total</th></tr>`;

for (const cat in porCategoria) {
        const c = porCategoria[cat];
        tablaCategoria.innerHTML +=
            `<tr>
                <td><strong>${cat}</strong></td>
                <td>${c.productos}</td>
                <td>${c.cantidad}</td>
                <td class="ok">$${c.subtotal.toLocaleString()}</td>
            </tr>`;
    }
  </script>

</body>
</html>