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');
let cardBases = fruits.map(
  (href, index) => `<div class="card-front card-face">
    <img class="card-value card-img"
        src="${href}">
</div>`
).flatMap(
	(html) => [html,html]
).sort(
	() => Math.random() > 0.5 ? 1 : -1
);

insertCard.insertAdjacentHTML('beforeend', cardBases.join(''));