From c52c405ef6cffe591368cfed00ece71bf7199e88 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Tue, 31 Mar 2020 10:05:44 +0700 Subject: [PATCH 01/10] Create APPTODO-L-c-Anh-20167462 --- https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462 | 1 + 1 file changed, 1 insertion(+) create mode 100644 https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462 diff --git a/https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462 b/https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462 new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462 @@ -0,0 +1 @@ + From e4b7aa107df2feb4a705e12a78a4141461043e22 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:07:11 +0700 Subject: [PATCH 02/10] Update index.html --- public/index.html | 53 ++++++++++++++++++----------------------------- 1 file changed, 20 insertions(+), 33 deletions(-) diff --git a/public/index.html b/public/index.html index aa069f2..3ac10b4 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,30 @@ - - - - - - - - - - - - + + React App - -
- + + From 871408dabf501bcc05b9775854beefa473ac1632 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:08:10 +0700 Subject: [PATCH 03/10] Update App.css --- src/App.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 64 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 4200254..77fcc06 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,38 @@ .App { + text-align: center; +} + +.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; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to {.App { width: 800px; margin: 20px auto; display: flex; @@ -14,11 +48,15 @@ margin: 8px 4px; padding-bottom: 16px; border-bottom: 1px solid #aaa; + text-align: center; } .App-form > :nth-child(1) { display: flex; flex-direction: column; +.App-logo { + height: 40vmin; + pointer-events: none; } .App-form > :nth-child(1) > * { @@ -26,6 +64,10 @@ border: 1px solid #aaa; transition: all .3s; border-radius: 2px; +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } } .App-form > :nth-child(1) > *:focus { @@ -47,9 +89,16 @@ } .App-form > :nth-child(2) { +.App-header { + background-color: #282c34; + min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; } .App-form button { @@ -60,8 +109,22 @@ margin-top: 8px; cursor: pointer; box-shadow: 0px 2px 2px 0px rgba(0,0,0,.1); +.App-link { + color: #61dafb; } .App-form button:hover { box-shadow: 0px 2px 2px 2px rgba(0,0,0,.1); -} \ No newline at end of file +} +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + transform: rotate(360deg); + } +} +} From 248a7d4fe3b1a03f44929820d3a08bb893885382 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:09:01 +0700 Subject: [PATCH 04/10] Update App.js --- src/App.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 93d4b5e..a421f87 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,94 @@ import React, { Component } from 'react'; import ToDoListItem from "./ToDoListItem.js" import './App.css'; +import React from "react"; +import Addtask from "./components/Addtask"; +import Tasklist from "./components/Tasklist"; +import TodoTitle from "./components/TodoTile" +import "./App.css"; class App extends Component { +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + Task: [ + { + id :this.createGuid(), + title: "寝る", + mieuta: "寝る前に漫画を読む" + }, + { + id :this.createGuid(), + title: "ITSSを学習", + mieuta: "平田先生の宿題をする" + }, + { + id :this.createGuid(), + title: "食堂でご飯を食べる", + mieuta: "トランさんと一緒に食べる" + }, + { + id :this.createGuid(), + title: "泳ぎに行きます", + mieuta: "午前9時にプールで泳ぎに行く" + } + ] + }; + + } + createGuid() { + + function s4() { + return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); + } + return s4() + s4() + s4() + s4(); // Example => 'e014026082e6237b' + } + callbackHandlerFunction = (data) => { + var Task =this.state.Task; + data.id = this.createGuid(); + Task.push(data); + this.setState({ + Task : Task + }) + + +} +onDelete =(index) =>{ + var Task = this.state.Task; + Task.splice(index,1); + this.setState({ + Task : Task + }); + +} render() { + var Task = this.state.Task; return (
+
+ +
+
+
+
+ +
+
+ +
+ +
); } } -export default App; \ No newline at end of file +export default App; From 7f0a75aae94a033cfbf374ef45b48e2b7c3f1f54 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:10:59 +0700 Subject: [PATCH 05/10] Create components --- src/components | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/components diff --git a/src/components b/src/components new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/components @@ -0,0 +1 @@ + From e35d7934fa9b23e3b355886ae90fae64a36c97b8 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:12:31 +0700 Subject: [PATCH 06/10] Create Addtask.js --- src/Addtask.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/Addtask.js diff --git a/src/Addtask.js b/src/Addtask.js new file mode 100644 index 0000000..c50a22c --- /dev/null +++ b/src/Addtask.js @@ -0,0 +1,68 @@ +import React from "react"; + +class Addtask extends React.Component { + constructor(props) { + super(props) + this.state = { + title: '', + mieuta :'' + } + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + handleChange(event) { + var target = event.target; + var name = target.name; + var value = target.value; + this.setState( + { + [name]: value + } + ) + } + + handleSubmit(event) { + + this.props.handleClickParent(this.state); + event.preventDefault(); + + } + + render() { + return ( +
+
+

Add Task

+
+
+
+
+ + +
+ + +
+ + +
+
+
+ ); + } +} + +export default Addtask; From 2e490660d2f5f3ecca6f0f5b2c299166cc957ebe Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:14:45 +0700 Subject: [PATCH 07/10] Create Addtask.js --- https:/github.com/anhld1110/Addtask.js | 68 ++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 https:/github.com/anhld1110/Addtask.js diff --git a/https:/github.com/anhld1110/Addtask.js b/https:/github.com/anhld1110/Addtask.js new file mode 100644 index 0000000..c50a22c --- /dev/null +++ b/https:/github.com/anhld1110/Addtask.js @@ -0,0 +1,68 @@ +import React from "react"; + +class Addtask extends React.Component { + constructor(props) { + super(props) + this.state = { + title: '', + mieuta :'' + } + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + handleChange(event) { + var target = event.target; + var name = target.name; + var value = target.value; + this.setState( + { + [name]: value + } + ) + } + + handleSubmit(event) { + + this.props.handleClickParent(this.state); + event.preventDefault(); + + } + + render() { + return ( +
+
+

Add Task

+
+
+
+
+ + +
+ + +
+ + +
+
+
+ ); + } +} + +export default Addtask; From f14876a58f1b39af64d74859ec7d046e103d5cf7 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:15:23 +0700 Subject: [PATCH 08/10] Create Taskitem.js --- https:/github.com/anhld1110/Taskitem.js | 29 +++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 https:/github.com/anhld1110/Taskitem.js diff --git a/https:/github.com/anhld1110/Taskitem.js b/https:/github.com/anhld1110/Taskitem.js new file mode 100644 index 0000000..346bfc9 --- /dev/null +++ b/https:/github.com/anhld1110/Taskitem.js @@ -0,0 +1,29 @@ +import React from "react"; + +class Taskitem extends React.Component { + + onDelete = ()=>{ + this.props.onDelete(this.props.index); + + } + render() { + var task = this.props.task; + var index = this.props.index; + return ( + + {index} + {task.title} + {task.mieuta} + + + + + ); + } +} + +export default Taskitem; From 6e938e25145f38b78cd4cf7f38e592ce565839a6 Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:15:59 +0700 Subject: [PATCH 09/10] Create Tasklist.js --- https:/github.com/anhld1110/Tasklist.js | 42 +++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 https:/github.com/anhld1110/Tasklist.js diff --git a/https:/github.com/anhld1110/Tasklist.js b/https:/github.com/anhld1110/Tasklist.js new file mode 100644 index 0000000..16fb655 --- /dev/null +++ b/https:/github.com/anhld1110/Tasklist.js @@ -0,0 +1,42 @@ +import React from "react"; +import Taskitem from "./Taskitem"; +class Tasklist extends React.Component { + onDelete = ()=>{ + this.props.onDelete(this.props.index); + + } + render() { + var Task = this.props.Task; + var element =Task.map((task,index)=>{ + return + }); + + return ( +
+
+

Task List

+
+
+ + + + + + + + + + {element} +
IDTitleDescriptionTools
+
+
+ ); + } +} + +export default Tasklist; From 9945cbe2b2387daa12b718bc49a0a05fa59ec1fa Mon Sep 17 00:00:00 2001 From: anhld1110 <55491243+anhld1110@users.noreply.github.com> Date: Mon, 6 Apr 2020 11:16:38 +0700 Subject: [PATCH 10/10] Create TodoTile.js --- https:/github.com/anhld1110/TodoTile.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 https:/github.com/anhld1110/TodoTile.js diff --git a/https:/github.com/anhld1110/TodoTile.js b/https:/github.com/anhld1110/TodoTile.js new file mode 100644 index 0000000..a2491e7 --- /dev/null +++ b/https:/github.com/anhld1110/TodoTile.js @@ -0,0 +1,9 @@ +import React from "react"; + +class TodoTitle extends React.Component { + render() { + return

To Do App

; + } +} + +export default TodoTitle;