#app
View Compiled
* {
box-sizing: border-box;
font-weight: 200;
font-family: 'Dosis', sans-serif;
}
html {
height: 100%;
font-size: 10px;
}
body {
min-height: 100%;
font-size: 1.6rem;
background: tomato; // fallback for older browsers
background: -webkit-linear-gradient(135deg, #ffbebe, #ffc9a6);
background: -o-linear-gradient(135deg, #ffbebe, #ffc9a6);
background: -moz-linear-gradient(135deg, #ffbebe, #ffc9a6);
background-image: linear-gradient(135deg, #ffbebe, #ffc9a6);
}
.app {
color: #ff9691;
.vault {
.vault-card {
min-height: 400px;
max-width: 800px;
width: 96%;
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
background: #ffdac5;
position: relative;
box-shadow: 0px 8px 16px rgba(254, 158, 121, 0.2), 4px 8px 12px rgba(254, 158, 121, 0.2);
padding-left: 90px;
top: 10px;
@media(min-width: 1000px){
top: 126x;
}
.main-card-view {
height: 100%;
&:before,
&:after {
display: table;
content: " ";
}
&:after {
clear: both;
}
.gold {
background: #ffdac5;
}
.bitcoin {
background: #ffe6db;
}
.gold,
.bitcoin {
width: 50%;
float: left;
height: 100%;
text-align: center;
@media(max-width: 1000px){
width: 100%;
}
h1 {
color: #fff;
font-size: 5rem;
margin-bottom: 0;
}
.amount {
font-size: 13rem;
margin: 2px 0 0 0;
}
.units {
margin: -24px 0 0 0;
font-size: 3rem;
}
.buttons {
margin-top: 25px;
margin-bottom: 36px;
button {
border-radius: 36px;
font-size: 2rem;
padding: 3px 0;
width: 100px;
font-weight: 600;
text-transform: uppercase;
@media(max-width: 400px){
width: 86px;
}
&.buy {
color: #fff;
background: #ff9691;
border: 3px solid #ff9691;
}
&.sell {
color: #ff9793;
background: transparent;
border: 3px solid #ff9793;
margin-left: 20px;
@media(max-width: 400px){
margin-left: 7px;
}
}
}
}
}
}
.left-bar {
width: 90px;
position: absolute;
background: #fffefc;
top: 0;
left: 0;
bottom: 0;
.avatar {
width: 90px;
height: 90px;
cursor: pointer;
i {
font-size: 90px;
background: #ffd2b3;
color: #fff;
}
}
.middle-icons {
position: relative;
i {
position: absolute;
right: 0;
left: 0;
width: 40px;
font-size: 40px;
display: inline-block;
margin: auto;
cursor: pointer;
&:nth-of-type(1){
top: 22px;
@media(max-width: 1000px){
top: 60px;
}
}
&:nth-of-type(2){
top: 92px;
@media(max-width: 1000px){
top: 171px;
}
}
&:nth-of-type(3){
top: 166px;
@media(max-width: 1000px){
top: 286px;
}
}
}
}
.exit {
background: #fff8f4;
width: 90px;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
i {
transform: rotate(-180deg);
position: absolute;
right: 0;
left: 0;
bottom: 20px;
width: 40px;
font-size: 40px;
display: inline-block;
margin: auto;
cursor: pointer;
}
}
}
}
}
}
View Compiled
class App extends React.Component {
constructor(){
super();
let goldValue = parseInt(localStorage.getItem('goldValue'));
let bitcoinValue = parseInt(localStorage.getItem('bitcoinValue'));
goldValue = typeof goldValue === 'number' && !isNaN(goldValue) ? goldValue : 30;
bitcoinValue = typeof bitcoinValue === 'number' && !isNaN(bitcoinValue) ? bitcoinValue : 46.8;
this.state = {
vault: {
wallets: [
{
id: 0,
name: 'Gold',
className: 'gold',
value: goldValue,
units: 'bars',
increment: 'whole'
},
{
id: 1,
name: 'Bitcoin',
className: 'bitcoin',
value: bitcoinValue,
units: 'bitcoin',
increment: 'one_decimal_place'
}
]
}
}
};
componentDidMount() {
// this.setUserData();
};
render () {
let { title, vault } = this.state;
return (
<div className="app">
<Vault
title={title}
vault={vault}
updateAmount={this.updateAmount}
/>
</div>
)
};
updateAmount = (wallet, action) => {
let vault = {};
vault.wallets = this.state.vault.wallets.map(function(w){
var increment;
if (w.id === wallet.id) {
switch (wallet.increment) {
case 'whole':
increment = 1;
break;
case 'one_decimal_place':
increment = .1;
break;
}
switch (action) {
case 'BUY':
wallet.value += increment;
wallet.value = Math.round( wallet.value * 10 ) / 10;
break;
case 'SELL':
wallet.value -= increment;
wallet.value = Math.round( wallet.value * 10 ) / 10;
break;
}
if (wallet.value > 100) {
wallet.value = 100;
} else if(wallet.value <= 0) {
wallet.value = 0;
}
localStorage.setItem(wallet.className + 'Value', wallet.value);
}
return wallet;
});
let newState = Object.assign({}, this.state, vault.wallets);
this.setState({
newState: newState
});
};
}
class Vault extends React.Component {
constructor(props){
super(props);
};
componentDidMount() {
// this.setUserData();
};
render () {
let { title, vault, updateAmount } = this.props;
let wallets = vault.wallets;
return (
<div className="vault">
<div className="vault-card">
<VaultLeftBar/>
<div className="main-card-view">
{wallets.map((wallet, i) =>
<VaultWallet
wallet={wallet}
key={i}
updateAmount={updateAmount}
/>
)}
</div>
</div>
</div>
)
};
}
class VaultWallet extends React.Component {
constructor(props){
super(props);
};
componentDidMount() {
// this.setUserData();
};
render () {
let { wallet, updateAmount } = this.props;
return (
<div className={wallet.className}>
<h1>{wallet.name}</h1>
<p className="amount">{wallet.value}</p>
<p className="units">{wallet.units}</p>
<div className="buttons">
<button className="buy" onClick={() => {updateAmount(wallet, 'BUY')}}>Buy</button>
<button className="sell" onClick={() => {updateAmount(wallet, 'SELL')}}>Sell</button>
</div>
</div>
)
};
}
class VaultLeftBar extends React.Component {
constructor(props){
super(props);
};
componentDidMount() {
// this.setUserData();
};
render () {
return (
<div className="left-bar">
<div className="avatar">
<i className="material-icons">account_box</i>
</div>
<div className="middle-icons">
<i className="material-icons">credit_card</i>
<i className="material-icons">enhanced_encryption</i>
<i className="material-icons">insert_chart</i>
</div>
<div className="exit">
<i className="material-icons">exit_to_app</i>
</div>
</div>
)
};
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
View Compiled
This Pen doesn't use any external CSS resources.