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;

}

The colors of money.

1 Like

Some padding and line-height would help.

1 Like

AccountBalance.css

.accountbalance {
    color: yellow;
    font-size: 2rem;
    padding: 1rem;
    border: 1px solid whitesmoke;
}

AccountBalance.jsx

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

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

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
1 Like

I have downloaded some dependencies therefore I didn’t see the reason to add the attribute into the tag:

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

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

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

The CSS file looks like this:

tbody {
    display: table-row-group
    
}

.coin-table {
    font-size: 20px;
    color: orange;
    align-content: left;
}

.coin-row td {
    border: 2px solid gold;
}

.App {
    background-color: gainsboro;
}

.App-title {
    color: gold;
}

section {
    display: inline;
    align-self: auto;
}```
2 Likes

Crazy Fun! Love it!

2 Likes

2 Likes
import './accountbalance.css';

export default class AccountBalance extends Component {
    render() {
        return (
            <section className="account-balance">
                Balance: <span> ${this.props.amount} </span>
            </section>
        )
    }
}
.account-balance {
    width: 25vh;
    font-size: 1.2rem;
    color: #cccccc;
    padding: 1rem;
}

span {
    color: #769460;
}
2 Likes
import './AccountBalance.css';

export default class AccountBalance extends Component {
    render() {
        return (
            <section className="AccountBalance">
            $ {this.props.amount}
            </section>
        );
    }
}
.AccountBalance{
    font-size: 3rem;
    color: darkorange;
}
2 Likes

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

export default class AccountBalance extends Component {

constructor(props) {
    super(props);
    this.state = {
        amount: this.props.amount
    }
}

currencyOptions = {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
}

getAmount = () => { 
    return (
        this.state.amount.toLocaleString(undefined, this.currencyOptions)
    );
}

render() {
    return (
        <span>
            Account Balance &nbsp;
            <span className="amountclass">
                 ${this.getAmount()}  
            </span> 
        </span>
    )
}

}

AccountBalance.protoType = {
amount: PropTypes.number.isRequired
}

css file:
.amountclass {
color: red
}

Question:

what are your suggestions for the .gitignore file? should package-lock.json be in this list?

render() {
return (
< Section >
${this.getAmount()}
< / Section >
)
}

does not work I get this error:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, render, attrs, componentStyle, displayName, shouldForwardProp, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}). If you meant to render a collection of children, use an array instead.

is this some nodejs version problem?

$ node --version
v10.16.3
$ npm --version
6.12.0

I also tried this version:

$ node --version
v12.18.3
$ npm --version
6.14.8

same error message using

instead of works fine.
missing something else in the project?

Data modeling is always key. Here, I guess a constant with exactly 2 digits is sufficient, then you can use padStart - padEnd to manage the zeros.

I know some other currencies have more or less digits (with time it will be less due to inflation), while in case of Bitcoin, I can imagine one day more digits… but you tackle the problem once you need it.

1 Like