Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class Course extends React.Component {
- render() {
- return (
- <div >
- <div className="coursecontent">
- <h3>{this.props.coursename}</h3>
- <h4> {this.props.status} {this.props.progress}</h4>
- </div>
- <button className="coursecontent">Start exercise</button>
- </div>
- );
- }
- }
- class Welcomebox extends React.Component {
- render() {
- return <h1>Welcome Naomi</h1>;
- }
- }
- ReactDOM.render( < Welcomebox />, document.getElementById('welcomebox'));
- class Coursebox extends React.Component {
- render() {
- return (
- <div className="box-field">
- <Course coursename="Negotiation" progress= "20%" status="Progress"/>
- <Course coursename="Frontend" progress="56%" status="Progress"/>
- <Course coursename="Food" status="Progress" progress="43%"/>
- </div>
- );
- }
- }
- class Newsbox extends React.Component {
- render(){
- return (
- <div className="box-field" className="newsbox">
- <h3>News</h3>
- </div>
- );
- }
- }
- class Dashboardbox extends React.Component {
- render(){
- return(
- <div className="dashboardbox">
- </div>
- );
- }
- }
- ReactDOM.render( < Dashboardbox />, document.getElementById('dashboardbox'));
- .box-field,
- .newsbox {
- width: 45%;
- background-color: lightgrey;
- font-family: arial;
- margin-left: 30px;
- height: 80%;
- padding: 5px 10px 10px 10px;
- border-radius: 10px;
- display: inline-block;
- }
- class Course extends React.Component {
- render() {
- return (
- <div class="panel panel-default">
- <div class="panel-heading">{this.props.coursename}</div>
- <div class="panel-body">
- <h4> {this.props.status} {this.props.progress}</h4>
- <button className="coursecontent">Start exercise</button>
- </div>
- </div>
- </div>
- );
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement