JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<button class='button_general'><span class="match_counter">0</span> Clicks</button>
<button class="match_restart match_button_general">Restart</button>
<p><span class='match_finished'>..</span></p>

<div class="match_cards"></div>

CSS

div {box-sizing:border-box;}

.match_cards {margin:20px auto;}
.match_cards div{float:left;width:150px;height:100px;margin:5px;border:2px solid grey;border-radius:5px;box-shadow: 0 2px 5px rgba(0,0,0,0.5);background-image: url('https://image.shutterstock.com/mosaic_250/1427210/556229497/stock-photo-old-paper-texture-556229497.jpg');z-index:2;}
.match_cards div:hover {cursor:pointer;opacity:0.8;}
.match_cards div img {display:none;width:100%;height:100%;z-index:3;}

JavaScript

var BoxOpened = "";
var ImgOpened = "";
var clicks = 0;
var ImgFound = 0;

var ImgSource = [
  "http://www.chalani.net/webphotos/jivesouthern.jpg",
  "http://www.chalani.net/dbphotos/tussock_tanya.jpg",
  "https://i.pinimg.com/236x/73/ff/cd/73ffcddfa42998882dbb4f41a7e0f8b7--horse-pictures-horse-breeds.jpg",
  "https://image.shutterstock.com/image-photo/british-shorthair-cat-isolated-on-260nw-684452320.jpg",
  "https://image.shutterstock.com/image-photo/cat-cute-little-ginger-kitten-260nw-1297577623.jpg",
  "https://image.shutterstock.com/image-photo/ortrait-longhair-persian-cat-260nw-520694341.jpg",
  "https://comps.canstockphoto.com/cat-persian-extreme-pictures_csp33885780.jpg",
  "https://us.123rf.com/450wm/neelsky/neelsky1109/neelsky110900122/10505533-portrait-of-a-royal-bengal-tiger-alert-and-staring-at-the-camera.jpg",
  "https://comps.canstockphoto.com/african-lion-picture_csp3469761.jpg",
  "https://st.depositphotos.com/1325441/1966/i/450/depositphotos_19661835-stock-photo-lion-king-of-the-wild.jpg"
];

$('.match_restart').click(function(){ restart();
  });

function RandomFunction(MaxValue, MinValue) {
		return Math.round(Math.random() * (MaxValue - MinValue) + MinValue);
	}
	
function ShuffleImages() {
	var ImgAll = $('.match_cards').children();
	var ImgThis = $('.match_cards' + " div:first-child");
	var ImgArr = [];

	for (var i = 0; i < ImgAll.length; i++) {
		ImgArr[i] = $("#" + ImgThis.attr("id") + " img").attr("src");
		ImgThis = ImgThis.next();
	}
	
		ImgThis = $('.match_cards' + " div:first-child");
	
	for (var z = 0; z < ImgAll.length; z++) {
	var RandomNumber = RandomFunction(0, ImgArr.length - 1);

		$("#"+ImgThis.attr("id")+" img").attr("src", ImgArr[RandomNumber]);
		ImgArr.splice(RandomNumber, 1);
		ImgThis = ImgThis.next();
	}
}

function restart(){
	ShuffleImages();
	$('.match_cards'+" div img").hide();
	$('.match_cards'+" div").css("visibility", "visible");
	clicks =...