-
Notifications
You must be signed in to change notification settings - Fork 83
/
index.html
84 lines (80 loc) · 2.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE 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="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/create-react-class/create-react-class.js"></script>
<script src="./build/react-countdown-clock.js"></script>
<script>
var MAX = 120;
var MIN = 10;
var randomAmountOfSeconds = function(){
return Math.floor( Math.random() * ( MAX - MIN + 1) + MIN )
}
var randomColor = function(){
return '#' + ( Math.random() * 0xFFFFFF << 0 ).toString(16);
}
var Demo = createReactClass({
displayName: 'Demo',
getState: function(){
return {
seconds: randomAmountOfSeconds(),
color: randomColor(),
paused: false,
fontSize: 'auto'
}
},
getInitialState: function(){
return this.getState();
},
handleOnComplete: function(){
this.setState(this.getState());
},
handleOnClick: function(){
wasPaused = this.state.paused
this.setState({
// color: randomColor(),
paused: (wasPaused) ? false : true,
fontSize: (wasPaused) ? 'auto' : '45px',
});
},
render: function(){
return (
React.createElement(ReactCountdownClock, {
seconds: this.state.seconds,
color: this.state.color,
paused: this.state.paused,
pausedText: "▐▐ ",
alpha: 0.9,
onComplete: this.handleOnComplete,
onClick: this.handleOnClick,
fontSize: this.state.fontSize
})
)
}
});
ReactDOM.render(
React.createElement(Demo, null),
document.getElementById('parappa')
)
</script>
</body>
</html>