2021-10-20 Infinite Scroll Part 2

by Ttt Yyy

HTML

<div id='container'>
<!--   <div class="list-item">
    <img class="list-item__image" src="https://" />
    <span class="list-item__label">Label</span>
  </div> -->
</div>

CSS

.list-item {
  align-items: center;
  display: flex;
}

.list-item__image {
  height: 50px;
  width: 50px;
}

.list-item__label {
  margin-left: 12px;
}

JavaScript

const container = document.getElementById("container");
const createRow = (url, label) => {
  const row = document.createElement("div");
    row.className = "list-item";
  row.innerHTML = `<img src=${url} class='list-item__image'>
 <span class="list-item__label">${label}</span>`;

  return row;
};

// assuming rows looks like: [{url: 'https://' label: 'Test Label'}]
const addRowsBulk = rows => {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < rows.length; i++) {
    const { url, label } = rows[i];
    const row = createRow(url, label);
    fragment.appendChild(row);
  }
  container.appendChild(fragment);
};

const rows = [
  {
    url: "https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/zapdos.png",
    label: "Zapdos",
  },
  {
    url: "https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/moltres.png",
    label: "Moltres",
  },
  {
    url: "https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/articuno.png",
    label: "Articuno",
  },
];

addRowsBulk(rows)