taryneast/atm.css

## readme.md

      
    Raw
  

              readme.md
            
          
    You are writing at ATM.
Start with the existing code - and add the functionality specified below to the atm.js file.
Read the instructions!
Read the comments!
Specification:
Keep track of the check and savings balances somewhere
Add functionality so that a user can deposit money into one of the bank accounts.
Make sure you are updating the display and manipulating the HTML of the page so a user can see the change.
Add functionality so that a user can withdraw money from one of the bank accounts.
Make sure you are updating the display and manipulating the HTML of the page so a user can see the change.
Make sure the balance in an account can't go negative. If a user tries to withdraw more money than exists in the account, ignore the transaction.
When the balance of the bank account is $0 the background of that bank account should be red. It should be gray when there is money in the account.
What happens when the user wants to withdraw more money from the checking account than is in the account? These accounts have overdraft protection, so if a withdrawal can be covered by the balances in both accounts, take the checking balance down to $0 and take the rest of the withdrawal from the savings account. If the withdrawal amount is more than the combined account balance, ignore it.
Make sure there is overdraft protection going both ways.
Are there ways to refactor your code to make it DRYer?


## 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>
    <div id="content">
      <div id="nav">
        <div id="logo"><img src="https://d3o09jpaxs6yh2.cloudfront.net/production/assets/ga-lockup-91b6faf530625d6c62c44ae5fae9aa46.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">$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">$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.
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
  };

  document.getElementById("savingsDeposit").onclick = function(event){
    // Any code you put in here will be run when the savingsDeposit button is clicked
  };

  document.getElementById("checkingWithdraw").onclick = function(event){
    // Any code you put in here will be run when the checkingWithdraw button is clicked
  };

  document.getElementById("savingsWithdraw").onclick = function(event){
    // Any code you put in here will be run when the savingsWithdraw button is clicked
  };

};
	@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>
	<div id="content">
	<div id="nav">
	<div id="logo"><img src="https://d3o09jpaxs6yh2.cloudfront.net/production/assets/ga-lockup-91b6faf530625d6c62c44ae5fae9aa46.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">$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">$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.
	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
	};

	document.getElementById("savingsDeposit").onclick = function(event){
	// Any code you put in here will be run when the savingsDeposit button is clicked
	};

	document.getElementById("checkingWithdraw").onclick = function(event){
	// Any code you put in here will be run when the checkingWithdraw button is clicked
	};

	document.getElementById("savingsWithdraw").onclick = function(event){
	// Any code you put in here will be run when the savingsWithdraw button is clicked
	};

	};