diceline-chartmagnifierquestion-marktwitter-whiteTwitter_Logo_Blue

Today I Learned

How to dynamically display different types of cards based on a pattern

Let's say you have an array of cards inside which you want add more items.

Example: [card, card, card, itemOne, card, card, itemTwo, ...]

For this we will create another empty array that we will work with:

let posts = [];

const itemsTemplate = [itemOne, itemTwo];
let items = [itemOne, itemTwo];

for (let i = 0; i < cards.length; i++) {
  posts.push(cards[i]);

  if (i !== 0) {

    //next index is multiple of 3
    if ((i + 1) % 5 === 3) {
      if (items.length === 0) {
        items = itemsTemplate;
      }
      posts.push(items.pop());
    }

    //next index is multiple of 5
    if ((i + 1) % 5 === 0) {
      if (items.length === 0) {
        items = itemsTemplate;
      }
      posts.push(items.pop());
    }
  }
}