React

by dishap1794

HTML

<div class="container-fluid">
  <div id="app"></div>
</div>

CSS

.apptitle {
  margin: 1rem 0;
  color: #ff2968
}

.todolist {
  padding-left: 0;

  .todoitem {
    position: relative;
    margin-bottom: 0.25rem;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
    border-top: 1px solid #ccc;
    
    &.done {
      .form-check-label {
        color: #999;
      text-decoration: line-through;
      }
    }

    &.highlight {
      border-color: #ff2968;
      background-color: #ff8fb0;
      
      &:last-child {
        border-color: #ff2968;
      }
    }
    
    &:last-child {
      border-bottom: 1px solid #ccc;
    }
    
    .btn-danger {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
    }
    
    .form-check-label {
      width: 100%;

      .form-check-input {
        margin-right: 1rem;
      }
    }
  }
}

JavaScript 1.7

// A little enhanced of Facebook's React TODO example.
// Want to be looked Reminder alike.

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      items: [],
      text: ""
    };
    
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleAddItem = this.handleAddItem.bind(this);
    this.markItemCompleted = this.markItemCompleted.bind(this);
    this.handleDeleteItem = this.handleDeleteItem.bind(this);
  }
  handleTextChange(event) {
    this.setState({
      text: event.target.value
    });
  }
  handleAddItem(event) {
    event.preventDefault();
    
    var newItem = {
      id: Date.now(),
      text: this.state.text,
      done: false
    };
    
    this.setState((prevState) => ({
      items: prevState.items.concat(newItem),
      text: ""
    }));
  }
  markItemCompleted(itemId) {
    var updatedItems = this.state.items.map(item => {
      if (itemId === item.id)
        item.done = !item.done;
      
      return item;
    });
    
    // State Updates are Merged
    this.setState({
      items: [].concat(updatedItems)
    });
  }
  handleDeleteItem(itemId) {
    var updatedItems = this.state.items.filter(item => {
      return item.id !== itemId;
    });
    
    this.setState({
      items: [].concat(updatedItems)
    });
  }
  render() {
    return (
      <div>
        <h3 className="apptitle">MY TO DO LIST</h3>
        <div className="row">
          <div className="col-md-3">
            <TodoList items={this.state.items} onItemCompleted={this.markItemCompleted} onDeleteItem={this.handleDeleteItem} />
          </div>
        </div>
        <form className="row">
          <div className="col-md-3">
            <input type="text" className="form-control" onChange={this.handleTextChange} value={this.state.text} />
          </div>
          <div className="col-md-3">
            <button className="btn btn-primary" onClick={this.handleAddItem}...