const { Component } = React; class TodoHeader extends Component { render() { return (

Things To Do

) } } class TodoControls extends Component { render() { return (

); } } class TodoListItem extends Component { render() { var textClass = this.props.isChecked ? "todo-list-item-text todo-list-item-checked": "todo-list-item-text"; var closeClass = this.props.isChecked ? "todo-list-item-close todo-list-item-checked": "todo-list-item-close"; return (

{this.props.text}

) } } class TodoList extends Component { render() { return (

{ this.props.items.map((item, i) => this.props.onCheckClicked(i)} onCloseClicked={() => this.props.onCloseClicked(i)} isChecked={item[0]} text={item[1]} /> ) }

) } } class Todo extends Component { constructor() { super(); this.state = { "text": "", "items": [ [false, "Make a happy little cloud"], [false, "Make a happy little tree"], [false, "Beat the devil out of it"], [false, "Get some titanium white"], [false, "Pay attention to the angles"], ] }; this.onInputChange = this.onInputChange.bind(this); this.onAddClicked = this.onAddClicked.bind(this); this.onCheckClicked = this.onCheckClicked.bind(this); this.onCloseClicked = this.onCloseClicked.bind(this); } render () { return (

); } onInputChange(e) { this.setState(Object.assign({}, this.state, { text: e.target.value, })); } onAddClicked(e) { if (this.state.text.trim() === "") { return; } var newItems = this.state.items.slice(); newItems.push([false, this.state.text]); this.setState(Object.assign({}, this.state, { text: '', items: newItems, })); } onCheckClicked(i) { var newItems = this.state.items.slice(); newItems[i] = [!this.state.items[i][0], this.state.items[i][1]]; this.setState(Object.assign({}, this.state, { items: newItems, })); } onCloseClicked(i) { var newItems = this.state.items.slice(); newItems.splice(i, 1); this.setState(Object.assign({}, this.state, { items: newItems, })); } } ReactDOM.render(, document.getElementById("root"));

Aaron Stevens

Todo List

Hovering Card