JSFiddle - React, Tailwind, and code Playground

by Neil Daley

HTML

<input type="button" value="Deal Card" id="deal">

JavaScript

$("#deal").click(function () {
    dealCard(randomCard());
});

var cardsInDeck = new Array();
var numberOfCardsInDeck = 52;
cardsInDeck[0] = "c1";
cardsInDeck[1] = "c2";
cardsInDeck[2] = "c3";
cardsInDeck[3] = "c4";
cardsInDeck[4] = "c5";
cardsInDeck[5] = "c6";
cardsInDeck[6] = "c7";
cardsInDeck[7] = "c8";
cardsInDeck[8] = "c9";
cardsInDeck[9] = "c10";
cardsInDeck[10] = "c11";
cardsInDeck[11] = "c12";
cardsInDeck[12] = "c13";
cardsInDeck[13] = "d1";
cardsInDeck[14] = "d2";
cardsInDeck[15] = "d2";
cardsInDeck[16] = "d3";
cardsInDeck[17] = "d4";
cardsInDeck[18] = "d5";
cardsInDeck[19] = "d6";
cardsInDeck[20] = "d7";
cardsInDeck[21] = "d8";
cardsInDeck[22] = "d9";
cardsInDeck[23] = "d10";
cardsInDeck[24] = "d11";
cardsInDeck[25] = "d12";
cardsInDeck[26] = "d13";
cardsInDeck[27] = "h1";
cardsInDeck[28] = "h2";
cardsInDeck[29] = "h3";
cardsInDeck[30] = "h4";
cardsInDeck[31] = "h5";
cardsInDeck[32] = "h6";
cardsInDeck[33] = "h7";
cardsInDeck[34] = "h8";
cardsInDeck[35] = "h9";
cardsInDeck[36] = "h10";
cardsInDeck[37] = "h11";
cardsInDeck[38] = "h12";
cardsInDeck[39] = "h13";
cardsInDeck[40] = "s1";
cardsInDeck[41] = "s2";
cardsInDeck[42] = "s3";
cardsInDeck[43] = "s4";
cardsInDeck[44] = "s5";
cardsInDeck[45] = "s6";
cardsInDeck[46] = "s7";
cardsInDeck[47] = "s8";
cardsInDeck[48] = "s9";
cardsInDeck[49] = "s10";
cardsInDeck[50] = "s11";
cardsInDeck[51] = "s12";
cardsInDeck[52] = "s13";

function dealCard(i) {
    if (numberOfCardsInDeck == 0) return false;
    var img = document.createElement("img");
    img.src = "http://webtechneil.com/cards/" + cardsInDeck[i] + ".png";

    document.body.appendChild(img);
    removeCard(i);
}

function randomCard() {
   return Math.floor(Math.random() * numberOfCardsInDeck);  
}

function removeCard(c)
{
    // simply make every higher numbered card move down 1
    for (j=c; j <= numberOfCardsInDeck - 2; j++)
    {
        cardsInDeck[j] = cardsInDeck[j+1];
    }
    numberOfCardsInDeck--;
}