JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="button" value="Deal Card" id="deal" />
<br/>
<br/>
<br/>
<div id='drop' class='drop'><center><u>Drop Zone</u></center>
<p id='drop2'>

</p>
</div>

CSS

.drop {
    float: left;
    color: white;
    text-shadow: 1px 1px black;
    font-size: 20px;
    width: 160px;
    height: 200px;
    background-image: url("http://www.clker.com/cliparts/d/0/6/a/12065824352039300232mozart_ar_Spanish_Trash_Bin_Sign_1.svg.hi.png");
        background-size: 160px 200px;
}

#drop2 {
  background-color: rgba(74, 74, 74, 0.8);
  width: 80%;
  margin-left:10%;
  margin-right:10%;
}

JavaScript

$(init);

function init()
{
	$('.drop').droppable(
  	{
    	drop: handleDropEvent
		});   
}

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

var cardsInDeck = new Array();

var numberOfCardsInDeck = 52;
cardsInDeck[0] = "C01";
cardsInDeck[1] = "C02";
cardsInDeck[2] = "C03";
cardsInDeck[3] = "C04";
cardsInDeck[4] = "C05";
cardsInDeck[5] = "C06";
cardsInDeck[6] = "C07";
cardsInDeck[7] = "C08";
cardsInDeck[8] = "C09";
cardsInDeck[9] = "C10";
cardsInDeck[10] = "C11";
cardsInDeck[11] = "C12";
cardsInDeck[12] = "C13";
cardsInDeck[13] = "D01";
cardsInDeck[14] = "D02";
cardsInDeck[15] = "D03";
cardsInDeck[16] = "D04";
cardsInDeck[17] = "D05";
cardsInDeck[18] = "D06";
cardsInDeck[19] = "D07";
cardsInDeck[20] = "D08";
cardsInDeck[21] = "D09";
cardsInDeck[22] = "D10";
cardsInDeck[23] = "D11";
cardsInDeck[24] = "D12";
cardsInDeck[25] = "D13";
cardsInDeck[26] = "H01";
cardsInDeck[27] = "H02";
cardsInDeck[28] = "H03";
cardsInDeck[29] = "H04";
cardsInDeck[30] = "H05";
cardsInDeck[31] = "H06";
cardsInDeck[32] = "H07";
cardsInDeck[33] = "H08";
cardsInDeck[34] = "H09";
cardsInDeck[35] = "H10";
cardsInDeck[36] = "H11";
cardsInDeck[37] = "H12";
cardsInDeck[38] = "H13";
cardsInDeck[39] = "S01";
cardsInDeck[40] = "S02";
cardsInDeck[41] = "S03";
cardsInDeck[42] = "S04";
cardsInDeck[43] = "S05";
cardsInDeck[44] = "S06";
cardsInDeck[45] = "S07";
cardsInDeck[46] = "S08";
cardsInDeck[47] = "S09";
cardsInDeck[48] = "S10";
cardsInDeck[49] = "S11";
cardsInDeck[50] = "S12";
cardsInDeck[51] = "S13";

function dealCard(i)
	{
    if (numberOfCardsInDeck == 0) return false;
    var card = document.createElement("img");
    card.src = "http://techrbit.com/Images/cards/" 
               + cardsInDeck[i] + ".svg";
    card.id = cardsInDeck[i];
    card.alt = "Card " + cardsInDeck[i];
    card.width = 80;
    card.height = 100;
    document.body.appendChild(card);
    
    $(card).draggable();
    removeCard(i);
	}

function randomCard()
	{
   return Math.floor(Math.random() *...