mcsuth/atm.css

## atm.css
@import url(http://fonts.googleapis.com/css?family=Oleo+Script);
@import url(http://fonts.googleapis.com/css?family=Ruluko);

#content {
margin: 0 auto;
text-align: center;
width: 700px;
}

#nav {
margin: 50px 0;
}

#title {
color: #F52F4F;
font-family: 'Oleo Script', cursive;
font-size: 50px;
}

#checkingAccount {
float: left;
}

#savingsAccount {
float: right;
}

.account {
background-color: #6C9A74;
border: 1px solid #295A33;
padding: 10px;
}

.balance {
background-color: #E3E3E3;
border: 1px solid #676767;
font-family: 'Ruluko', sans-serif;
font-size: 50px;
padding: 25px 0;
}

.clear {
clear: both;
}

.zero {
background-color: #F52F4F;
color: #FFFFFF;
}

## atm.html
<!doctype html>
<html>
<head>
<title>ATM</title>
<meta charset="utf-8">
<link rel="stylesheet" href="atm.css">
<script src="atm.js"></script>
</head>
<body>
  <img src="trollface.png" id="trollface" width=100% style="display: none;">
<div id="content">
<div id="nav">
<div id="logo"><img src="ga.png" alt="Bank of GA"/></div>
<div id="title">Bank of GA</div>
</div>
<div class="account" id="checkingAccount">
<h1>Checking</h1>
<div class="balance" id="balance1" style="background-color: red;">$0</div>
<input id="checkingAmount" type="text" placeholder="enter an amount" />
<input id="checkingDeposit" type="button" value="Deposit" />
<input id="checkingWithdraw" type="button" value="Withdraw" />
</div>
<div class="account" id="savingsAccount">
<h1>Savings</h1>
<div class="balance" id="balance2" style="background-color: red;">$0</div>
<input id="savingsAmount" type="text" placeholder="enter an amount" />
<input id="savingsDeposit" type="button" value="Deposit" />
<input id="savingsWithdraw" type="button" value="Withdraw" />
</div>
<div class="clear"></div>
</div>
</body>
</html>

## atm.js
// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload
// The load event fires at the end of the document loading process.
// At this point, all of the objects in the document are in the DOM,
// and all the images and sub-frames have finished loading.

var checking = 0;
var savings = 0;

