GithubHelp home page GithubHelp logo

atm's Introduction

ATM application

We're going to build an application to track checking and savings account balances.

But first... Pseudocode (20 min)

Let's take 20 minutes to write some pseudocode for the lab. Think carefully about every step involved in using an ATM. For example, it allows users to input a dollar amount when they want deposit money. Also, think about how there are two types of accounts--checking and savings. Take a look at the Specifications below to guide your pseudo.

Put your pseudocode into comments within your program, this will factor into your lab's "grade."

...and then Peer Review (10 min)

Take some time to review a peer's pseudo and add suggestions to improve your partner's pseudocode.

Specifications

You may edit the HTML file (but might not need to).

  • Users can deposit money into one of the bank accounts
  • Users can 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.
  • The color of a bank account should reflect its balance. (There's a CSS class called .zero already written for this.)

Commits to Make (Suggested)

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.

  1. 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")
  • On clicking "Deposit", it should get the user input
    • Just console.log it
    • 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.
  • 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

...then follow the same series of commits, but for the savings account.

Bonus: 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, bring the withdrawn-from account down to $0 and take the remainder from the other account.
    • If the withdrawn amount is more than the combined account balance, display an error.

atm's People

Contributors

andrewsunglaekim avatar jshawl avatar marcwright avatar nolds9 avatar robertakarobin avatar superbuggy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.