hoan thanh

Author: DEVfancybear

example_1/.idea/.gitignore

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "classnames": "^2.2.6",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0"

example_1/.idea/example_1.iml

@@ -1,38 +1,23 @@
 .App {
-  text-align: center;
+  width: 500px;
+  margin-left: auto;
+  margin-left: auto;
+  border: 1px solid #EEE;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App .Header {
+  padding: 10px 5px;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  border-bottom: 1px solid #EEE;
 }
-
-.App-link {
-  color: #61dafb;
+.App .Header input {
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 24px;
+  padding-left: 10px;
+  width: 100%;
+  border: none;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.App .Header input:focus {
+  outline: none;
+}

example_1/.idea/inspectionProfiles/Project_Default.xml

@@ -1,27 +1,93 @@
 import React, { Component } from "react";
 import ItemTodo from "./components/ItemTodo";
 import "./App.css";
+import tick from "./img/tick.svg";
 
 class App extends Component {
   constructor() {
     super();
-    this.todoItems = [
-      { title: "Dắt gấu đi chơi", isComplete: true},
-      { title: "Đi shopping", isComplete: true},
-      { title: "Đi siêu thị"}
-    ];
+    this.state = {
+      newItem: '',
+      todoItems: [
+        { title: "Dắt gấu đi chơi", isComplete: true },
+        { title: "Đi shopping", isComplete: true },
+        { title: "Đi siêu thị", isComplete: false },
+        { title: "Nấu Cơm", isComplete: false },
+        { title: "Rửa Bát", isComplete: true }
+      ]
+    };
+    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onChange=this.onChange.bind(this);
+  }
+  onItemClicked = item => {
+    return e => {
+      const isComplete = item.isComplete;
+      const todoItems = this.state.todoItems;
+      const index = todoItems.indexOf(item);
+      this.setState({
+        todoItems: [
+          ...todoItems.slice(0, index),
+          {
+            ...item,
+            isComplete: !isComplete
+          },
+          ...todoItems.slice(index + 1)
+        ]
+      });
+    };
+  };
+  // bắt sự kiên lúc người dùng ấn enter
+  onKeyUp = e => {
+    // console.log(e.target.value);
+    // console.log(e.keyCode);
+     // lấy giá trị tại thời điểm gõ
+     let text = e.target.value;
+    if (e.keyCode === 13) {
+      // enter key
+     
+      if (!text) {
+        return;
+      }
+      text = text.trim(); //xóa đi dấ cách ở đầu và cuối
+      if (!text) {
+        return;
+      }
+      this.setState({
+        newItem:'',
+        todoItems: [{ title: text, isComplete: false }, ...this.state.todoItems]
+      });
+    }
+  };
+  onChange=(e) => {
+    this.setState({
+      newItem: e.target.value
+    })
   }
   render() {
-    let a = this.todoItems.length;
+    let a = this.state.todoItems.length;
+    const {newItem} = this.state;
     return (
-      <>
+      <div className="App">
+        <div className="Header">
+          <img src={tick} width={32} height={32} />
+          <input
+            type="text"
+            placeholder="Add new item"
+            onKeyUp={this.onKeyUp}
+            value={newItem}
+            onChange={this.onChange}
+          />
+        </div>
         {a > 0 &&
-          this.todoItems.map((item, index) => (
-            <ItemTodo key={index} item={item} />
+          this.state.todoItems.map((item, index) => (
+            <ItemTodo
+              key={index}
+              item={item}
+              onClick={this.onItemClicked(item)}
+            />
           ))}
         {a === 0 && <div>Không có gì</div>}
-        {/* dùng map để biến 1 arr gồm các obj phải thêm key */}
-      </>
+      </div>
     );
   }
 }

example_1/.idea/misc.xml

@@ -3,9 +3,19 @@
   font-weight: 300;
   font-size: 24px;
   color: #4d4d4d;
-  text-align: center;
+  border-bottom: 1px solid #eee;
+  padding: 10px 5px;
+  display: flex;
 }
-.item_done {
-    text-decoration: line-through;
-    opacity: 0.3;
+.item_todo:last-child {
+  border-bottom: none;
+
+  border-bottom: 1px solid #eee;
+}
+.item_done > p {
+  text-decoration: line-through;
+  opacity: 0.3;
+}
+.item_todo > p {
+  margin: 0 0 0 10px;
 }

example_1/.idea/modules.xml

@@ -1,16 +1,23 @@
 import React, { Component } from "react";
-import './ItemTodo.css';
+import "./ItemTodo.css";
+import classNames from "classnames";
+import imgCheck from "../img/check.svg";
+import imgCheckDone from "../img/success.svg";
 class ItemTodo extends Component {
   render() {
-      const items = this.props.item;
-      let className = 'item_todo';
-      if(items.isComplete) {
-          //thêm class css khi click 
-         className += ' item_done';
-      }
+    const { item, onClick } = this.props;
+    let url = imgCheck;
+    if (item.isComplete) {
+      url = imgCheckDone;
+    }
     return (
-      <div className={className}>
-        <p>{items.title}</p>
+      <div
+        className={classNames("item_todo", {
+          item_done: item.isComplete
+        })}
+      >
+        <img onClick={onClick} src={url} width={32} height={32} />
+        <p>{this.props.item.title}</p>
       </div>
     );
   }