class ToDo { constructor(name) { this.name = name; this.done = false; } } class ToDoList extends React.Component { constructor(props) { super(props); this.state = { todos: [], value: '', disabled: true }; this.onAddItem = this.onAddItem.bind(this); this.onChange = this.onChange.bind(this); this.onEditItem = this.onEditItem.bind(this); this.onDeleteItem = this.onDeleteItem.bind(this); this.onClearItems = this.onClearItems.bind(this); this.onToggleDone = this.onToggleDone.bind(this); this.saveItems = this.saveItems.bind(this); } componentDidMount() { if(localStorage.getItem('react_todolist-todos')) { this.setState({ todos: JSON.parse(localStorage.getItem('react_todolist-todos')) }); } } onClearItems() { if(confirm('Do you really want to clear all the items?')) { this.setState({ todos: [] }); localStorage.setItem('react_todolist-todos', JSON.stringify([])); } } onAddItem() { var item = this.state.value; var newTodos = this.state.todos; newTodos.push(new ToDo(item)); this.setState({ todos: newTodos }); this.saveItems(); this.state.value = ''; this.state.disabled = true; } saveItems() { localStorage.setItem('react_todolist-todos', JSON.stringify(this.state.todos)); } checkEnter(event) { if(event.keyCode == 13 && event.target.value != '') this.onAddItem(); } onChange(event) { this.setState({ value: event.target.value, disabled: event.target.value == '' }); } onEditItem(current, index) { var newName = prompt('What\'s the new task name?', current.name); if(newName && newName != '' && newName != null) { var newTodos = this.state.todos; newTodos[index].name = newName; this.setState({ todos: newTodos }); this.saveItems(); } } onDeleteItem(index) { if(confirm('Do you really want to delete this item?')) { var newTodos = this.state.todos; newTodos.splice(index, 1); this.setState({ todos: newTodos }); this.saveItems(); } } onToggleDone(index) { var newTodos = this.state.todos; newTodos[index].done = !newTodos[index].done; this.setState({ todos: newTodos }); this.saveItems(); } render() { var todos = this.state.todos.map((item, index) => ( )); return(

{todos}

); } } class Item extends React.Component { render() { var nameStyle = { textDecoration: this.props.item.done ? 'line-through' : 'none' }; return(

this.props.onToggleDone(this.props.index)} /> {this.props.item.name} this.props.onEditItem(this.props.item, this.props.index)}> this.props.onDeleteItem(this.props.index)}>

); } } ReactDOM.render( , document.getElementById('app') );

Caleb Miller

Button

By_ERWKUX

React To-Do-List with Bootstrap

Pure CSS Spinner

rJJu0umI7

Modal