Balance Component exercise

[ARK]

import "./AccountBalance.css";

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

[ivtala]

Does it matter if I use uppercase letters or all lowercase letters in my filenames?
AccountBalance.jsx or accountbalance.jsx

[thecil]

Its a good practice to use uppercase letter for your components.

Carlos Z

[GahuckImGoofy]

.AccountBalance {
    font-size: 2rem;
    background-color: darkgoldenrod;
    text-align: bottom;   
}

import './AccountBalance.css';

[unwise_guy]

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

            )
       }
    }

.css file

.balance {
   font-size: 1.5rem;
   color: rgb(7, 0, 0);
   background-color: rgb(25, 185, 248);
   text-align: center;
   padding: 1 2rem 2rem 1;
   border-radius: 30px;
   
}

[shiv1]

<section style = {{fontFamily: "sans-serif", color: "white" backgroundColor: "gray" padding: 20, margin: 10}}>
$ {this.props.amount}
</section> 

[codinginlondon]

Hi all

Added some styling to the account balance. It looks like this:

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

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

and the CSS file:

.balance{
    padding: 1rem;
    color: grey;
    font-weight: bold;
    color: #333;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    background-color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);    
}

I’ve uploaded the source to Github.

[Lane11]

Hi, when I try npm audit fix --force I got this output:

npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          node_modules/react-scripts

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

and this errors on localhost:

ERROR in ./node_modules/webpack/hot/dev-server.js

Module build failed (from ./node_modules/source-map-loader/dist/cjs.js): Error: ENOENT: no such file or directory, open 'C:\Users\lane\Desktop\practice\MORALIS\React\coin-exchange\node_modules\webpack\hot\dev-server.js'

ERROR

Module not found: Error: Can't resolve 'C:\Users\lane\Desktop\practice\MORALIS\React\coin-exchange\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in 'C:\Users\lane\Desktop\practice\MORALIS\React\coin-exchange'

I also tried npm update