JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<h3>Dealer</h3>
<div id="dealer-loses" style="display:none; color:#f00;">Dealer Busted!</div>
<div id="dealer-cards"></div>
<input type="number" value="0" id="dealer-total" />
<div id="dealer-ace-checker"></div>

<h3>You</h3>
<div id="you-lose" style="display:none; color:#f00;">You Busted!</div>
<div id="cards"></div>
<input type="number" value="0" id="total" />
<div id="player-ace-checker"></div>
<button id="deal">Deal!</button>
<button id="hit" style="display:none;">Hit</button>
<button id="stand" style="display:none;">Stand</button>
<div id="player-blackjack" style="display:none;">Blackjack! You win!</div>

CSS

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	color:#272727;
	background:#4f4f4f;
	}

h1 { color:#5f1224; font-size:24px; font-weight:bold; margin:15px auto; }
h2,h3 { color:#e85f1b; margin:10px auto; font-size:18px; font-weight:bold; }

header {
	width:100%;
	height:auto;
	display:block;
	padding:20px 0;
	text-align:center;
	box-shadow:0 8px 8px rgba(0,0,0,.4);
	border-bottom:5px solid #db0;
	}
	/*header img {
		width:100%;
		height:auto;
		}
	*/
main {
	min-height:560px;
	}

main, footer { padding:20px 15px; }

footer {
	padding:15px;
	border-top:5px solid #db0;
	box-shadow:0 -8px 8px rgba(0,0,0,.4);
	text-align:center;
	color:#fff;
	}

#dealer-cards img, #cards img {
	border-radius:5px;
	-webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,.3)));
	margin-bottom:30px;
	}

div.clear { clear:both; height:.01em; }

JavaScript

// set new game variables
var playerTotal = 0;
if($('#total').val('0')){
	$('#total').css('display','none');
}

var dealerTotal = 0;
if($('#dealer-total').val('0')){
	$('#dealer-total').css('display','none');
}

var suits = new Array('c', 'd', 'h', 's');
var ranks = new Array('a', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'j', 'q', 'k');


// initial deal
$('#deal').click(function(){
	var suit = suits[Math.floor(Math.random() * suits.length)];
	var rank = ranks[Math.floor(Math.random() * ranks.length)];

	$('#cards').append('<img src="images/' + suit + rank + '.jpg" alt="" />');
	$('#player-ace-checker').append(rank);

	var currentTotal = $('#total').val();

	if(rank == 'j' || rank == 'q' || rank == 'k'){
		playerTotal = 10;
	}else if(rank == 'a'){
		if(currentTotal > 10){
			playerTotal = 1;
		}else{
			playerTotal = 11;
		}
	}else{
		playerTotal = rank;
	}

	var a = parseInt(playerTotal);
	var b = parseInt(currentTotal);

	var newTotal = a + b;

	$('#total').val(newTotal);
	
	$('#total').css('display','block');

	// dealer's initial deal
	var dealerSuit = suits[Math.floor(Math.random() * suits.length)];
	var dealerRank = ranks[Math.floor(Math.random() * ranks.length)];

	$('#dealer-cards').append('<img src="images/' + dealerSuit + dealerRank + '.jpg" alt="" />');
	$('#dealer-ace-checker').append(dealerRank);

	var dealerCurrentTotal = $('#dealer-total').val();

	if(dealerRank == 'j' || dealerRank == 'q' || dealerRank == 'k'){
		dealerTotal = 10;
	}else if(dealerRank == 'a'){
		if(dealerCurrentTotal > 10){
			dealerTotal = 1;
		}else{
			dealerTotal = 11;
		}
	}else{
		dealerTotal = dealerRank;
	}

	var aDealer = parseInt(dealerTotal);
	var bDealer = parseInt(dealerCurrentTotal);

	var newDealerTotal = aDealer + bDealer;

	$('#dealer-total').val(newDealerTotal);
	
	$('#dealer-total').css('display','block');

	if($('#dealer-total').val() >...