Balance Component exercise

Nev · July 10, 2021, 3:59pm

css:

section{
    font-size: 1.4rem;
    font-weight: bold;
    color: rgb(102, 87, 194);
    margin-top: 20px;
    border-bottom: 1px solid darkturquoise;
}

ibn5x · July 12, 2021, 11:26pm

Balance Component Exercise proposed solution:

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


AccountBalance.propTypes = {

    amount: PropTypes.number.isRequired
}

Styling of added component

.balance{
    display: flex;
    justify-content: center;
    
    color: white;
    border: 1px solid black;

    margin-top: 50px;
    margin-left: 150px;
    margin-right: 150px;
}

alejandravisa · July 17, 2021, 12:23pm

In AccountBalance.css

.balance-amount {
    border: 3px solid rgba(11, 129, 240, 0.63);
    font-size: 3rem;
    color: rgb(238, 207, 31);
}

cherryknot · July 19, 2021, 8:15pm

#balance-id {

margin: 50px auto 0px auto;

font-size: 36px;

color:white;

border: solid 1px white;

width: 250px;

background-color: rgba(2, 2, 41, 0.644);

}

Kippie · July 27, 2021, 3:15am

The .jsx file

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

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

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

The .css file

.account-balance section {
    font-weight: 400;
    font-size: 1.5rem;
    margin-left: -12px;
    text-indent: 0.7rem;
    white-space: nowrap;
    letter-spacing: 0.15rem;
}

gregD · August 22, 2021, 5:50pm

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

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

AccountBalance.css

.amount {
    font-size: 3rem;
    border: 3px solid;
}

VBence99 · August 30, 2021, 3:30pm

jsx

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

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


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

css

#balance {
    width: 35vh;   
    font-weight: bold;
    font-size: 1.2em;
    padding: 5px;
    border: 2px solid rgb(64, 224, 190);
    border-radius: 25vh;
}

#border {    
    margin: 2vh 2vh 0 0;
    display: flex;
    justify-content: flex-end;
}

tony1999 · September 15, 2021, 11:43am

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

section {
    color: blue;
    border: 1px solid;
    font-size: 2rem;
    width: 25vh;
}

Sieg · September 22, 2021, 12:30pm

AccountBalance.js

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

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

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

AccountBalance.css

.Bal {
    color: #FFFFFF;
    font-size: 1.2rem;
    text-align: center;
    border: 2.5px solid #cccccc;
    padding: 0.5rem;
    width: 25vh;

    }

bjamRez · September 23, 2021, 12:02am

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


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


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

.balance {
  color: aliceblue;
  font-weight:bold;
  font-size: large

}

2tijan7 · November 4, 2021, 5:37pm

My styling:

AccountBalance.jsx

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


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


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

AccountBalance.css

section{
    margin-top: 4rem;
    font-size: 2rem;
    text-align: center;
}

strong{
    margin-right: 30px;
}

Image:

image1885×436 22.9 KB

Ernest_SG · December 5, 2021, 2:19am

Here’s the AcccountBalance.jsx :

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

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

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

aaaand the AccountBalance.css :

.balance {
  font-size: 2rem;
  margin: 2.5rem auto 0 auto;
  font-family: monospace;
  font-weight: bold;
  font-style: italic;
  color: rgb(255, 230, 0);
}

Markus_Bielaszka · December 6, 2021, 12:35am

AccountBalance.jsx

import "./AccountBalance.css";

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

AccountBalance.css

.accountBalance {
  color:#00efad;
  font-size: 22px;
  border-top: 2px solid #04a1a9;
  border-bottom: 2px solid #04a1a9;
}

dani88 · December 22, 2021, 12:41am

import AccountBalance from './Components/AccountBalance';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} alt="react logo" className="App-logo" />
        <h1 className="App-title">Coin Exchange</h1>
      </header>
      <div id="AccountBalance">
        <h3>your balance:</h3>
      <AccountBalance amount= {10000}/>
      </div>```

#AccountBalance
{
padding: 1em;
margin-top: 10px;
text-align: center;
font-weight: Bolder;
font-family: ‘Times New Roman’, Times, serif;
font-size: 20;
color: rgb(81, 190, 194);
border: 2px solid rgb(81, 190, 194);

}```

I also imported my css page to the index.jsx file

Maia · December 23, 2021, 5:47pm

I’m not sure why I cannot even get it compiled. Error is shown since I added Balance to app.js What Am I missing here? Thank you.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Coin from './components/Coin/Coin';
import AccountBalance from './components/AccountBalance/AccountBalance'


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} alt="React logo" className="App-logo" />
        <h1 className="App-title">
          Coin Exchange
        </h1>
      </header>
      <AccountBalance amount={10000} />
      <table className="coin-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Ticker</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
    <Coin name="Bitcoin" ticker="BTC" price={9999.99}/>
    <Coin name="Ethereum" ticker="ETH" price={999.99}/>
    <Coin name="Tether" ticker="USDT" price={0.99}/>

    </tbody>
  </table>
    </div>
  );
}

export default App;

AccountBalance.jsx

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



export default class AccoubtBalance extends Component {

    render () {
     return (
         <section className="accountbalance">
         $ {this.props.amount}
         </section>
     );
    }
}

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

Attiss · January 4, 2022, 3:07am

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

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

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

.account-balance-container {
    display: inline-block;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: 1rem;
    border: 1px solid #FFFFFF;
}

.account-balance {
    font-size: 2rem;
    color: #f2f7af;
}

Madlearner · January 10, 2022, 5:25am

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

const Section = styled.section`
      background: color red;
      font-size: 1rem;
      text-align: auto; 
      padding: 1.5rem;
      `;

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


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

KK_Cheah · January 11, 2022, 6:50am

for AccountBalance.jsx

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

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



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

for AccountBalance.css

.account-balance {
    min-height: auto;
    max-height: auto;
    color:rgb(228, 180, 161);
    font-size: 3rem;

}

crypto-djent76 · January 17, 2022, 10:00pm

Here is my solution. Please feel free to give me other ideas or suggestions

AccountBalance.js

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

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


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

AccountBalance.css

.balance-account {
    border: 1px solid #cccccc;
    width: 25vh;
    margin-left: 40%;
}

diegosan · January 24, 2022, 7:10pm

My solution:

AccounttBalance.jsx

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

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

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

AccounttBalance.css

.balance {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 30px auto 0;
}