React

by shahrukh007

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;
}
ul {
  margin: 20px 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

class TodoApp extends React.Component {
 constructor(props) {
  super(props);
  this.state = {userInput: '',
                  list:[] ,
                  edit_type : false,
                  index : ""}
  this.addItem = this.addItem.bind(this);
  this.submitFunction = this.submitFunction.bind(this);
  }

  addItem(event) {
   this.setState({userInput: event.target.value});
  }
  
  submitFunction(event) {
   event.preventDefault();
   var listArray;
   var obj={name:this.state.userInput,
            checked:false,
            isCompleted:false}
   if(!this.state.edit_type){
    if (localStorage.getItem("key") !== null) {
    listArray= JSON.parse(localStorage.getItem('key'));
    }
   else {
   listArray = [];
   } 
   listArray.push(obj);
   localStorage.setItem("key",JSON.stringify(listArray));
    this.setState({list: listArray,
                   userInput: ''});
   }
   else{
    this.state.list[this.state.index].name = this.state.userInput;
    this.state.list[this.state.index].checked = false;
    localStorage.setItem('key', JSON.stringify(this.state.list));
    this.setState({list: this.state.list,
                   userInput: '',
                   edit_type : false
                  });
   }
  }
  
  deleteItem(index, event) {
   const list = this.state.list
   list.splice(index, 1)   
   localStorage.setItem('key', JSON.stringify(list));
   this.setState({list:list,
                  edit_type : false,
                  userInput: ''})
  }

   editItem(index, event) {
   let current_list = this.state.list[index].name;
   this.setState({userInput: current_list,
                  edit_type : true,
                  index:index,
                  checked:false})
  }
  
  check(index, event) {
   this.state.list[index].checked=event.target.checked;
   this.setState({list:this.state.list,
                  edit_type : false})
   }
   DoubleClickHandle(index, event)
   {
    const list = this.state.list;
    list[index].isCompleted =...