JSFiddle - React, Tailwind, and code Playground

by Tyilo

HTML

<html> 
<body onload="update();">
<input type="number" id="cardNums" value="2" min="0" onchange="update();" onclick="update();">
<br>
<div id="cardChooser">
</div>
</body>
</html>

CSS

a[href="javascript:void(0);"]
{
    color: black;
    text-decoration: none;
}
*#cardChooser
{
    width: 100%;
    height: 300px;
    font-size: 50px;
    font-family: monospace;
    text-align: center;
    margin: 0 auto;
}
.cards
{
    float: left;
    /*margin-left: auto;
    margin-right: auto;*/
    width: 290px;
    border: solid 1px;
    margin: 5px;
    padding: 5px;
}

JavaScript

var currentCards = [];
var numCards = 0;
var cardChoose = document.createElement('div');
cardChoose.setAttribute('class', 'cards');
var aElement = document.createElement('a');
aElement.setAttribute('href', 'javascript:void(0);');
aElement.setAttribute('onclick', 'click();');
var specialNames = [];
specialNames[1] = 'Ace';
specialNames[11] = 'Jack';
specialNames[12] = 'Queen';
specialNames[13] = 'King';
for (var a = 1; a <= 13; a++)
{
    var span = document.createElement('span');
    span.setAttribute('name', 'num' + a);
    if (specialNames[a])
    {
        span.setAttribute('title', specialNames[a]);
        span.innerHTML = specialNames[a][0];
    }
    else
    {
        span.setAttribute('title', a);
        span.innerHTML = a;
    }
    aElement.appendChild(span);
    aElement.appendChild(document.createTextNode(' '));
}
var br = document.createElement('br');
aElement.appendChild(br);
var suitNames = ['Hearts', 'Diamonds', 'Clubs', 'Spades'];
var suits = ['♥', '♦', '♣', '♠'];
for (var a = 0; a < 4; a++)
{
    span = document.createElement('span');
    span.setAttribute('name', 'suit' + suitNames[a][0]);
    span.setAttribute('title', suitNames[a]);
    if (a < 2)
    {
        span.setAttribute('class', 'red');
    }
    span.innerHTML = suits[a];
    aElement.appendChild(span);
    aElement.appendChild(document.createTextNode(' '));
}
cardChoose.appendChild(aElement);
function update()
{
    var totalCards = document.getElementById('cardNums').value;
    if(event.type != 'load')
    {
        if(totalCards == '' || isNaN(Number(totalCards)))
        {
            totalCards = '0';
            return;
        }
    }
    if(Number(totalCards) > numCards)
    {
        for(var a = numCards; a < Number(totalCards); a++)
        {
            var newCardChoose = cardChoose.cloneNode(true);
            newCardChoose.setAttribute('id', 'chooser' + a);
            document.getElementById('cardChooser').appendChild(newCardChoose);
        }
        numCards =...