const container = document.querySelector('.container');
const coffees = [
  { name: 'Tony Stark', image: 'images/Tony_Stark.jpg' },
  { name: 'DeusEx', image: 'images/DeusEx.png' },
  { name: 'Face', image: 'images/Face.png' },
  { name: 'Bear', image: 'images/Bear.png' },
];
const showCoffees = () => {
  let output = '';
  coffees.forEach(
    ({ name, image }) =>
      (output += `
              <div class="card">
                <img class="card--avatar" src=${image} />
                <h1 class="card--title">${name}</h1>
                <a class="card--link" href="#">[CLICK]</a>
              </div>
              `),
  );
  container.innerHTML = output;
};

document.addEventListener('DOMContentLoaded', showCoffees);