for (let i = 0; i < 3; i++) {
    console.log(i);
}

[1, 2, 3].forEach(num => {
    console.log(num);
});

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        break;
    }
    console.log(i);
}

function test() {
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            return;
        }
        console.log(i);
    }
}

test();

.container {
    display: grid;
    place-items: center;
}

.button {
    padding-inline: 1rem;
}

.container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

button:is(:hover, :focus) {
    /* استایل خودت رو اینجا بنویس */
}

.circle {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.container {
    gap: 0;
}

.container {
    gap: 1rem;
}

class DotsPainter {
  paint(ctx, geom, props) {
    ctx.fillStyle = 'pink';
    for (let y = 0; y < geom.height; y += 20) {
      for (let x = 0; x < geom.width; x += 20) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsPainter)

CSS.paintWorklet.addModule('paint.js');

.box {
  background: paint(dots);
}

ctx.fillStyle = props.get('--dot-color') || 'pink';

.box {
  background: paint(dots);
  --dot-color: blue;
}