SHARE
TWEET

Untitled

a guest Oct 23rd, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import cx from 'classnames';
  2. import { Component } from 'react';
  3.  
  4. export default class TodoList extends Component {
  5.    
  6.     constructor(props){
  7.          super(props);
  8.          this.state={
  9.              items:[],
  10.              number_task_done:0,
  11.              total_task:0,
  12.              current_text:""
  13.          }
  14.         this.handleChange = this.handleChange.bind(this);
  15.         this.handleSubmit = this.handleSubmit.bind(this);
  16.         this.handleTaskClick = this.handleTaskClick.bind(this);
  17.  
  18.     }
  19.    
  20.      getItemTask(status, task_name){
  21.         const class_name= ((status===1)?"is-done":"");
  22.         return <li className="task" onClick={this.handleTaskClick}>
  23.              <p className={class_name} type="text">{task_name}</p>
  24.         </li>
  25.     }
  26.    
  27.        handleChange(event) {
  28.         this.setState({current_text: event.target.value});
  29.       }
  30.        handleSubmit(event)
  31.        {
  32.             this.appendNewTask(this.state.current_text)            
  33.             event.preventDefault();
  34.         }
  35.         handleTaskClick(e){
  36.             const target = e.target || e.srcElement;
  37.             const text = target.textContent || target.innerText;  
  38.             ///alert(text);
  39.             var array=this.state.items;
  40.            
  41.             var i=0;
  42.             for(i=0;i<array.length;i++)
  43.              {
  44.                
  45.                if(array[i].name ===text)
  46.                {
  47.                    if(array[i].status===1)
  48.                    {
  49.                       array[i].status=0;  
  50.                    }
  51.                    else
  52.                       array[i].status=1;
  53.                    this.setState({
  54.                             number_task_done: (array[i].status===1)?this.state.number_task_done+1:this.state.number_task_done-1,
  55.                             items: array,
  56.                             current_text:""
  57.                         });
  58.                }
  59.              }
  60.  
  61.         }
  62.        
  63.    
  64.     appendNewTask(task){
  65.        
  66.         this.setState({
  67.             total_task: this.state.total_task+1,
  68.             items: [...this.state.items,{name:this.state.current_text, status:0}],
  69.             current_text:""
  70.         });
  71.        
  72.    
  73.    
  74.     }
  75.    
  76.    
  77.     getAllTask(){
  78.        
  79.         const mapElement = this.state.items.map((item)=>{
  80.             return this.getItemTask(item.status, item.name);////<li   onClick={this.handleTaskClick}>{item.name}</li>    
  81.         });
  82.         return mapElement;
  83.     }
  84.    
  85.    
  86.     render() {
  87.         return (
  88.             <>
  89.                 <div class="todoListContainer">
  90.                     <h2>
  91.                         Todo List
  92.                     </h2>
  93.                    <input type="text" value={this.state.current_text} onChange={this.handleChange}/>
  94.                    <input type="button" value="Add" onClick={this.handleSubmit}/>
  95.                    <p> {this.state.number_task_done} remaining out of {this.state.total_task} task</p>
  96.                    <ul>
  97.                     {this.getAllTask()}
  98.                    </ul>
  99.                 </div>
  100.                 <style>{`
  101.                     .is-done {
  102.                         text-decoration: line-through;
  103.                     }
  104.                 `}</style>
  105.             </>
  106.         );
  107.     }
  108. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top