Balance Component exercise

React Web Development Course
#104

Hi Maia,

You’ve probably figured this out by now but in case you haven’t, there’s a typo in the first line of the component name (line 6).

export default class AccoubtBalance extends Component {…

1 Like
#105

For 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='display-account-balance'>
              Your Balance: {this.props.amount}
            </section>
    );
  }
}

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

Then, AccountBalance.css

.display-account-balance {
    color: rgb(121, 209, 121);
    text-align: right;
    margin-right: 10px;
}
#106

Yes, I did. As I moved through out the course, especially, Styled Components, I made a mess. Had to uninstall VS completely and now I’m dealing with a error on VS because package.json file cannot be found on my WEBDEV folder. Aff … still trying to fix it.
Thank you Diego!
Maia

#107

AccountBalance.jsx:

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

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

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

AccountBalance.css:

.accountBalance-section {
    color: #cccccc;
    font-size: 2rem;
    border: 3px solid #cccccc;
    padding: 0.5rem;
}
#108 
import React, { Component } from 'react';
import './AccountBalance.css';
import PropTypes from 'prop-types';

export default class AccountBalance extends Component {
  render() {
      return (
          <div className='account-row'>
              ${this.props.amount}
          </div>
      )
  }
}

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

.account-row td {
    border: 1px solid #cccc;
    width: 20vh;
}
#109 
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './AccountBalance.css'

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

.balance {
  font-size: 3rem;
  color:bisque;
  margin-top: 45px;
}

:mage:t3:‍♂

1 Like
#110 
AccountBalance.jsx:
render() {
    return (
      <section className='account-balance'>
        Account Balance: $ {this.props.amount}       
      </section>
    );


AccountBalance.css:

.account-balance{
    font-size: 20px;
    color: rgb(165, 42, 149);
    text-decoration: underline;
}
1 Like
#111 
export default class AccountBalance extends Component {
    render() {
        return (
            <section>
             $ {this.props.amount}   
            </section>
        );
    }
}

section {
    color: greenyellow;
    font-size: 1.4rem;
    border: 1px solid #cccccc;
    width: 25vh;
}
#112

hi, this is my code :

AccountBalance.jsx

import React, { useState } from 'react';
import propTypes from 'prop-types';
import "./accountBalance.css";

export default function AmountBalance({ amount }) {
    const [balance, setBalance] = useState(amount)
    return (
        <section className='balance-section'>
            $ {balance}
        </section>
    )
}


AmountBalance.propTypes = {
    amount: propTypes.number.isRequired
}

AccountBalance.css ( create from " css style Generator " )

.balance-section {
    font-family: Georgia, serif;
    font-size: 25px;
    letter-spacing: 2px;
    word-spacing: 2px;
    color: #000000;
    font-weight: 700;
    text-decoration: underline solid rgb(68, 68, 68);
    font-style: normal;
    font-variant: normal;
    text-transform: capitalize;
    }
1 Like
#113

AccountBalance.jsx:

import ‘./AccountBalance.css’;


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

AccountBalance.css:

.account-balance {
    font-size: 1.2rem;
    color: #cccccc;
    border: 1px solid #cccccc;
    width: 25vh;
}
1 Like
#114

.balance{
flex: auto;
border: 3px solid #0efb59;
width: 50%;
background-color: #470aef;
font: bold;
font-size:x-large;
position: absolute;
left: 25%;

}

1 Like
#115 
import ‘./AccountBalance.css’;


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

.account-balance {
font-size: 2rem;
text-align: center;
padding: 1.5rem 0 1.5rem 5rem
}
1 Like
#116

AccountBalance.css:

section {
    color: black;
    font-size: 2rem;
    border: 1px solid black;
    width: 25vh;
    background-color: white;
    border-width: 10px;
}

AccountBalance.jsx:

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

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

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
1 Like
#117 
section {
    font-size: 2rem;
    margin: 15px;
    border-bottom: 1px solid;
    width: 40vh;
}
1 Like
#118 
.balance {
    font-size: 1.5rem;
    background-color: rgb(104, 194, 164);
    color: black;
    margin: 10px;
}
1 Like
#119

well done michael. great you finally got it working

1 Like
#120

Thank you …

1 Like
#121

AccountBalance.jsx

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

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

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

AccountBalance.css

.AccountBalance {
  font-size: 2rem;
  color: white;
  background-color: black;
  text-align: right;
  padding: 0 2rem 2rem 0;
}
1 Like
#122

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">
                Account Balance: ${this.props.amount}
            </section>
        );
    }
}

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

AccountBalance.css

.AccountBalance {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: .1rem;
    border-bottom-style: solid;
    border-bottom-color: white;
    font-weight: bold;
    background-color: rgb(0, 0, 174);
}
#123

CSS

section {
    color: rgb(99, 30, 190);
    font-size: 18pt;
    border: 2px solid #201129;
    font-family: Arial, Helvetica, sans-serif;
}

JSX


 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
}