Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 25, 2015 00:47
Show Gist options
  • Save anonymous/26826ba0480ad8d5c149 to your computer and use it in GitHub Desktop.
Save anonymous/26826ba0480ad8d5c149 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kigedaniho
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Time using reactjs">
<script src="http://fb.me/react-0.13.1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
var Stopwatch = React.createClass({displayName: 'Stopwatch',
getInitialState: function(){
return {secondsElapsed: 0 };
},
getSeconds: function(){
return ('0' + this.state.secondsElapsed % 60).slice(-2);
},
getMinutes: function(){
return Math.floor(this.state.secondsElapsed / 60);
},
handleStartClick: function(){
var _this = this;
this.incrementer = setInterval(function(){
_this.setState({
secondsElapsed: (_this.state.secondsElapsed + 1)
});
}, 1000);
},
handleStopClick: function(){
clearInterval(this.incrementer);
},
render: function(){
return React.createElement("div", null,
React.createElement("h1", null, this.getMinutes(), ":", this.getSeconds()),
React.createElement("button", {type: "button", onClick: this.handleStartClick}, "Start"),
React.createElement("button", {type: "button", onClick: this.handleStopClick}, "Stop")
)
}
});
React.render(React.createElement(Stopwatch, null), document.body);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Time using reactjs">
<script src="//fb.me/react-0.13.1.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var Stopwatch = React.createClass({
getInitialState: function(){
return {secondsElapsed: 0 };
},
getSeconds: function(){
return ('0' + this.state.secondsElapsed % 60).slice(-2);
},
getMinutes: function(){
return Math.floor(this.state.secondsElapsed / 60);
},
handleStartClick: function(){
var _this = this;
this.incrementer = setInterval(function(){
_this.setState({
secondsElapsed: (_this.state.secondsElapsed + 1)
});
}, 1000);
},
handleStopClick: function(){
clearInterval(this.incrementer);
},
render: function(){
return <div>
<h1>{this.getMinutes()}:{this.getSeconds()}</h1>
<button type="button" onClick={this.handleStartClick}>Start</button>
<button type="button" onClick={this.handleStopClick}>Stop</button>
</div>
}
});
React.render(<Stopwatch />, document.body);</script></body>
</html>
Raw
jsbin.kigedaniho.js
var Stopwatch = React.createClass({displayName: 'Stopwatch',
getInitialState: function(){
return {secondsElapsed: 0 };
},
getSeconds: function(){
return ('0' + this.state.secondsElapsed % 60).slice(-2);
},
getMinutes: function(){
return Math.floor(this.state.secondsElapsed / 60);
},
handleStartClick: function(){
var _this = this;
this.incrementer = setInterval(function(){
_this.setState({
secondsElapsed: (_this.state.secondsElapsed + 1)
});
}, 1000);
},
handleStopClick: function(){
clearInterval(this.incrementer);
},
render: function(){
return React.createElement("div", null,
React.createElement("h1", null, this.getMinutes(), ":", this.getSeconds()),
React.createElement("button", {type: "button", onClick: this.handleStartClick}, "Start"),
React.createElement("button", {type: "button", onClick: this.handleStopClick}, "Stop")
)
}
});
React.render(React.createElement(Stopwatch, null), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment