JSFiddle - React, Tailwind, and code Playground
HTML
<div class="hidden flag japan"></div>
<div class="hidden flag sweden"></div>
<div class="hidden flag japan"></div>
<div class="hidden flag sweden"></div>
<div class="hidden flag england"></div>
<div class="hidden flag usa"></div>
<div class="hidden flag bulgaria"></div>
<div class="hidden flag usa"></div>
<div class="hidden flag russia"></div>
<div class="hidden flag england"></div>
<div class="hidden flag bulgaria"></div>
<div class="hidden flag russia"></div>
CSS
.flag{
background-color: #ccc;
display: inline-block;
width: 95px;
height: 50px;
margin: 5px;
}
.japan{
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im0wLDBoOTAwdjYwMGgtOTAweiIvPg0KPGNpcmNsZSBmaWxsPSIjYmUwMDI2IiBjeD0iNDUwIiBjeT0iMzAwIiByPSIxODAiLz4NCjwvc3ZnPg0K');
}
.sweden{
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDEwMDAiPg0KPHBhdGggZmlsbD0iIzBiNTA4OSIgZD0ibTAsMGgxNjAwdjEwMDBoLTE2MDB6Ii8+DQo8ZyBmaWxsPSIjZmZjMTAwIj4NCjxwYXRoIGQ9Im01MDAsMGgyMDB2MTAwMGgtMjAweiIvPg0KPHBhdGggZD0ibTAsNDAwaDE2MDB2MjAwaC0xNjAweiIvPg0KPC9nPg0KPC9zdmc+DQo=');
}
.usa{
background:...
JavaScript
var flagQueue = [];
function pickFlag(event) { //the event argument gets passed by default
// event.target signifies the target of the event fired
event.target.classList.toggle('hidden');
flagQueue.push(event.target); // push the HTML Element of flag to array
if (flagQueue.length == 2) { // if it has 2 elements,
if (flagQueue[0].className == flagQueue[1].className) { // compare them
alert('Congratulations');
} else {
alert('Try again');
// if they dont match, add back the hidden class to both flags
flagQueue[0].classList.toggle('hidden');
flagQueue[1].classList.toggle('hidden');
}
// whatever happens, reset the flagQueue array
flagQueue.length = 0;
}
}
// Now we select all HTML elements with class flag
var flags = document.querySelectorAll('.flag');
// And we add an eventListener to each of them.
for (var i = 0; i < flags.length; i++) {
flags[i].addEventListener('click', pickFlag);
}