Balance Component exercise

loso · April 3, 2021, 11:40pm

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


export default class AccountBalance extends Component {
    render() {
        return (
            <section className="balance-section">
              <div>${this.props.amount}</div>
            </section>
        );
    }
}
// Then in AccountBalance.css
.balance-section div{
    border:3px solid #0c5e02;
    background-color: #17b802;
    color:black;

}

alve_lagander · April 8, 2021, 3:50pm

AccountBalance.jsx

import React from "react"
import PropTypes from "prop-types"
import "./AccountBalance.css"

export default class AccountBalance extends React.Component{

	render(){
		return(
			<h2 className="balance-display">Balance: ${this.props.amount} </h2>
		);
	}
}

AccountBalance.propTypes = {

	balance: PropTypes.number.isRequired

};

AccountBalance.css

h2.balance-display {
	position: relative;
	margin: auto;
	font-size: 32px;	
}

Big_Nine · April 19, 2021, 10:38am

import './AccountBalance.css'

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

AccountBalance.css

    border: 5px solid #cccccc;
    width: 25vh;
}

JonBal · April 21, 2021, 2:46am

export default class AccountBalance extends Component {

    render() {

        return (

            <section className="balance">

              ${this.props.amount}  

            </section>

        );

    }

}

accountbalance.css

.balance {

    font-size: 1.4rem;

}

chim4us · April 26, 2021, 11:03am

On AccountBalance.jsx

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

$ {this.props.amount}

);
}
}

On AccountBalance.css

.Amount{
font-size: 1.4rem;
}

BShehaj · April 26, 2021, 8:27pm

Create file in AccountBalance folder named AccountBalance.css.
Link it with AccountBalance.jsx by writing - import ‘./AccountBalance.css’
Start styling in the CSS file. This is my code of the style:
section

{

border: 7px outset darkslategray;

border-radius: 4rem;

text-shadow: -1px 0px 3px #193c52;

font-family: Georgia, serif;

font-size: 21px;

letter-spacing: -0.4px;

word-spacing: 2px;

color: #000000;

font-weight: 700;

text-decoration: none solid rgb(68, 68, 68);

font-style: normal;

font-variant: normal;

text-transform: none;

}

CryptoXyz · April 27, 2021, 6:50pm

Here are my codes!

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

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

AccountBalance.css

.balance {
 margin: auto;
 box-shadow: 2px 2px 7px 1px black;
 background-color: rgb(253, 239, 218);
 float: center;
 font-size: 1.5rem;
 box-sizing: content-box;
 font-weight: bold;
}

Need to improve on my css skills

n1g3 · May 1, 2021, 8:59am

My Balance Styles…

.balanceRow{
	font-size: .9rem;
	background-color: dodgerblue;
	color:white;
	font-style:bold;
	width:33%;
	margin-left:auto;
	margin-right:auto;
	border-radius:50px;
	padding:1rem 2rem;
}

maxs · May 3, 2021, 11:39pm

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

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

AccountBalance.css

.balanceDisplay {
    font-weight: bold;
}

Samuel1 · May 4, 2021, 2:22am

.Balance section {
text-align: center;
justify-content: start;
font-size: 2rem;
}

Vivek20 · May 18, 2021, 10:19am

.amount-section {

  font-family: Tahoma, Geneva, sans-serif;

  font-size: 16px;

  letter-spacing: 2px;

  word-spacing: 2px;

  color: #f3f0f0;

  font-weight: normal;

  text-decoration: none;

  font-style: normal;

  font-variant: normal;

  text-transform: none;

  padding: 10px 10px 10px 10px;

}

Pogchamp · May 26, 2021, 2:03pm

In AccountBalance.jsx:

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

export default class AccountBalance extends Component {

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

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

In AccountBalanceStyling.css:

.balance {
    font-size: 3rem;
    background-color: darkslategrey;
    border: 1px solid;
}

sbelka1703 · May 27, 2021, 6:34pm

tanu_g · June 6, 2021, 7:24am

AccountBalance.css

.balance{
    margin: 40px auto 20px auto;
    font-size: 1.3rem;
    color: #03f0fc;
    background-color: black;
    padding: 10px;
    border: 1px solid #c3c3c3;
    width: fit-content;
}

coinExchange

Julian97 · June 8, 2021, 6:59pm

AccountBalance.jsx

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

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

${this.props.amount}

);
}
}

AccountBalance.css

.section {

font-size: 1.2rem;

color: #ffffff;

padding: 1rem;

border: 1px solid #ffffff;

margin: 10px auto 10px auto;

width:100vh

}

Website:

Screenshot 2021-06-08 at 19.57.49

wleskay · June 9, 2021, 12:38pm

.balance-section{
    border: 1px solid rgb(0, 0, 0);
    width: 35vh;
    background-color: darkgrey;
    color: #000000;
    margin: 50px auto 50px auto; 
}

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


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



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

Riki · June 15, 2021, 1:54pm

Hi All,

My code:

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
}

and the css one:

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
}```

andrequintino · June 20, 2021, 12:12am

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

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

AccountBalance.css:

.Account-Balance{

    font-size: 3rem;
    background-color: darkslategrey;
    border: 1px solid;
    
}

jak · July 5, 2021, 1:06pm

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

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

AccountBalance.css

.accBalSect {
    padding: 30px;
    font-size: 1.5rem;
    color:rgb(0, 209, 70);
    font-weight: bold;
    justify-content: center;
    background-color: rgba(169, 169, 169, 0.247);
}

Probably not the most stunning design in the world, but I’ll tell myself that’s not important for now

Konzaih · July 9, 2021, 7:22am

AccountBalance.jsx
import ‘./AccountBalance.css’;

add into export default class:

In AccountBalance.css
.balance {

font-size: 2.5rem;

color: yellow;

border: 0.75px solid #fff;

}