Styled Components exercise

React Web Development Course
#142

App.js

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

const Table = styled.table`
  margin: 25px auto 25px auto;
  display: inline-block;
  padding: 5px;
`;

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} alt="React Logo" className="App-logo" />
        <h2 className="App-title">Coin Exchange</h2>
      </header>
      <AccountBalance amount={10000} />
    <Table className>
      <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={299.99} />
        <Coin name="Tether" ticker="USDT" price={1.0} />
        <Coin name="Ripple" ticker="XRP" price={0.2} />
      </tbody>
    </Table>
    </div>
  );
}

export default App;

Coin.jsx

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

const Td = styled.td`
  border: 1px solid #cccccc;
  width: 25vh;
`;

export default class Coin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            price: this.props.price
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        //prevent the default action of submitting the form
        event.preventDefault();
        const randomPercentage = 0.995 + Math.random() * 0.01;
        this.setState( function(oldState) {
            return {
                price: oldState.price * randomPercentage
            };
        });
    }

    render() {
        return (
            <tr className="coin-row">
                <Td>{this.props.name}</Td>
                <Td>{this.props.ticker}</Td>
                <Td>${this.state.price}</Td>
                <Td>
                    <form action="#" method="POST">
                        <button onClick={this.handleClick}>Refresh</button>
                    </form>
                </Td>
            </tr>
        );
    }
}

Coin.propTypes = {
    name: PropTypes.string.isRequired,
    ticker: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired
}

coinexchange
coinexchange703×475 17.9 KB

#143 
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Td = styled.td`
    border: 2px solid #201129;
    width: 25vh;

`;

export default class Coin extends Component {
    constructor(props){
        super(props);
        this.state = {
            price: this.props.price
        }
        this.handleClick = this.handleClick.bind(this);
    }
    

render() {
        return (
            <tr className = "coin-row">
                <Td>{this.props.name}</Td>
                <Td>{this.props.ticker}</Td>
                <Td>${this.state.price}</Td>
                <Td>
                    <form action="#" method="POST">
                    <button onClick={this.handleClick}>Refresh</button>
                    </form>
                </Td>
            </tr>
        );
  }
1 Like
#144 
const Td = styled.td`
border: 1px solid #cccccc;
width: 25vh;
`;

render() {
     return(
       <tr className='coin-row'>
         <Td>{this.props.name}</Td>
         <Td>{this.props.ticker}</Td>
         <Td>${this.state.price}</Td>
         <Td>
          <form action='#' method='POST'>
          <button onClick={this.handleClick}>Refresh</button>
          </form>
          </Td>
       </tr>
     );
  }
1 Like
#145 
import styled from 'styled-components';

const TD = styled.td` {
  border: 2px solid white;
  width: 25vh;
}`;

   });
      }
    render() {
    return (
      
      <tr className="coin-row">
        <TD>{this.props.name}</TD>
        <TD>{this.props.ticker}</TD>
        <TD>${this.state.price}</TD>
        <TD>
        <form action = "#" method = "POST">
        <button onClick={this.handleClick}>Refresh</button>
        </form>
        </TD>
      </tr>
     
    ) 
  }
}
#146

Hi everyone :stuck_out_tongue_winking_eye:

I have created a styled component and asked chatGPT to come up with the CSS parameters to make the table look a bit more interesting.

Full Github code here.

Coin.jsx


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

const Tr = styled.tr`
border: 1px solid #ccc;
background-color: #f7f7f7;
color: #333;
font-size: 14px;
font-weight: 500;
text-align: center;
transition: all 0.3s ease-in-out;


&:hover {
  background-color: #e7e7e7;
  border-color: #aaa;
}

td:first-child {
  text-align: left;
  padding-left: 10px;
}

td:last-child {
  padding-right: 10px;

  button {
    background-color: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    &:hover {
      background-color: #555;
    }
  }
}

`;

export default class Coin extends Component {

  constructor(props){
    super(props);
    this.state = {
      price: this.props.price
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event){
    event.preventDefault();

    const randomPercentage = 0.995 + Math.random() * 0.01;

    this.setState( (oldState)=>{
      return{
        price: oldState.price* randomPercentage
      };
    });

  }

  render() {
    return (
      <Tr>
        <td>{this.props.name}</td>
        <td>{this.props.ticker}</td>
        <td>${this.state.price}</td>
        <td>
          <form action="#" method="POST">
            <button onClick={this.handleClick}>Refresh</button>
          </form></td>
      </Tr>
    )
  }
}

Coin.propTypes = {
  name: PropTypes.string.isRequired,
  ticker: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired
}
#147 
import React, { Component } from 'react'
import PropTypes from "prop-types";
import styled from 'styled-components';

const Td = styled.td`
border: 1px solid #120f0f;
width: 40rem;
`;

export default class Coin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            price: this.props.price
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(event) {
        event.preventDefault();
        const randomPercentage = 0.995 + Math.random()*0.01;
        this.setState(function(oldState) {
            return {
                price: oldState.price * randomPercentage
            };
        });
    }
    render() {
        return (
            <tr className="coin-row">
                <Td>{this.props.name}</Td>
                <Td>{this.props.ticker}</Td>
                <Td>${this.state.price}</Td>
                <Td>
                    <form action="#" method="POST">
                        <button onClick={this.handleClick}>Refresh</button>
                    </form>
                </Td>
            </tr>
        );
    }
}

Coin.propTypes = {
    name: PropTypes.string,
    ticker: PropTypes.string,
    price: PropTypes.number,
}