JSFiddle - React, Tailwind, and code Playground

by 94jerdaw

HTML

<div class="container">
    <div id="a1" class="card"></div>
    <div id="a2" class="card"></div>
    <div id="a3" class="card"></div>
    <div id="a4" class="card"></div>
    <div id="b1" class="card"></div>
    <div id="b2" class="card"></div>
    <div id="b3" class="card"></div>
    <div id="b4" class="card"></div>
    <div id="c1" class="card"></div>
    <div id="c2" class="card"></div>
    <div id="c3" class="card"></div>
    <div id="c4" class="card"></div>
    <div id="d1" class="card"></div>
    <div id="d2" class="card"></div>
    <div id="d3" class="card"></div>
    <div id="d4" class="card"></div>
</div>

CSS

body{
    margin:0;
    padding:0;
}


.container{
    width:418px;
}

.card{
    width:100px;
    height:100px;
    float:left;
    background-color:#ccc;
    margin-bottom:3px;
	margin-right:3px;
}


.card:hover{
    width:94px;
    height:94px;
	border:3px solid black;
}

JavaScript

var colors = [
    "orange","orange","pink","pink","red","red","purple","purple",
    "blue","blue","green","green","brown","brown","yellow","yellow"];

var divs = document.getElementsByClassName("card");

while (divs.length > 0) {
    var i = Math.floor(Math.random() * colors.length);
    divs[0].style.backgroundColor = colors[i];
    colors.splice(i, 1);
    divs = [].slice.call(divs, 1);
}


var pick1 = false;
var pick2 = false;
var id1;
var id2;

$('.card').click(function(){
    
    if(pick1) {
        pick2 = $(this).css('background-color');
        id2 = $(this).attr('id');
        if(pick1 == pick2 && id1!=id2) alert('Correct');
        else alert('Incorrect');
        
        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).css('background-color');
        id1 = $(this).attr('id');   
    }
});