-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·98 lines (89 loc) · 3.34 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
<title>Molly's To Do List</title>
<meta name="description" content="This is a to-do app I created in React.js based on a tutorial. I'm looking forward to working on more React projects soon!">
<script src="vendor/console-polyfill.js"></script>
<script src="vendor/es5-shim.min.js"></script>
<script src="vendor/es5-sham.min.js"></script>
<script src="vendor/jquery.min.js"></script>
<script src="vendor/react-with-addons.js"></script>
<script src="vendor/JSXTransformer.js"></script>
<script src="store.js"></script>
</head>
<body>
<div id="container">
<h1>Molly's To-Do List</h1>
<div id="app">
<div id='form-container'></div>
<div id='list-container'></div>
</div>
</div>
<script type="text/jsx">
var CreationForm = React.createClass({
render: function() {
return (
<form id="add-form" onSubmit={this.handleSubmit}>
<input id='create' ref="description" type='text' placeholder='add something to the list...' />
</form>
)
},
handleSubmit: function(event) {
event.preventDefault()
var description = this.refs.description.getDOMNode().value
this.refs.description.getDOMNode().value = ''
ListStore.addItem(description);
}
})
var Item = React.createClass({
render: function() {
var itemClass = this.props.completed ? 'item completed' : 'item'
return (
<li className={itemClass}>
<span className='complete-button' onClick={this.handleComplete}>{'\u2714'}</span>
<div className='description' ref='description' contentEditable='true'>{this.props.description}</div>
<span className='edit-button' onClick={this.handleEdit}>{'\u2710'}</span>
<span className='delete-button' onClick={this.handleDelete}>{'\u2718'}</span>
</li>
)
},
handleComplete: function() {
ListStore.toggleCompleteness(this.props.id);
},
handleEdit: function() {
var description = this.getDOMNode().childNodes[1].innerHTML;
ListStore.editItem(this.props.id, description);
},
handleDelete: function() {
ListStore.deleteItem(this.props.id);
}
})
var List = React.createClass({
getInitialState: function() {
return (
{items: []}
)
},
componentWillMount: function() {
$(ListStore).on('storeHasChanged', function() {
this.setState({ items: ListStore.getItems() })
}.bind(this))
},
render: function() {
var itemComponents = this.state.items.map(function(itemData) {
return <Item key={'item-' + itemData.id} {...itemData}/>
})
return (
<ul id='list'>
{itemComponents}
</ul>
)
}
})
React.render(<CreationForm />, document.getElementById('form-container') )
React.render(<List />, document.getElementById('list-container') )
ListStore.loadItems();
</script>
</body>