window.onload = function(){

// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick
// The click event is raised when the user clicks on an element.
document.getElementById("checkingDeposit").onclick = function(event){
// Any code you put in here will be run when the checkingDeposit button is clicked
  if ((checking + parseInt(document.getElementById("checkingAmount").value)) >= 0)
	{
		checking += parseInt(document.getElementById("checkingAmount").value);
		document.getElementById("balance1").innerHTML = "$" + checking;
	}
	else {
		document.getElementById("trollface").style = "display: visible;";
		setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
};

document.getElementById("savingsDeposit").onclick = function(event){
// Any code you put in here will be run when the savingsDeposit button is clicked
	if ((savings + parseInt(document.getElementById("savingsAmount").value)) >= 0)
	{
		savings += parseInt(document.getElementById("savingsAmount").value);
		document.getElementById("balance2").innerHTML = "$" + savings;
	}
	else {
		document.getElementById("trollface").style = "display: visible;";
		setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
};

document.getElementById("checkingWithdraw").onclick = function(event){
// Any code you put in here will be run when the checkingWithdraw button is clicked
	if ((checking - parseInt(document.getElementById("checkingAmount").value)) >= 0)
	{
		checking -= parseInt(document.getElementById("checkingAmount").value);
		document.getElementById("balance1").innerHTML = "$" + checking;
	}
	else if ((savings - parseInt(document.getElementById("checkingAmount").value)) >= 0){

		savings -= parseInt(document.getElementById("checkingAmount").value);
		savings += checking;
		checking = 0;
		document.getElementById("balance2").innerHTML = "$" + savings;
		document.getElementById("balance1").innerHTML = "$" + checking;
	}
	else {
		document.getElementById("trollface").style = "display: visible;";
		setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
};

document.getElementById("savingsWithdraw").onclick = function(event){
// Any code you put in here will be run when the savingsWithdraw button is clicked
	if ((savings - parseInt(document.getElementById("savingsAmount").value)) >= 0)
	{
		savings -= parseInt(document.getElementById("savingsAmount").value);
		document.getElementById("balance2").innerHTML = "$" + savings;
	}
	else if ((checking - parseInt(document.getElementById("savingsAmount").value)) >= 0)
	{
		checking -= parseInt(document.getElementById("savingsAmount").value);
		checking += savings;
		savings = 0;
		document.getElementById("balance1").innerHTML = "$" + checking;
		document.getElementById("balance2").innerHTML = "$" + savings;
	}
	else {
		document.getElementById("trollface").style = "display: visible;";
		setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
};
};

function hideTrollface() {
	document.getElementById("trollface").style = "display: none;";
}
	@import url(http://fonts.googleapis.com/css?family=Oleo+Script);
	@import url(http://fonts.googleapis.com/css?family=Ruluko);

	#content {
	margin: 0 auto;
	text-align: center;
	width: 700px;
	}

	#nav {
	margin: 50px 0;
	}

	#title {
	color: #F52F4F;
	font-family: 'Oleo Script', cursive;
	font-size: 50px;
	}

	#checkingAccount {
	float: left;
	}

	#savingsAccount {
	float: right;
	}

	.account {
	background-color: #6C9A74;
	border: 1px solid #295A33;
	padding: 10px;
	}

	.balance {
	background-color: #E3E3E3;
	border: 1px solid #676767;
	font-family: 'Ruluko', sans-serif;
	font-size: 50px;
	padding: 25px 0;
	}

	.clear {
	clear: both;
	}

	.zero {
	background-color: #F52F4F;
	color: #FFFFFF;
	}
	<!doctype html>
	<html>
	<head>
	<title>ATM</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="atm.css">
	<script src="atm.js"></script>
	</head>
	<body>
	<img src="trollface.png" id="trollface" width=100% style="display: none;">
	<div id="content">
	<div id="nav">
	<div id="logo"><img src="ga.png" alt="Bank of GA"/></div>
	<div id="title">Bank of GA</div>
	</div>
	<div class="account" id="checkingAccount">
	<h1>Checking</h1>
	<div class="balance" id="balance1" style="background-color: red;">$0</div>
	<input id="checkingAmount" type="text" placeholder="enter an amount" />
	<input id="checkingDeposit" type="button" value="Deposit" />
	<input id="checkingWithdraw" type="button" value="Withdraw" />
	</div>
	<div class="account" id="savingsAccount">
	<h1>Savings</h1>
	<div class="balance" id="balance2" style="background-color: red;">$0</div>
	<input id="savingsAmount" type="text" placeholder="enter an amount" />
	<input id="savingsDeposit" type="button" value="Deposit" />
	<input id="savingsWithdraw" type="button" value="Withdraw" />
	</div>
	<div class="clear"></div>
	</div>
	</body>
	</html>
	// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload
	// The load event fires at the end of the document loading process.
	// At this point, all of the objects in the document are in the DOM,
	// and all the images and sub-frames have finished loading.

	var checking = 0;
	var savings = 0;

	window.onload = function(){

	// https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick
	// The click event is raised when the user clicks on an element.
	document.getElementById("checkingDeposit").onclick = function(event){
	// Any code you put in here will be run when the checkingDeposit button is clicked
	if ((checking + parseInt(document.getElementById("checkingAmount").value)) >= 0)
	{
	checking += parseInt(document.getElementById("checkingAmount").value);
	document.getElementById("balance1").innerHTML = "$" + checking;
	}
	else {
	document.getElementById("trollface").style = "display: visible;";
	setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
	};

	document.getElementById("savingsDeposit").onclick = function(event){
	// Any code you put in here will be run when the savingsDeposit button is clicked
	if ((savings + parseInt(document.getElementById("savingsAmount").value)) >= 0)
	{
	savings += parseInt(document.getElementById("savingsAmount").value);
	document.getElementById("balance2").innerHTML = "$" + savings;
	}
	else {
	document.getElementById("trollface").style = "display: visible;";
	setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
	};

	document.getElementById("checkingWithdraw").onclick = function(event){
	// Any code you put in here will be run when the checkingWithdraw button is clicked
	if ((checking - parseInt(document.getElementById("checkingAmount").value)) >= 0)
	{
	checking -= parseInt(document.getElementById("checkingAmount").value);
	document.getElementById("balance1").innerHTML = "$" + checking;
	}
	else if ((savings - parseInt(document.getElementById("checkingAmount").value)) >= 0){

	savings -= parseInt(document.getElementById("checkingAmount").value);
	savings += checking;
	checking = 0;
	document.getElementById("balance2").innerHTML = "$" + savings;
	document.getElementById("balance1").innerHTML = "$" + checking;
	}
	else {
	document.getElementById("trollface").style = "display: visible;";
	setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
	};

	document.getElementById("savingsWithdraw").onclick = function(event){
	// Any code you put in here will be run when the savingsWithdraw button is clicked
	if ((savings - parseInt(document.getElementById("savingsAmount").value)) >= 0)
	{
	savings -= parseInt(document.getElementById("savingsAmount").value);
	document.getElementById("balance2").innerHTML = "$" + savings;
	}
	else if ((checking - parseInt(document.getElementById("savingsAmount").value)) >= 0)
	{
	checking -= parseInt(document.getElementById("savingsAmount").value);
	checking += savings;
	savings = 0;
	document.getElementById("balance1").innerHTML = "$" + checking;
	document.getElementById("balance2").innerHTML = "$" + savings;
	}
	else {
	document.getElementById("trollface").style = "display: visible;";
	setTimeout(hideTrollface,3000);
	}
	if (checking == 0) { document.getElementById("balance1").style = "background-color: red"; }
	if (checking > 0) { document.getElementById("balance1").style = "background-color: grey"; }
	if (savings == 0) { document.getElementById("balance2").style = "background-color: red"; }
	if (savings > 0) { document.getElementById("balance2").style = "background-color: grey"; }
	};
	};

	function hideTrollface() {
	document.getElementById("trollface").style = "display: none;";
	}