Getting Things Done
by Eric Blanchette
HTML
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<h1>Getting Things Done!</h1>
<div>
What are you working on?<br/>
<input type="text"/><br/><br/>
</div>
<div id="container"></div>
<div id="timer">00:00:00</div>
<div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Start</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Stop</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Resume</button>
</div>
JavaScript
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));