JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<script>
images = [
    'http://download.seaicons.com/icons/icons-land/play-stop-pause/32/Record-Disabled-icon.png',
    'http://download.seaicons.com/icons/kearone/platecons/32/linux-icon.png',
    'http://download.seaicons.com/icons/fixicon/paradise-applications/32/dictionnary-icon.png',
    'http://download.seaicons.com/icons/mazenl77/NX11/32/Internet-Real-icon.png',
    'http://download.seaicons.com/icons/mazenl77/NX11/32/Internet-Blue-icon.png',
    'http://download.seaicons.com/icons/musett/micro-extras/32/Heart-icon.png',
    'http://download.seaicons.com/icons/robsonbillponte/iRob/32/Misc-Safari-icon.png' ];
function shuffle(arr) {
    return arr.sort(function() {return 0.5 - Math.random()});
}
function printImages(total, pairs) {
    s = '';
    var arr = [(total-1)]
    for (var i = 0; i < total; i++) {
        arr[i] = 0;
    }
    for (var i = 0; i < pairs; i++) {
        arr[(i*2)] = i+1;
        arr[(i*2+1)] = i+1;
    }
    arr = shuffle(arr)
    for (var i = 0; i < total; i++) {
        s += '<img src="'+images[arr[i]]+'" />';
    }
    document.getElementById('icons').innerHTML = s;
}
</script>
 
</head>
 
<body onload="printImages(20,6);">
    <p id="icons"></p>
</body>