-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (61 loc) · 2.08 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Getting Started REACT</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<style>
.colorPicker{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<script type="text/jsx">
var App = React.createClass({
getInitialState:function(){
return {
red: 0,
green: 0,
blue: 0
}
},
update: function(e){
this.setState({
red: this.refs.red.refs.input.getDOMNode().value,
green: this.refs.green.refs.input.getDOMNode().value,
blue: this.refs.blue.refs.input.getDOMNode().value
})
},
render: function(){
return (<div>
<Slider ref="red" update={this.update} val={this.state.red}/>
<label>RED:{this.state.red}</label>
<Slider ref="green" update={this.update} val={this.state.green}/>
<label>GREEN:{this.state.green}</label>
<Slider ref="blue" update={this.update} val={this.state.blue}/>
<label>BLUE:{this.state.blue}</label>
<ColorPricker red={this.state.red} green={this.state.green} blue={this.state.blue}/>
</div>)
}
});
var Slider = React.createClass({
render: function(){
return (<div>
<input ref="input" type="range" min="0" max="255" onChange={this.props.update} value={this.props.val}/>
</div>)
}
});
var ColorPricker = React.createClass({
render: function(){
return (<div>
<div className="colorPicker" style={{'backgroundColor': 'rgb(' + this.props.red + ',' + this.props.green + ',' + this.props.blue +')'}}></div>
</div>)
}
});
React.render(<App />, document.body);
</script>
</body>
</html>