Marathon

by Eric Blanchette

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var data = {
    schedules: [{
        name: '10k',
        weeks: [{
            days: [{
                description: 'Long & slow run,7 km'
            }, {
                description: 'OFF'
            }, {
                description: '4 km'
            }, {
                description: '3 km'
            }, {
                description: '3 km'
            }, {
                description: 'OFF'
            }, {
                description: '3 km'
            }]
        }]
    }, {
        name: 'Half'
    }, {
        name: 'Full'
    }

    ]
};


var Day = React.createClass({
    render: function () {
        return ( < div > Day: {
            this.props.day.description
        } < /div>
        )
    }
});


var Days = React.createClass({
	render: function(){
    	if(!this.props.days){
        	return (<div>No Days Found.</div > );
    }

    var list = [];

    for (var i = 0; i < this.props.days.length; i++) {
        var day = this.props.days[i];
        list.push( < Day day = {
            day
        } > < /Day>);
        }
    
    	return (
        	<div>Days:{list}</div > )
    }
});


var Week = React.createClass({
    render: function () {
        return ( < div > Name: {
            this.props.week.name
        } < Days days = {
            this.props.week.days
        }
        />
            </div > )
    }
});

var Weeks = React.createClass({
    render: function () {

        if (!this.props.weeks) {
            return ( < div > No Weeks Found. < /div>);
        }
    
    	var list = [];
    
    	for(var i=0; i<this.props.weeks.length; i++){
        	var week = this.props.weeks[i];
        	list.push(<Week week={week}></Week > );
        }

        return ( < div > Weeks: {
            list
        } < /div>
        )
    }
});
var Schedule = React.createClass({
	render: function(){
    	return (
        	<div>
            	Name:{this.props.schedule.name}
                <Weeks weeks={this.props.schedule.weeks}></Weeks > < /div>
     ...