React

by landau

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

let id = 0;

const colors = [
  '#9400D3',
  '#4B0082',
  '#0000FF',
  '#00FF00',
  '#FFFF00',
  '#FF7F00',
  '#FF0000'
];

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    const now = Date.now();
    this.state = {
      newTodoValue: '',
      items: [
        createTodo('Learn JavaScript', false),
        createTodo('Learn React', false),
        createTodo('Play around in JSFiddle', true),
        createTodo('Build something awesome', true)
      ]
    };

    this.handleChange = this.handleChange.bind(this);
    this.addTodo = this.addTodo.bind(this);
    this.changeItemDoneState = this.changeItemDoneState.bind(this);
  }

  addTodo() {
    const { newTodoValue, items } = this.state;
    this.setState({
      newTodoValue: '',
      items: items.concat(createTodo(newTodoValue))
    });
  }

  handleChange(e) {
    e.preventDefault();
    this.setState({ newTodoValue: e.target.value });
  }

  changeItemDoneState(e) {
    const id = parseInt(e.target.dataset.id, 10);
    changeTodoDoneState(this.state.items.find(item => item.id === id));

    this.setState({ items: this.state.items });
  }

  render() {
    return (
      <div>
        <h2>Todos:</h2>
        <label>
          <input
            type="text"
            value={this.state.newTodoValue}
            onChange={this.handleChange}
          />
        </label>
        <button onClick={this.addTodo}>Add Todo</button>
        <ol>
          {this.state.items.map(item => (
            <li key={item.id}>
              <label>
                <input
                  data-id={item.id}
                  type="checkbox"
                  checked={item.done}
                  onChange={this.changeItemDoneState}
                />
                <span className={item.done ? 'done' : ''}>
                  {item.text} (modified at: {formatTimestamp(item.modifiedAt)})
                </span>
              </label>
            </li>
          ))}
        </ol>
      </div>
 ...