gkilmain/main.js

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<div class="container">

	<div id="playerScore"></div>
	<div id="dealerScore"></div>
	<div id="gamesPlayed"></div>

	<div id="dealersHand" class="cf"></div>

	<div id="playersHand" class="cf"></div>


	<div id="buttonWrapper" class="buttons-wrapper">
		<div id="deal" class="button">Deal</div>
		<div id="hit" class="button">Hit</div>
		<div id="stand" class="button">Stand</div>
		<div id="double" class="button">Double</div>
		<div id="newGame" class="button">New Game</div>
	</div>

</div>

<script src="js/test.js"></script>
</body>
</html>

## main.js
var deck = [2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,11,11,11,11];
// Creates a Call To Action div
// Add button class to create basic button style
// @params c - the class
// @params i - the id e.g. ctaHit, ctaStand etc
// @params t - the text
// @params f - the function to call onclick
function ctaGenerator(c, i, t) {
	var cta = document.createElement('div');
	cta.setAttribute('class', c);
	cta.setAttribute('id', i);
	var textNode = document.createTextNode(t);
	cta.appendChild(textNode);
	return cta;
}

// Generates one card
// @appendCardTo - append card to id dealerHand or playerHand
// @value - number value of the card
function cardGenerator(appendCardTo, value) {
	//alert('card generator called!');
	var theCard = document.createElement('div');
	theCard.setAttribute('class', 'card');
	var theCardValue = document.createTextNode(value);
	theCard.appendChild(theCardValue);

	// Append it to player or dealer
	var parentEle = document.getElementById(appendCardTo);
	parentEle.appendChild(theCard);

}

function hit() {
	var card = deck[Math.floor(Math.random()*deck.length)];
	// Ace check
	if (card === 11) {
		var hand = evaluateHand('playersHand');
		var result = card + hand;
		if (result > 21) {
			card = 1;
		}
		console.log('Ace check. Card : ' + card);
	}
    cardGenerator('playersHand',card);
	evaluateHand('playersHand');
}

function dealerHit() {
	var card = deck[Math.floor(Math.random()*deck.length)];
	if (card === 11) {
		var hand = evaluateHand('dealersHand');
		var result = card + hand;
		if (result > 21) {
			card = 1;
		}
		console.log('Ace check. Card : ' + card);
	}
    cardGenerator('dealersHand',card);
	evaluateHand('dealersHand');
}

function stand() {
	evaluateHand('dealersHand');
	document.getElementById('hit').className = 'hide';
	document.getElementById('stand').className = 'hide';
	document.getElementById('double').className = 'hide';
	document.getElementById('deal').className = 'button';
}

function doubleBet() {
	alert('you doubled!!');
}

function deal(name) {
	console.log('Dealing cards...');
	// Dealer gets two cards
	for ( i = 0; i < 2; i++ ) {
        var card = deck[Math.floor(Math.random()*deck.length)];
        cardGenerator('dealersHand',card);
	}

	// Player gets two cards
	for ( j = 0; j < 2; j++ ) {
        var card = deck[Math.floor(Math.random()*deck.length)];
        cardGenerator('playersHand',card);
	}
	evaluateHand('playersHand');
}

// Evaluates a hand
// @params theHand - the id of the hand we want to evaluate
var evaluateHand = function(theHand) {
	var handToEvaluate = document.getElementById(theHand);
	var cardsInHand = handToEvaluate.getElementsByTagName('div');
	var handValue = 0;
	// Get player action buttons
	var hitButton = document.getElementById('hit');
	var standButton = document.getElementById('stand');
	var doubleButton = document.getElementById('double');

	for ( i = 0; i < cardsInHand.length; i++) {
		handValue += parseInt(cardsInHand[i].firstChild.nodeValue);
	}

    var theAttr = handToEvaluate.getAttribute('id');
    // Player flow
    if (theHand === 'playersHand') {
	updateHandValue('playerScore', handValue);

		// If the player has 21
		if (handValue === 21) {
			evaluateHand('dealersHand');
			hitButton.className = 'hide';
			standButton.className = 'hide';
			doubleButton.className = 'hide';
		}

		// If the player bustssss
		if (handValue > 21 && theHand === 'playersHand') {
    		// You have busteeedddddd....
    		// The dealer wins!
    		// Add 1 to dealer score
    		// Show new game button
    		hitButton.className = 'hide';
			standButton.className = 'hide';
			doubleButton.className = 'hide';
    	}
    }

    // Dealer flow
    if (theHand === 'dealersHand') {
	updateHandValue('dealerScore', handValue);

		if (handValue > 21) {
			console.log('Dealer busted with ' + handValue);
		} else if (handValue >= 17 && handValue <= 21) {
    		console.log('dealer stays with ' + handValue);
    	} else {
    		dealerHit();
    	}
    }

    return handValue;
}

var updateHandValue = function(handValueToUpdate, score) {
	var theDiv = document.getElementById(handValueToUpdate);
	theDiv.innerHTML = score;
}

var determineWinner = function(playerHand, dealerHand) {

	if (playerHand > dealerHand) {
		// player wins
		// add 1 to player score
	} else if (playerHand < dealerHand) {
		// dealer wins booo
		// add 1 to dealer
	} else {
		// Both hands are equal
		// No one wins...
	}
	// Show deal button
}

var newGame = function() {
	// Remove the scores
	// Remove the cards

}

window.onload = function () {

	// Attach events to static buttons
	// Hit
	var hitButton = document.getElementById('hit');
	hitButton.addEventListener('click', hit, false);
	// Stand
	var standButton = document.getElementById('stand');
	standButton.addEventListener('click', stand, false);
	// Double
	var doubleButton = document.getElementById('double');
	doubleButton.addEventListener('click', doubleBet, false);

	var newGame = document.getElementById('newGame');
	newGame.addEventListener('click', newGame, false);

	var dealButton = document.getElementById('deal');
	dealButton.addEventListener('click', deal, false);

	// Then hide the buttons
	hitButton.className = 'hide';
	standButton.className = 'hide';
	doubleButton.className = 'hide';
	newGame.className = 'hide';
	dealButton.className = 'hide';

	// Parent div
	var parentElement = document.getElementById('buttonWrapper');
	// Create button
	var startButton = ctaGenerator('button', 'ctaStart', 'Start');
	parentElement.appendChild(startButton);

	// Show the name input element
	startButton.onclick = function() {
		console.log('startButton clicked...');
		// Hide the start button
		startButton.style.display = 'none';
		// Create input element
		var inputEle = document.createElement('input');
		inputEle.setAttribute('class', 'player-name');
		// append it
		parentElement.appendChild(inputEle);

		var submitName = ctaGenerator('button', 'ctaSubmit', 'Enter');
		parentElement.appendChild(submitName);


		submitName.onclick = function() {
			console.log('submitName clicked...');
			var playerName = inputEle.value;

			submitName.style.display = 'none';
			inputEle.style.display = 'none';

			hitButton.className = 'button';
			standButton.className = 'button';
			doubleButton.className = 'button';

			deal(playerName);
		}
	}
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="css/test.css">
	</head>
	<body>
	<div class="container">

	<div id="playerScore"></div>
	<div id="dealerScore"></div>
	<div id="gamesPlayed"></div>

	<div id="dealersHand" class="cf"></div>

	<div id="playersHand" class="cf"></div>


	<div id="buttonWrapper" class="buttons-wrapper">
	<div id="deal" class="button">Deal</div>
	<div id="hit" class="button">Hit</div>
	<div id="stand" class="button">Stand</div>
	<div id="double" class="button">Double</div>
	<div id="newGame" class="button">New Game</div>
	</div>

	</div>

	<script src="js/test.js"></script>
	</body>
	</html>
	var deck = [2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,11,11,11,11];
	// Creates a Call To Action div
	// Add button class to create basic button style
	// @params c - the class
	// @params i - the id e.g. ctaHit, ctaStand etc
	// @params t - the text
	// @params f - the function to call onclick
	function ctaGenerator(c, i, t) {
	var cta = document.createElement('div');
	cta.setAttribute('class', c);
	cta.setAttribute('id', i);
	var textNode = document.createTextNode(t);
	cta.appendChild(textNode);
	return cta;
	}

	// Generates one card
	// @appendCardTo - append card to id dealerHand or playerHand
	// @value - number value of the card
	function cardGenerator(appendCardTo, value) {
	//alert('card generator called!');
	var theCard = document.createElement('div');
	theCard.setAttribute('class', 'card');
	var theCardValue = document.createTextNode(value);
	theCard.appendChild(theCardValue);

	// Append it to player or dealer
	var parentEle = document.getElementById(appendCardTo);
	parentEle.appendChild(theCard);

	}

	function hit() {
	var card = deck[Math.floor(Math.random()*deck.length)];
	// Ace check
	if (card === 11) {
	var hand = evaluateHand('playersHand');
	var result = card + hand;
	if (result > 21) {
	card = 1;
	}
	console.log('Ace check. Card : ' + card);
	}
	cardGenerator('playersHand',card);
	evaluateHand('playersHand');
	}

	function dealerHit() {
	var card = deck[Math.floor(Math.random()*deck.length)];
	if (card === 11) {
	var hand = evaluateHand('dealersHand');
	var result = card + hand;
	if (result > 21) {
	card = 1;
	}
	console.log('Ace check. Card : ' + card);
	}
	cardGenerator('dealersHand',card);
	evaluateHand('dealersHand');
	}

	function stand() {
	evaluateHand('dealersHand');
	document.getElementById('hit').className = 'hide';
	document.getElementById('stand').className = 'hide';
	document.getElementById('double').className = 'hide';
	document.getElementById('deal').className = 'button';
	}

	function doubleBet() {
	alert('you doubled!!');
	}

	function deal(name) {
	console.log('Dealing cards...');
	// Dealer gets two cards
	for ( i = 0; i < 2; i++ ) {
	var card = deck[Math.floor(Math.random()*deck.length)];
	cardGenerator('dealersHand',card);
	}

	// Player gets two cards
	for ( j = 0; j < 2; j++ ) {
	var card = deck[Math.floor(Math.random()*deck.length)];
	cardGenerator('playersHand',card);
	}
	evaluateHand('playersHand');
	}

	// Evaluates a hand
	// @params theHand - the id of the hand we want to evaluate
	var evaluateHand = function(theHand) {
	var handToEvaluate = document.getElementById(theHand);
	var cardsInHand = handToEvaluate.getElementsByTagName('div');
	var handValue = 0;
	// Get player action buttons
	var hitButton = document.getElementById('hit');
	var standButton = document.getElementById('stand');
	var doubleButton = document.getElementById('double');

	for ( i = 0; i < cardsInHand.length; i++) {
	handValue += parseInt(cardsInHand[i].firstChild.nodeValue);
	}

	var theAttr = handToEvaluate.getAttribute('id');
	// Player flow
	if (theHand === 'playersHand') {
	updateHandValue('playerScore', handValue);

	// If the player has 21
	if (handValue === 21) {
	evaluateHand('dealersHand');
	hitButton.className = 'hide';
	standButton.className = 'hide';
	doubleButton.className = 'hide';
	}

	// If the player bustssss
	if (handValue > 21 && theHand === 'playersHand') {
	// You have busteeedddddd....
	// The dealer wins!
	// Add 1 to dealer score
	// Show new game button
	hitButton.className = 'hide';
	standButton.className = 'hide';
	doubleButton.className = 'hide';
	}
	}

	// Dealer flow
	if (theHand === 'dealersHand') {
	updateHandValue('dealerScore', handValue);

	if (handValue > 21) {
	console.log('Dealer busted with ' + handValue);
	} else if (handValue >= 17 && handValue <= 21) {
	console.log('dealer stays with ' + handValue);
	} else {
	dealerHit();
	}
	}

	return handValue;
	}

	var updateHandValue = function(handValueToUpdate, score) {
	var theDiv = document.getElementById(handValueToUpdate);
	theDiv.innerHTML = score;
	}

	var determineWinner = function(playerHand, dealerHand) {

	if (playerHand > dealerHand) {
	// player wins
	// add 1 to player score
	} else if (playerHand < dealerHand) {
	// dealer wins booo
	// add 1 to dealer
	} else {
	// Both hands are equal
	// No one wins...
	}
	// Show deal button
	}

	var newGame = function() {
	// Remove the scores
	// Remove the cards

	}

	window.onload = function () {

	// Attach events to static buttons
	// Hit
	var hitButton = document.getElementById('hit');
	hitButton.addEventListener('click', hit, false);
	// Stand
	var standButton = document.getElementById('stand');
	standButton.addEventListener('click', stand, false);
	// Double
	var doubleButton = document.getElementById('double');
	doubleButton.addEventListener('click', doubleBet, false);

	var newGame = document.getElementById('newGame');
	newGame.addEventListener('click', newGame, false);

	var dealButton = document.getElementById('deal');
	dealButton.addEventListener('click', deal, false);

	// Then hide the buttons
	hitButton.className = 'hide';
	standButton.className = 'hide';
	doubleButton.className = 'hide';
	newGame.className = 'hide';
	dealButton.className = 'hide';

	// Parent div
	var parentElement = document.getElementById('buttonWrapper');
	// Create button
	var startButton = ctaGenerator('button', 'ctaStart', 'Start');
	parentElement.appendChild(startButton);

	// Show the name input element
	startButton.onclick = function() {
	console.log('startButton clicked...');
	// Hide the start button
	startButton.style.display = 'none';
	// Create input element
	var inputEle = document.createElement('input');
	inputEle.setAttribute('class', 'player-name');
	// append it
	parentElement.appendChild(inputEle);

	var submitName = ctaGenerator('button', 'ctaSubmit', 'Enter');
	parentElement.appendChild(submitName);


	submitName.onclick = function() {
	console.log('submitName clicked...');
	var playerName = inputEle.value;

	submitName.style.display = 'none';
	inputEle.style.display = 'none';

	hitButton.className = 'button';
	standButton.className = 'button';
	doubleButton.className = 'button';

	deal(playerName);
	}
	}
	}