Share
Explore

React Demo App hosted on Codepen.io

Peter Sigurdson
Example projects:
TIC TAK TOE:
https://codepen.io/PeterSigurdson/pen/BaQvojq?editors=1111
⁠
⁠

You can view the project from here:
⁠
https://codepen.io/PeterSigurdson/project/editor/DnLLKR
⁠
⁠

index.html

<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>My React Project on CodePen</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.css"> <link rel="stylesheet" href="css/style.processed.css"> </head>
<body>
<div id="app"></div> <script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script> <script src="js/app.processed.js"></script>
</body>
</html>


app.js
class Slider extends React.Component { render() { let { handleChange, value } = this.props; return ( <div className="weight-slider"> <h2>How Many Plates Do You Need?</h2> <input type="range" min="5" max="600" step="5" value={this.props.value} onChange={this.props.handleChange} /> <div>{this.props.value} lbs.</div> </div> ); } };
class Plates extends React.Component { renderPlate(plate) { let plates = []; for (let i = 0; i < plate.count / 2; i++) { plates.push( <span data-weight={plate.weight}></span> ); } return(plates); }
render() { let { plates } = this.props; return ( <section> <div className="plates-display"> <div className="plates-left"> {Array.from(this.props.plates).reverse().map(plate => { return this.renderPlate(plate); })} </div> <div className="plates-right"> {this.props.plates.map(plate => { return this.renderPlate(plate); })} </div> </div> <div className="plates-list"> <div>Assuming a {this.props.plates[0].weight} lb. bar.</div> <ul> {this.props.plates.map(plate => { if(plate.count) return(<li>{plate.count} &times; {plate.weight} lb. plates</li>); return null; })} </ul> </div> </section> ); } }
class App extends React.Component { constructor(props) { super(props); let bar = 45; let value = 145 - bar; let weights = [45, 25, 15, 10, 5, 2.5]; let plates = this.setPlates(value, weights.map((w) => { return { weight: w, count: 0, greater: w * 2 }; }));
this.state = { value, plates }; }
handleChange(event) { let value = parseInt(event.target.value); let plates = this.setPlates(value, this.state.plates);
this.setState({ value, plates }); }
setPlates(weight, plates) { weight = weight - 45; return plates.map((p, i) => { p.count = 0; while (weight >= p.greater) { p.count += 2; weight -= p.greater; } return p; }); }
render() { return ( <div className="page-wrap"> <Slider plates={this.state.plates} value={this.state.value} handleChange={(e) => {this.handleChange(e)}} /> <Plates plates={this.state.plates} /> </div> ) }
};
ReactDOM.render( <App />, document.getElementById('app') );



Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.