Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bucles en JS — Ejemplo 2</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; }
        .bloque { background: #f9f9f9; border-left: 4px solid #F7DF1E; padding: 10px 14px; margin: 8px 0; border-radius: 0 6px 6px 0; font-size: 14px; }
        .label  { font-size: 11px; color: #888; font-weight: bold; margin-bottom: 4px; text-transform: uppercase; }
        .ok   { color: #059669; font-weight: bold; }
        .mal  { color: #dc2626; font-weight: bold; }
        .md   { color: #d97706; }
        ul { margin: 0; padding-left: 18px; font-family: monospace; }
        li { margin: 2px 0; }
    </style>
</head>
<body>

<h2>Bucles — while, do...while, break y continue</h2>

<h3>while — contador básico</h3>
  <div class="bloque">
    <div class="label">while (contador &lt; 8)</div>
    <div id="r1"></div>
  </div>

<h3>while — acumular hasta superar un límite</h3>
  <div class="bloque">
    <div class="label">while (total &lt; 1000)</div>
    <ul id="r2"></ul>
  </div>

<h3>do...while — ejecuta al menos una vez</h3>
  <div class="bloque">
    <div class="label">do { ... } while (condición)</div>
    <ul id="r3"></ul>
  </div>

<h3>break — salir del bucle al encontrar algo</h3>
  <div class="bloque">
    <div class="label">primer número par en la lista</div>
    <div id="r4"></div>
  </div>

<h3>continue — saltear iteraciones</h3>
  <div class="bloque">
    <div class="label">imprimir solo impares del 1 al 15</div>
    <div id="r5"></div>
  </div>

<h3>break + continue combinados</h3>
  <div class="bloque">
    <div class="label">procesar productos — saltear sin stock, parar si precio > 500</div>
    <ul id="r6"></ul>
  </div>

// while básico
    const r1 = [];
    let contador = 0;
    while (contador < 8) {
        r1.push(contador);
        contador++;
    }
    document.getElementById("r1").textContent = r1.join("  ");

// while — acumular
    const pagos = [120, 350, 80, 200, 450, 90, 300];
    let total = 0;
    let idx   = 0;
    const lista2 = document.getElementById("r2");
    while (total < 1000 && idx < pagos.length) {
        total += pagos[idx];
        const li = document.createElement("li");
        li.textContent = `Pago #${idx + 1}: $${pagos[idx]} → acumulado: $${total}`;
        li.className   = total >= 1000 ? "ok" : "";
        lista2.appendChild(li);
        idx++;
    }

// do...while
    const lista3 = document.getElementById("r3");
    let intento  = 0;
    let exito    = false;

do {
        intento++;
        exito = intento === 3; // simulamos que al 3er intento conecta
        const li = document.createElement("li");
        li.textContent = `Intento ${intento}: ${exito ? "✓ Conectado" : "✗ Falló"}`;
        li.className   = exito ? "ok" : "mal";
        lista3.appendChild(li);
    } while (!exito && intento < 5);

// break
    const numerosBreak = [7, 3, 11, 4, 9, 2, 8];
    let primerPar = null;
    for (const n of numerosBreak) {
        if (n % 2 === 0) {
            primerPar = n;
            break;
        }
    }
    const divR4 = document.getElementById("r4");
    divR4.innerHTML =
        `Lista: [${numerosBreak.join(", ")}]<br>` +
        `Primer par encontrado: <span class="ok">${primerPar}</span>`;

// continue
    const impares = [];
    for (let i = 1; i <= 15; i++) {
        if (i % 2 === 0) continue; // saltea pares
        impares.push(i);
    }
    document.getElementById("r5").textContent = impares.join("  ");

// break + continue combinados
    const productos = [
        { nombre: "Mouse",     precio: 25,   stock: 0 },
        { nombre: "Teclado",   precio: 75,   stock: 5 },
        { nombre: "Auricular", precio: 60,   stock: 3 },
        { nombre: "Monitor",   precio: 450,  stock: 2 },
        { nombre: "Laptop",    precio: 1200, stock: 4 },
        { nombre: "Webcam",    precio: 90,   stock: 6 },
    ];

</body>
</html>