React ATM application

Let's make an ATM app! You will practice the dark art of manipulating components in real time. You will create two components of the same class which will work independently of each other.

Clone this repo, and run npm install. To launch the app, run `npm

In `src/App.js`:

Pass a name property to each Account component, one for "Checking", the other for "Savings". These will be used and accessed as propsfor our component. Remember: Props are immutable, that is, once they are declared, they cannot be changed while the application is running.
Hint:
```
    <div>
      <Account name="Checking"/>
      <Account name="Savings"/>
    </div>
```

In `src/Account.js`

Use the property you set in App.js and add it to the <h2>

Hint:

    <div className="account">
      //this.props.name is referring to the name property we assigned the App component in App.js
      <h2>{this.props.name}</h2>
      <div className="balance">$0</div>
      <input type="text" placeholder="enter an amount" />
      <input type="button" value="Deposit" />
      <input type="button" value="Withdrawl" />
    </div>

Remember to set a ref on the text field for targeting

Save your work. You should see two components named Deposit and Withdrawl. You're getting there!

Add a balance property to state and set to 0 initially

Hint:

    class Account extends Component {
        constructor(props){
          super(props)
          this.state = {
            balance: 0
          }
        }
    }

When the Deposit button is clicked, you should add the amount entered in the text field to the balance

Hint:

a. Add a click handler in your input tags in our JSX return block:

  <input type="button" value="Deposit" onClick={this.handleDepositClick} />

b. Define a click handler method within the Account class

  handleDepositClick(e) {
    // It is good practice to still prevent default behavior
    e.preventDefault()
    // set a local variable to the amount entered in the text box.
    let amount = this.refs.amount.value
    // set a local variable to the new balance based off of the original balance + amoun
    let newBalance = this.state.balance + amount;
    // set the balance to the newBalance using the setState method (necessary)
    this.setState({
      balance: newBalance
    })
    // empty out the text box in this component
    this.refs.amount.value = '';
  }

PS - the amount entered in the text field will initially be a string, so you'll need to convert that to a number

c. Don't forget to bind your click methods inside your constructor!

      
    this.handleDepositClick = this.handleDepositClick.bind(this)
    this.handleWithdrawlClick = this.handleWithdrawlClick.bind(this)

When the Withdraw button is clicked, you should deduct the amount entered in the text field to the balance. You should not be able to withdraw more than the current balance

Hint:

Try to mirror the functionality of the Deposit function above.

If the current balance is 0, you should add a class of zero to the <div className="balance">.

Hint:

In the Account.js render method:

  // set the default class to `balance` for the balanceClass.
  let balanceClass = 'balance';
  // if the balance is 0, then add the class zero to balanceClass
  if (this.state.balance === 0) {
    balanceClass += ' zero';
  }

Replace the hardcoded `balance` class with the balanceClass variable in your return jsx code block:

    <div className={balanceClass}>$0</div>

giancorzo/atm-react

React ATM application

In src/App.js:

In src/Account.js

In `src/App.js`:

In `src/Account.js`