JSFiddle - React, Tailwind, and code Playground

by pat spag

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<input type="button" value="Deal Card" id="deal" />
<br/>
<br/>
<br/>

<div id='dropText' class='dropText'>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id='drop' class='drop'>Drop Card Pile Here</div>
<br/>
<br/>
<br/>

CSS

.drop {
    float: left;
    width: 100%;
    height: 200px;
    background-color: green;    
    border-style: solid;
    border-width: 5px;
    border-color: tan;
    font-size: 22px;
    font-weight: bold
    
}
.dropText{
   font-size: 22px;
    font-weight: bold
}

JavaScript

//Ron Eaglin Start code from examples was used
//http://jsfiddle.net/reaglin/YFtBp/3/
//

 var output1 = ""
$ (init);

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

function init() {
  $('.drop').droppable( {
  	//hoverClass: "drop-hover",//only seemed to work on dragablles
    drop: handleDropEvent
    
  } );
  
}

var cardsInDeck = new Array();
var numberOfCardsInDeck = 51;
cardsInDeck[0] = "10_of_clubs";
cardsInDeck[1] = "10_of_diamonds";
cardsInDeck[2] = "10_of_hearts";
cardsInDeck[3] = "10_of_spades";
cardsInDeck[4] = "2_of_clubs";
cardsInDeck[5] = "queen_of_spades";//some how i skiped index 5 so just 
cardsInDeck[6] = "2_of_diamonds";//out of place alittle
cardsInDeck[7] = "2_of_hearts";
cardsInDeck[8] = "2_of_spades";
cardsInDeck[9] = "3_of_clubs";
cardsInDeck[10] = "3_of_diamonds";
cardsInDeck[11] = "3_of_hearts";
cardsInDeck[12] = "3_of_spades";
cardsInDeck[13] = "4_of_clubs";
cardsInDeck[14] = "4_of_diamonds";
cardsInDeck[15] = "4_of_hearts";
cardsInDeck[16] = "4_of_spades";
cardsInDeck[17] = "5_of_clubs";
cardsInDeck[18] = "5_of_diamonds";
cardsInDeck[19] = "5_of_hearts";
cardsInDeck[20] = "5_of_spades";
cardsInDeck[21] = "6_of_clubs";
cardsInDeck[22] = "6_of_diamonds";
cardsInDeck[23] = "6_of_hearts";
cardsInDeck[24] = "6_of_spades";
cardsInDeck[25] = "7_of_clubs";
cardsInDeck[26] = "7_of_diamonds";
cardsInDeck[27] = "7_of_hearts";
cardsInDeck[28] = "7_of_spades";
cardsInDeck[29] = "8_of_clubs";
cardsInDeck[30] = "8_of_diamonds";
cardsInDeck[31] = "8_of_hearts";
cardsInDeck[32] = "8_of_spades";
cardsInDeck[33] = "9_of_clubs";
cardsInDeck[34] = "9_of_diamonds";
cardsInDeck[35] = "9_of_hearts";
cardsInDeck[36] = "9_of_spades";
cardsInDeck[37] = "ace_of_clubs";
cardsInDeck[38] = "ace_of_diamonds";
cardsInDeck[39] = "ace_of_hearts";
cardsInDeck[40] = "ace_of_spades";
cardsInDeck[41] = "jack_of_clubs";
cardsInDeck[42] = "jack_of_diamonds";
cardsInDeck[43] = "jack_of_hearts";
cardsInDeck[44] = "jack_of_spades";
cardsInDeck[45] =...