const cards = document.querySelectorAll(".card");
const writes = [];

cards.forEach((card) => {
  // Read the current height.
  const height = `${card.getBoundingClientRect().height + 10}px`;
  // Read the current offsetLeft
  const left = `${card.offsetLeft}px`;

  writes.push(() => {
    // Write new height.
    card.style.height = height;
    // Write height value in DOM.
    card.querySelector(
      ".height-value"
    ).innerText = `${height} height`;
    // Write left value in DOM.
    card.querySelector(
      ".left-value"
    ).innerText = `${left} offsetLeft`;
  });
});

// Wait until the next frame to begin executing the batch of writes.
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    while (writes.length) {
      const write = writes.shift();
      write();
    }

    done();
  });
});