Balance Component exercise

Welcome to the discussion about the balance component exercise.

Style the AccountBalance component on your own before proceeding to the next section.

  1. Create a CSS file, and import it in AccountBalance.jsx.
  2. Then make sure some styles are added to the component.

In AccountBalance.jsx:

import ‘./AccountBalance.css’;

export default class AccountBalance extends Component {

render() {

    return (

        <section className="balance">

          Balance: $ {this.props.amount}  

        </section>

    );

}

}

In AccountBalance.css:

.balance {

font-size: 3rem;

}

1 Like

I went for a similar style as the table:

Solution
section {
    color: green;
    font-size: 1.4rem;
    border: 1px solid #cccccc;
    padding: 0.25rem;
}

Also added a label so you can tell that the balance is a balance.

export default class AccountBalance extends Component {
    render() {
        return (
            <section>
              Balance: $ {this.props.amount}  
            </section>
        );
    }
}
1 Like

//AccountBalance.jsx

import React, { Component } from ‘react’;
import PropTypes from ‘prop-types’;
import ‘./AccountBalance.css’;

class AccountBalance extends Component {
render() {
return (

$ {this.props.amount}

) ;
}
}
export default AccountBalance;

AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
};

//=========================================
//AccountBalance.css

section{
background-color: #c5e925;
border: 1px solid;
width: 25vh;
margin: 50px auto 50px auto ;

.jsx

export default class AccountBalance extends Component {
    render() {
        return (
            <section>
             $ {this.props.amount}   
            </section>
        );
    }
}

and .css

section {
    color: yellow;
    font-size: 2rem;
    border: 1px solid yellow;
    width: 25vh;
}
  1. Create a CSS file, and import it in AccountBalance.jsx.
  2. Then make sure some styles are added to the component.
AccountBalance.jsx.
import React, { Component } from 'react'
import './AccountBalance.css';
import PropTypes from 'prop-types';

export default class AccountBalance extends Component {
    render() {
        return (
            <section className="balance">
                <strong>Balance : </strong>$ {this.props.amount}
            </section>
        );
    }
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
AccountBalance.css
.balance {
    margin: 20px auto 0 auto;
    border: 1px solid #cccccc;
    width: 98vw;
    max-width: 780px;
    font-size: 1.4rem;
}

JSX:

...
render() {
        return (
            <section className="accountbalance">
                Your Balance is: {this.state.currency}{this.state.amount}
            </section>
        )
    }
...

.CSS:

.accountbalance{
    color: greenyellow;
    font-size: 2rem;
    border: 1px solid #cccccc;
    padding: 1rem;

}
1 Like

In AccountBalance.jsx:

import ‘./AccountBalance.css’;

export default class AccountBalance extends Component {

render() {

    return (

        <section className="balance">

          Balance: $ {this.props.amount}  

        </section>

    );

}

}

In AccountBalance.css:

.balance {

font-size: 3rem;

}