Assignment 7

by Ebony McCoy

HTML

<script src="jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>

<html lang="en" >
<head>
    <title>Drag and Drop</title>
    </head>
<body>
    <h1>Drag and Drop</h1>

    
<div id="discards" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p>This is the discard pile</p>
</div>
<input type="button" value="Deal"  id="calcluate" onclick="dealHand()"/>
<input type="button" value="Reshuffle"  id="calcluate" onclick="location.reload()"/>

<div id="hand" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="card1" draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width= 0px>
    <img id="card2" draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width=0px>
    <img id="card3"  draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width=0px>
    <img id="card4"  draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width=0px>
    <img id="card5"  draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width=0px>
    <img id="card6"  draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width=0px>
    <img id="card7"  draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width=0px>
    <img id="card8"  draggable="true"
         ondrop="nodrop(event)" ondragstart="start_card_drag(event)" width=0px>
    
    
</div>

</body>
</html>

CSS

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

JavaScript

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

    var card_in_process = 0;
    var number_deals = 0;
    var cards_in_hand = 0;
    var cards_discarded = 0;
    var cardsInDeck = new Array();
    var numberOfCardsInDeck = 52;
    cardsInDeck[0] = "2_of_clubs.png";
    cardsInDeck[1] = "2_of_diamonds.png";
    cardsInDeck[2] = "2_of_hearts.png";
    cardsInDeck[3] = "2_of_spades.png";
    cardsInDeck[4] = "3_of_clubs.png";
    cardsInDeck[5] = "3_of_diamonds.png";
    cardsInDeck[6] = "3_of_hearts.png";
    cardsInDeck[7] = "3_of_spades.png";
    cardsInDeck[8] = "4_of_clubs.png";
    cardsInDeck[9] = "4_of_diamonds.png";
    cardsInDeck[10] = "4_of_hearts.png";
    cardsInDeck[11] = "4_of_spades.png";
    cardsInDeck[12] = "5_of_clubs.png";
    cardsInDeck[13] = "5_of_diamonds.png";
    cardsInDeck[14] = "5_of_hearts.png";
    cardsInDeck[15] = "5_of_spades.png";
    cardsInDeck[16] = "6_of_clubs.png";
    cardsInDeck[17] = "6_of_diamonds.png";
    cardsInDeck[18] = "6_of_hearts.png";
    cardsInDeck[19] = "6_of_spades.png";
    cardsInDeck[20] = "7_of_clubs.png";
    cardsInDeck[21] = "7_of_diamonds.png";
    cardsInDeck[22] = "7_of_hearts.png";
    cardsInDeck[23] = "7_of_spades.png";
    cardsInDeck[24] = "8_of_clubs.png";
    cardsInDeck[25] = "8_of_diamonds.png";
    cardsInDeck[26] = "8_of_hearts.png";
    cardsInDeck[27] = "8_of_spades.png";
    cardsInDeck[28] = "9_of_clubs.png";
    cardsInDeck[29] = "9_of_diamonds.png";    
    cardsInDeck[30] = "9_of_hearts.png";
    cardsInDeck[31] = "9_of_spades.png";    
    cardsInDeck[32] = "10_of_clubs.png";
    cardsInDeck[33] = "10_of_diamonds.png";
    cardsInDeck[34] = "10_of_hearts.png";
    cardsInDeck[35] = "10_of_spades.png";
    cardsInDeck[36] = "jack_of_clubs.png";
    cardsInDeck[37] = "jack_of_diamonds.png";
    cardsInDeck[38] = "jack_of_hearts.png";
    cardsInDeck[39] = "jack_of_spades.png";
    
    cardsInDeck[40] = "queen_of_clubs.png";
    cardsInDeck[41] =...