#ATM application
We're going to build an application to keep track of the checking and savings balances. You can play with an example of what a working version will do in the exampleATM folder.
###User Stories
- As a user, I want to deposit money into one of the bank accounts
- As a user, I want to withdraw money from one of the bank accounts
- 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. (if...else)
- As a user, I want the color of my bank account to reflect it's balance (there's a CSS class called .zero already written for this!)
- Are there ways to refactor your code to make it DRYer or more Object-Oriented?
By no means do you have to follow this. It's just here to help you get started if needed.
Note that these commits are all for the checking account only. Take this one account at a time.
- Test jQuery is working
- Make the
<body>'s background color turn red - Add a click listener to the checking account's "Deposit" button
- When you click the button it should
console.log("hello")
- When you click the button it should
- On clicking "Deposit", it should get the user input
- Just
console.logit - You can save some time by hard-coding a value into the input box:
<input value="something" />. That way you don't need to type stuff in all the time to test it.
- Just
- On clicking "Deposit", it should update the "balance" with the user input
- Just make the user input show up. Don't worry about actually keeping track of a balance yet.
- On "Deposit", it should get the current "balance"
- How can you get the content of the "balance" element?
- The content has a
$at the beginning of it, so Javascript will read it as text rather than as a number. How can you convert this text into a number?
- On "Deposit", it updates the balance
- Now add the user input to the balance, and make it show up in the "balance" element
- On "Withdraw", it updates the balance
- Follow the same steps as before, except you're subtracting instead of adding
- Refactor the existing code
- Challenge: Try to have no
function()that's longer than 5 lines. (Sandi Metz's Rule 2)
- Challenge: Try to have no
...then follow the same series of commits, but for the savings account.
###Bonus
- As a user, I want overdraft protection
- What happens when the user wants to withdraw more money from the checking account than is in the account?
- If a withdrawal can be covered by the balances in both accounts, take the balance of the account withdrawn from down to $0 and take the rest of the withdrawal from the other account.
- If the withdrawal amount is more than the combined account balance, ignore it.
###Tips
- Tackle making your accounts work individually first
- Only start working with the DOM after you have the logic down
- Then tackle them working together with overdraft protection
###Resources
- What is document ready for?
- Adding Event Listeners so things happen when you click
- Attributes for jQuery
- Adding or removing a CSS class using jQuery
- Adding HTML with jQuery
- Removing HTML with jQuery
All content is licensed under a CCBYNCSA 4.0 license. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent