Balance Component exercise

[CryptoDev]

.account-balance {
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
    display: block;
    margin-left: 71rem;
    margin-right: 71rem;
    margin-bottom: 2rem;
    font-size: medium;
    text-align: center;
      
}

import React, { Component } from 'react';
import './AccountBalance.css';
import PropTypes from 'prop-types';
export default class AccountBalance extends Component {
    render() {
        return (
            <section className="account-balance">
             Balance: ${this.props.amount}  
            </section>
        )
    }
}

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

[Spartak]

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



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

AccountBalance.css

.account-balance {
    text-align: center;
    font-size: 2rem;
    color: white;
    margin-top: 20px;
}

[jelle_van_der_meer]

1. Create a CSS file, and import it in AccountBalance.jsx.
I created a css file named AccountBalance.css then i imported it into the jsx file with import './AccountBalance.css'; and gave the section where the balance shows a classname so i can acces it from the css file.

2. Then make sure some styles are added to the component.
and this is the code i used to style the balance that is shown with:
.AccountBalance{
color: lightgreen;
font-size: 30px;
tex-align: center;
margin: 30px 30px;
}

[MARTIS]

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Section = styled.section`
    font-size: 2rem;
    text-align: left;
    padding: 1.5rem 0 1.5rem 5rem;
`;

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

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

[lucas]

• AccountBalance.jsx

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

export default class AccountBalance extends Component {
   constructor(props) {
      super(props)

   }

   render() {
      return(
         <section className="account-balance">
         Balance ${this.props.amount}
         </section>
      )
   }
}

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

• AccountBalance.css

.account-balance {
   font-size: 1.5rem;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.952);
   color: yellowgreen;
   margin-top: 5px;
}

[Emmerich]

1. import ‘./AccountBalance.css’;

2. section {
   color: #61DBFB;
   text-align: center;
   padding: 10px;
   font-size: 1.2em;
   }

[KryptoS]

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

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

[KryptoS]

AccountBalance.css

.acct-balance {
    background-color: #282c34;
    font-size: 2rem;
    text-align: center;
    color: rgb(151, 150, 223);
  }

[derdis14]

Inside of AccountBalance.jsx

import "./AccountBalance.css";

Inside of AccountBalance.css

.Account-balance {
    font-size: 3rem;
    color:  #61DBFB;
    background-color: black;
    text-align: center;
}

[zach]

from AccountBalance.css file:

.balance-box {
    font-size: 2vh;
    color: greenyellow;
    padding: 1rem;
}

And from AccountBalance.jsx file:

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

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


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

[Julie66]

This is my response, however changes don’t appear in the app.

AccountBalance.jsx

import “./AccountBalance.css”;

export default class AccountBalance extends Component {
render() {
return (

$ {this.props.amount}

);
}
}

AccountBalance.css

.acct-bal tr{
font-size: 3rem;
color: rgb(102, 134, 180);
}

[Bozidar]

On the .jsx:

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


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

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

On the .css:

#accountBalance {

    background-color: rgb(78, 162, 173);
    font-size: 2rem;
    font-weight: 600;
    padding: 8px;
    }

[ol_frank]

[Dominykas_Pozleviciu]

[StanleyGM]

jsx file:

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


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

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

css file:

.Balance{
    font-size: 4rem;
    border: 2px solid #0ef106;
    padding: 2rem;
}

[Bhujanga]

AccountsBalance.jsx

import React, { Component } from 'react';
import './AccountsBalance.css';

import PropTypes from 'prop-types';

export default class AccountsBalance extends Component {
    render() {
        return (
            
        <section className="balance-section">
       <table>
           <tr className="balance-row">x
            <td >Your account balance: ${this.props.amount}</td>
           </tr>
       </table>
        </section>  
        );
    }
}


AccountsBalance.propTypes = {

    amount: PropTypes.number
}

AccountsBalance.css

.balance-section {
    color: black;
    background-color: azure;
    text-decoration: underline blue;
    
}

.balance-row td {
    border: 1px solid antiquewhite;
    width: 25vh;
}

[Bhujanga]

love this! text shadow looks cool although never used in production I guess, haha

[Dominykas_Pozleviciu]

haha thanks! I just generated it on the https://htmlcheatsheet.com/css/

[jad]

Hi,
I’m having a few problems with the lesson “exercise-balance component” in the terminal I couldn’t change from bash to node, it’s not possible this option for me. How come? what I should do? and what’s the difference between bash and node?
Then the webpage is not opening anymore for me, I see the page bellow in attachment.
Thanks in advance

[Malik]

This is an issue with the import statements. Please look at your directory and the respective import statements.

Cheers
Malik