App.js
import './App.css';
import React from 'react';
import CoinList from './components/CoinList/CoinList';
import AccountBalance from'./components/AccountBalance/AccountBalance';
import Header from './components/Header/Header';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
balance: 10000,
coinData: [
{
name: 'Bitcoin',
ticker: 'BTC',
price: 9999.99
},
{
name: 'Ethereum',
ticker: 'ETH',
price: 299.99
},
{
name: 'Tether',
ticker: 'USDT',
price: 1.0
},
{
name: 'Ripple',
ticker: 'XRP',
price: 0.2
},
{
name: 'Bitcoin Cash',
ticker: 'BCH',
price: 297.99
},
]
}
}
render() {
return (
<div className="App">
<Header />
<AccountBalance amount={this.state.balance} />
<CoinList coinData={this.state.coinData} />
</div>
);
}
}
export default App;
Header.jsx
import React, { Component } from 'react';
import logo from './logo.svg';
import '../AccountBalance/AccountBalance.css'
export default class Header extends Component {
render() {
return (
<header className="App-header">
<img src={logo} alt="React Logo" className="App-logo" />
<h2 className="App-title">Coin Exchange</h2>
</header>
)
}
}
CoinList.jsx
import React, { Component } from 'react'
import styled from 'styled-components'
import Coin from '../Coin/Coin';
const Table = styled.table`
margin: 25px auto 25px auto;
display: inline-block;
padding: 5px;
`;
export default class CoinList extends Component {
render() {
return (
<Table className>
<thead>
<tr>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{
this.props.coinData.map( ({name, ticker, price}) =>
<Coin key={ticker} name={name} ticker={ticker} price={price} />
)
}
</tbody>
</Table>
)
}
}
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>
<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
}
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="AccountBalance">
Account Balance: ${this.props.amount}
</section>
);
}
}
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
}
AccountBalance.css
.AccountBalance {
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: .1rem;
border-bottom-style: solid;
border-bottom-color: white;
font-weight: bold;
background-color: rgb(12, 12, 167);
}
App.css
.App {
text-align: center;
background-color: rgb(0, 6, 47);
color: white;
}
.App-logo {
height: 4rem;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 10vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-size: calc(10px + 2vmin);
color: white;
border-bottom: .5rem;
border-bottom-style: solid;
border-bottom-color: #61dafb;
}
.App-title {
font-size: 2rem;
}
.App-link {
color: #61dafb;
}
