Guest User

Untitled

a guest
Oct 23rd, 2019
86
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