SO-60885320

by David Thomas

HTML

<div id="containerId"></div>

JavaScript

// mangosteen
// https://i.stack.imgur.com/4CAZu.jpg
// pineapple
// https://i.stack.imgur.com/a9xXV.png
// rambutan
// https://i.stack.imgur.com/SqYhm.gif
const fruits = [`https://i.stack.imgur.com/4CAZu.jpg`, `https://i.stack.imgur.com/SqYhm.gif`, `https://i.stack.imgur.com/a9xXV.png`];

let insertCard = document.getElementById('containerId');
fruits.forEach(
  (href, index) => insertCard.insertAdjacentHTML('beforeend', `<div class="card-front card-face">
  	<span class="number">${index}</span>
    <img class="card-value card-img"
        src="${href}">
</div>`)
);