Skip to content

Instantly share code, notes, and snippets.

@coldhead

coldhead/ATM.md Secret

Created April 2, 2014 04:56
Show Gist options
  • Save coldhead/e6dea71f148f948ba3d3 to your computer and use it in GitHub Desktop.
Save coldhead/e6dea71f148f948ba3d3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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;
}
Raw
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 () {
// The click event is raised when the user clicks on an element.
document.getElementById("checkingDeposit").addEventListener('click', function (event) {
// Any code you put in here will be run when the checkingDeposit button is clicked
});
document.getElementById("savingsDeposit").addEventListener('click', function (event) {
// Any code you put in here will be run when the savingsDeposit button is clicked
});
document.getElementById("checkingWithdraw").addEventListener('click', function (event) {
// Any code you put in here will be run when the checkingWithdraw button is clicked
});
document.getElementById("savingsWithdraw").addEventListener('click', function (event) {
// Any code you put in here will be run when the savingsWithdraw button is clicked
});
};
Raw
ATM.md

#ATM App

###Summary: This lab will help you practice JavaScript functions and manipulating the DOM. You'll be selecting elements, manipulating HTML, and manipulating style along with building out the logic using JavaScript.

###Activity: You will build an application using basic javascript functions and DOM manipulation.

###Specification:

  • Keep track of the checking 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?
Raw
index.html
<!doctype html>
<html>
<head>
<title>GA ATM</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/atm.css">
<script src="js/atm.js"></script>
</head>
<body>
<div id="content">
<div id="nav">
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment