JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<input type='button' id='deal' value='Deal Cards' /> 
<input type='button' id='whoWins' value='Who Wins' /> 

<div id='output1'></div> 
<div id='output2'></div>

CSS

#output1 { 
    display: relative; 
    background: pink; 
}
#output2 { 
    display: relative; 
    background: pink; 
}

JavaScript

Array.prototype.shuffle = function() {
     var len = this.length;
     var i = len;
     while (i--) {
          var p = parseInt(Math.random()*len);
          var t = this[i];
          this[i] = this[p];
          this[p] = t;
     }
};

var $ = function(id) { 
    return document.getElementById(id); 
}; 

var d = $('deal'),
//console.log(d); 
p1 = $('output1'), 
p2 = $('output2');
    
d.addEventListener('click', goz, false); 
function goz() {    
    var x = new dealCards(); 
    console.log(x.deal()); 
    console.log(x.shuffleCards()); 
    console.log(x.output(cards)); 
    //console.log(x); 
    //return x;     
}; 

function dealCards() {}
dealCards.prototype = { 
    constructor: dealCards, 
    buildDeck: function() {     
        var cardRanks = ['A',2,3,4,5,6,7,8,9,10,'J','Q','K'],
            cardSuit = ['S','C','H','D'],
            cards = [];
        
        var x = 0, 
            c = cardSuit.length;
        for (;x<c;x++) {
            var _i = 0, 
                _j = cardRanks.length;
            for (;_i<_j;_i++) {
                cards.push(cardRanks[_i] + cardSuit[x]); 
            }     
        }   
        return cards;  
    },
    shuffleCards: function() { 
        var output = $('output'), 
            cards = this.buildDeck(); 
        cards.shuffle(); 
        return cards; 
    },
    output: function() {
        this.cards = cards;  
        var p11 = [], 
            p22 = [];
        //console.log(cards); 
        for (var i=0;i<cards.length;i++) { 
            (cards.indexOf(cards[i]) % 2 === 0) ? p11.push(cards[i]) : p22.push(cards[i]);  
        }
        console.log('p1: '+ p11 + ' !!Length: ' + p11.length);
        console.log('p2: '+ p22 + ' !!Length: ' + p22.length); 
        p1.innerHTML = 'Player 1: ' + p11.shift();
        p2.innerHTML = 'Player 2: ' + p22.shift();         
        return cards; 
    },
    deal: function() { 
    //var x = new dealCards();
    //console.log(this);
      var cards =...