mrkrosenberg / atm-react

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 from inside it. The repo already includes a partial React app. To launch the app, run npm start.

In src/App.js:

1. 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.

   Click for code:

       <div>
         <Account name="Checking"/>
         <Account name="Savings"/>
       </div>

In src/Account.js

2. Use the property you set in App.js to add the name of the account to the <h2>.

   Click for code:

       <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>

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

3. Add a balance property to state, and set to 0 initially.

   Click for code:

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

There are several ways to implement a form in React, here we took the approach as described in these docs.

4. Add a variable to the component state that is set to whatever value is typed into the text entry.

   Hint:

   this.state = {
     balance : 0,
     valueInput:''
   }
   
   // bind the "this" object to the handleChange function
   this.handleChange = this.handleChange.bind(this);
   
   ...
   
   handleChange(event) {
       this.setState({valueInput: event.target.value})
   }
   
   ...
   // attach the listener to the input
   <input type="text" placeholder="enter an amount" value={this.state.valueInput} onChange={this.handleChange}/>

5. Add a function that adds the input value to the current balance when the user clicks 'deposit'

   Hint:

       // bind this object to the function
       this.handleDepositClick = this.handleDepositClick.bind(this);
       
       ...
       
       // define the function
       handleDepositClick(event) {
   
           this.setState({
             balance : parseInt(this.state.balance) + parseInt(this.state.valueInput),
             valueInput : ''
           })
   
       }
   
       ...
       // attach event listener
       <input type="button" value="Deposit" onClick={ (event) => this.handleDepositClick(event)}/>

6. Add a function that subtracts the input value to the current balance when the user clicks 'withdraw'

   Hint:

       this.handleWithdrawClick = this.handleWithdrawClick.bind(this);
       
       ...
   
       handleWithdrawClick(event) {
           
           let newBalance = parseInt(this.state.balance) - parseInt(this.state.valueInput)
           
           if ( newBalance >= 0 ){            
               this.setState({
                 balance : newBalance,
                 valueInput : ''
               })
           } else {
               this.setState({
                 balance : 0,
                 valueInput : ''
               })
           }
       }
   
       ...
   
       <input type="button" value="Deposit" onClick={ (event) => this.handleWithdrawClick(event)}/>

7. If the current balance is 0, you should add a class of zero to the <div className="balance">. You can complete these computations in the render method, but before the JSX portion is returned.

   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>