JSFiddle - React, Tailwind, and code Playground

by jay dowling

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<p><input id="deal" type="button" value="Deal Card" /></p>

<br/>
<br/>

<div id="drop" class='drop'>Drag Card and Drop Here!</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/>
<br/>
<br/>
<br/>
<div><a href="http://nativesoul.us/nativesoul_js.html">Home</a></div>

CSS

.drop {
    float: left;
    width: 400px;
    height: 200px;
    background-color: #BCBCBC;
    
}

JavaScript

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



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


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] = "cj";
cardsInDeck[11] = "cq";
cardsInDeck[12] = "ck";
cardsInDeck[13] = "s1";
cardsInDeck[14] = "s2";
cardsInDeck[15] = "s3";
cardsInDeck[16] = "s4";
cardsInDeck[17] = "s5";
cardsInDeck[18] = "s6";
cardsInDeck[19] = "s7";
cardsInDeck[20] = "s8";
cardsInDeck[21] = "s9";
cardsInDeck[22] = "s10";
cardsInDeck[23] = "sj";
cardsInDeck[24] = "sq";
cardsInDeck[25] = "sk";
cardsInDeck[26] = "h1";
cardsInDeck[27] = "h2";
cardsInDeck[28] = "h3";
cardsInDeck[29] = "h4";
cardsInDeck[30] = "h5";
cardsInDeck[31] = "h6";
cardsInDeck[32] = "h7";
cardsInDeck[33] = "h8";
cardsInDeck[34] = "h9";
cardsInDeck[35] = "h10";
cardsInDeck[36] = "hj";
cardsInDeck[37] = "hq";
cardsInDeck[38] = "hk";
cardsInDeck[39] = "d1";
cardsInDeck[40] = "d2";
cardsInDeck[41] = "d3";
cardsInDeck[42] = "d4";
cardsInDeck[43] = "d5";
cardsInDeck[44] = "d6";
cardsInDeck[45] = "d7";
cardsInDeck[46] = "d8";
cardsInDeck[47] = "d9";
cardsInDeck[48] = "d10";
cardsInDeck[49] = "dj";
cardsInDeck[50] = "dq";
cardsInDeck[51] = "dk";


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

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

function handleDropEvent (event, ui){
   var draggable = ui.draggable;
   $('#drop').html('The card that was dropped '' + draggable.attr("id") + '' was dropped here!');

}

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

function removeCard(c)
{
...