JSFiddle - React, Tailwind, and code Playground

by teknohippy

HTML

<div id="deck" title="Click to deal a new card">
    <p>Deck</p>
    <div class="card card7">Card 7</div>
    <div class="card card6">Card 6</div>
    <div class="card card5">Card 5</div>
    <div class="card card4">Card 4</div>
    <div class="card card3">Card 3</div>
</div>
<div id="discard">
    <p>Discard</p>
</div>
<div id="chosencards" title="Click to discard a card">
    <p>Your cards</p>
    <div class="card card1">Card 1</div>
    <div class="card card2">Card 2</div>
</div>

CSS

.card
{
    width: 150px;
    height: 200px;  
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline-block;
}

#deck, #discard
{
    position: absolute;
}

#discard
{
    margin-left: 175px;
}

#chosencards
{
    position: absolute;
    margin-top: 250px;
}

#deck .card
{
    background: red;
    position: absolute;
}

#chosencards .card
{
    background: silver;
    
}

#discard .card
{
    background: black;
    color: white;
    position: absolute;
}

JavaScript

$("#chosencards .card").click(function() {

    if ($("#chosencards > div").size() > 2) {
        $(this).animate({
            width: '150',
            height: '200'
        }, 1);
        $(this).appendTo("#discard");
        $(this).unbind("click");
        $(this).unbind("mouseover");
        $(this).unbind("mouseout");

    }
    else {

    }
});

$("#deck .card").click(function() {
    if ($("#chosencards > div").size() < 3) {
        $(this).appendTo("#chosencards");
        $(this).unbind("click");
        $(this).bind("click", function() {
            if ($("#chosencards > div").size() > 2) {
                $(this).animate({
                    width: '150',
                    height: '200'
                }, 1);
                $(this).appendTo("#discard");
                $(this).unbind("click");
                $(this).unbind("mouseover");
                $(this).unbind("mouseout");

            }
            else {
                
            }
        });
    }
    else {
        
    }
});