JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<button id='easy'>Easy</button>
<button id='medium'>medium</button>
<button id='hard'>hard</button>
<table></table>

JavaScript

//Creates all of the variables to be manipulated later
var countCells;
var cardValues = [];
var checker = true;
var tempArr = [];
var winCounter = 0;

//Generates a table with the dimensions specified
var createTable = function (row, col) {
    $('table').empty();
    for (var i = 1; i <= row; i++) {
        $('table').append($('<tr>'));
    }
    for (var j = 1; j <= col; j++) {
        $('tr').append($('<td>'));
    }
    countCells = row * col;
};

//Creates a new game with various difficulties
$('#easy').click(function () {
    createTable(2, 5);
    addNumbers();
    giveCellValue();
});
$('#medium').click(function () {
    createTable(3, 6);
    addNumbers();
    giveCellValue();
});
    $('#hard').click(function () {
        createTable(4, 9);
        addNumbers();
        giveCellValue();
    });

var addNumbers = function () {
    cardValues = []
    checker = true;
//Adds a number for half of the cells into an array twice
for (var k = 1; k <= countCells / 2; k++) {
    cardValues.push(k);
    if (k === countCells / 2 && checker) {
        checker = false;
        k = 0;
    }
}
};

//Adds a random number from the array to each of the cells
var giveCellValue = function () {
    var len = cardValues.length;
    for (var i = 0; i <= len; i++) {
        var random = Math.ceil(Math.random() * cardValues.length) - 1;
        $('td').eq(i).append(cardValues[random]);
        cardValues.splice(random, 1);
    }
};

//Checks for matches when cells are clicked
$('table').on('click', 'td', function (event) {
    if ($(this).hasClass('clicked') || $(this).hasClass('completed')) {
        event.stopPropagation();
        event.preventDefault();
        return;
    }
    $(this).addClass('clicked');
    tempArr.push($(this).text());
    var len = tempArr.length;
    if (len > 1) {
        if (tempArr[0] === tempArr[1]) {
            alert("Good job!");
            $('.clicked').addClass('completed');
            $('.completed').removeClass('clicked');
           ...