react-countdown-clock
Version:
HTML5 canvas countdown clock React component
70 lines (65 loc) • 1.65 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>react-countdown-clock</title>
<style>
body {
background-color: #CCC;
}
#parappa {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
}
</style>
</head>
<body>
<div id="parappa"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="./build/react-countdown-clock.js"></script>
<script>
var MAX = 120;
var MIN = 30;
var randomAmountOfSeconds = function(){
return Math.floor( Math.random() * ( MAX - MIN + 1) + MIN )
}
var randomColor = function(){
return '#' + ( Math.random() * 0xFFFFFF << 0 ).toString(16);
}
var Demo = React.createClass({
displayName: 'Demo',
getState: function(){
return {
seconds: randomAmountOfSeconds(),
color: randomColor()
}
},
getInitialState: function(){
return this.getState();
},
handleOnComplete: function(){
this.setState(this.getState());
},
render: function(){
return (
React.createElement(ReactCountdownClock, {
seconds: this.state.seconds,
color: this.state.color,
alpha: 0.9,
onComplete: this.handleOnComplete
})
)
}
});
ReactDOM.render(
React.createElement(Demo, null),
document.getElementById('parappa')
)
</script>
</body>
</html>