Untitled

<html>
	<head>
		<title> Black Jack </title>
		<style type="text/css">
			body{
				background-image: url("Blackjack_background.jpg");
			}

				hr{
					width: 50%;
				}

				td{
					width: 100px;
					height: 50px;
					vertical-align: center;
				}

				html{
					font-family: "Lato", sans-serif;
				}

				table {
					box-shadow: 2px 3px 1px #222222;
					background: #0E2418;
					border-collapse: collapse;
				}

				table,th,td{
					border: 2px solid white;
				}

				button{
					height: 50px;
					width: 120px;
					color: white;
					background-color: #701D15;
					border: none;
					box-shadow: 1px 2px 1px #222222;
				}

		</style>
		<script type="text/javascript">
			var player, dealer, bet, cash, name

			var player=0;
			var dealer=0;
			var bet=0;
			var cash=500;
			var name="Rachel";

			function showBet ()
			{
				document.getElementById("betId").innerHTML = "$" + bet;
			}

			function incrementBet() {
				if(bet+10<=cash) {
					bet+=10;
				} else {
					alert("You can't bet that much! Add more money!");
				}
			}

			function getBet()
			{
				var value = prompt("How much money would you like to bet?");
	      if (value[0]=="$")
					value = value.slice(1);
	      value= parseInt(value);
	      if (value>cash){
	          alert("You can't bet that much! Add more money!");
        } else{
	          bet=value;
	      }
			}

			function play()
			{
				player += Math.floor((Math.random()*11) + 1);
				document.getElementById("playerId").innerHTML = "$" + bet;
				if (player >= 21)
					calculateWinnings();
			}

			function calculateWinnings()
			{
				while (dealer < 18)
					{
						dealer += Math.floor((Math.random()*11) + 1);
						cash = cash - bet
						document.getElementById("dealerId").innerHTML = "$" + bet;
						document.getElementById("playerId").innerHTML = "$" + bet;
					}
				if(player > 21)
					{
						document.getElementById("resultId").innerHTML = "Busted! You lose!";
					}
				else if (dealer > 21)
					{
						document.getElementById("resultId").innerHTML = "Dealer Busted! " + name + " wins!";
						cash = cash + bet*2;
					}
				else if (player == 21)
					{
						document.getElementById("resultId").innerHTML = name + " got 21!" + name + " wins!"
						cash = cash + bet*3;
					}
				else if (player > dealer)
					{
						document.getElementById("resultId").innerHTML = name + " wins!"
						cash = cash + bet*2;
					}
				else if (dealer >= player)
					{
						document.getElementById("resultId").innerHTML = "Dealer wins!"
					}

				document.getElementById("cashId").innerHTML = "$" + cash;
				bet = 0
			}

			function newGame()
			{
				document.getElementById("playerId").innerHTML = "";
				document.getElementById("dealerId").innerHTML = "";
				document.getElementById("betId").innerHTML = "";
				document.getElementById("resultId").innerHTML = "";
				document.getElementById("cashId").innerHTML = "$" + cash;

				player = dealer = bet = 0
			}

			function addMoney()
			{
				var value = prompt("How much money would you like to add?");
				cash += parseInt(value);
				document.getElementById("cashId").innerHTML = "$" + cash;
			}

		</script>

	</head>
	<body>
		<center>
			<h1> Welcome to Black Jack! </h1>
				<table>
					<tr>
						<th> Your Total </th>
						<th> Dealer Total </th>
						<th> Bet Amount </th>
						<th> Cash Remaining </th>
					</tr>
					<tr>
						<td> <p id='playerId'>&nbsp;</p></td>
						<td> <p id='dealerId'>&nbsp;</p></td>
						<td> <p id='betId'>&nbsp;</p></td>
						<td> <p id='cashId'> $500 </p></td>
					</tr>

				</table>

				<p> Game Result: <b id="resultId"></b></p>

				<button onclick="incrementBet(); showBet();"> $10 </button>
				<button onclick="getBet(); showBet();"> Custom Bet </button>
				<button onclick="newGame();"> New Game </button>
				<br/>
				<button onclick="play();"> Deal Card </button>
				<button onclick="calculateWinnings();"> Reveal Cards </button>
				<button onclick="addMoney();"> Add Money </button>
				<br/>


		</center>

	</body>


</html>