main.js

const gallery = document.getElementById('gallery');
const count = document.getElementById('count')
const loading = document.getElementsByClassName('loading')

function createContainer() {
  const container = document.createElement('div');
  container.setAttribute('class', 'duck');
  gallery.appendChild(container);
  return container;
}

function addDuckImage(container, contributor) {
  const duck = document.createElement('img');
  duck.setAttribute('src', `./ducks/${contributor.username}.png`);
  duck.setAttribute('width', '300');
  duck.setAttribute('height', '300');
  duck.setAttribute('loading', 'lazy');
  duck.setAttribute('alt', contributor.username);
  container.appendChild(duck);
}

function addContributorInfo(container, contributor) {
  const contributorName = document.createElement('a');
  contributorName.setAttribute('href', `https://github.com/${contributor.username}`);
  contributorName.setAttribute('aria-label', contributor.username);
  contributorName.setAttribute('target', 'NEW');
  contributorName.append(contributor.username);
  container.appendChild(contributorName);

  const contributorMessage = document.createElement('div');
  contributorMessage.setAttribute('class', 'message');
  contributorMessage.append(contributor.message);
  container.appendChild(contributorMessage);
}

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

/* global contributors */
count.innerText = contributors.length;

shuffle(contributors);

for (const contributor of contributors) {
  const container = createContainer();
  addDuckImage(container, contributor);
  addContributorInfo(container, contributor);
}

loading[0].remove()