UNPKG

1.65 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8" />
5 <title>react-countdown-clock</title>
6 <style>
7 body {
8 background-color: #CCC;
9 }
10 #parappa {
11 position: absolute;
12 top: 50%;
13 left: 50%;
14 width: 300px;
15 height: 300px;
16 margin: -150px 0 0 -150px;
17 }
18 </style>
19</head>
20<body>
21 <div id="parappa"></div>
22 <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
23 <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
24 <script src="./build/react-countdown-clock.js"></script>
25 <script>
26 var MAX = 30;
27 var MIN = 5;
28
29 var randomAmountOfSeconds = function(){
30 return Math.floor( Math.random() * ( MAX - MIN + 1) + MIN )
31 }
32
33 var randomColor = function(){
34 return '#' + ( Math.random() * 0xFFFFFF << 0 ).toString(16);
35 }
36
37 var Demo = React.createClass({
38 displayName: 'Demo',
39 getState: function(){
40 return {
41 seconds: randomAmountOfSeconds(),
42 color: randomColor()
43 }
44 },
45 getInitialState: function(){
46 return this.getState();
47 },
48 handleOnComplete: function(){
49 this.setState(this.getState());
50 },
51 render: function(){
52 return (
53 React.createElement(ReactCountdownClock, {
54 seconds: this.state.seconds,
55 color: this.state.color,
56 alpha: 0.9,
57 onComplete: this.handleOnComplete
58 })
59 )
60 }
61 });
62
63 ReactDOM.render(
64 React.createElement(Demo, null),
65 document.getElementById('parappa')
66 )
67 </script>
68</body>
69</html>