course work working

frontend/components/App.js

@@ -1,11 +1,53 @@
 import React from 'react'
+import Form from './Form'
+import TodoList from './TodoList';
 
 export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      data: [{
+        name: "Walk Jasia",
+        id: Date.now(),
+        completed: false
+      }],
+    }
+  }
+
+  handleSubmit = (e,item) => {
+    e.preventDefault();
+    if(item){
+      const newItem = {
+        name: item,
+        id: Date.now(),
+        completed: false
+      }
+      this.setState({data: [...this.state.data, newItem]})
+    }
+  }
+
+  toggleCompleted = itemId => {
+    this.setState({...this.state, data: this.state.data.map(task => {
+      if(task.id === itemId) {
+        return {...task,completed: !task.completed}
+      }
+      return task
+    })})
+  }
+
+  clearCompleted = () => {
+    this.setState({data: this.state.data.filter(task => {
+      if(!task.completed) return task;
+    })})
+  }
+
+
   render() {
     return (
       <div>
-        Todo App
+        <TodoList toggleCompleted={this.toggleCompleted} data={this.state.data}/>
+        <Form clear={this.clearCompleted} submit={this.handleSubmit} test={this.state.test}/>
       </div>
     )
   }
-}
+}

frontend/components/Form.js

@@ -1,11 +1,30 @@
 import React from 'react'
 
+
 export default class Form extends React.Component {
+  constructor () {
+    super();
+    this.state = {
+      form: ''
+    }
+  }
+  submit = (e,item) => {
+    this.props.submit(e,this.state.form)
+    this.setState({form: ''})
+  }
+
+  change = (e) => {
+    e.preventDefault()
+    this.setState({...this.state.form, form: e.target.value})
+  }
   render() {
     return (
       <div>
-        Form
+        <form onSubmit={this.submit}>
+        <input type="text" name='form' onChange={this.change} value={this.state.form}/><button>Submit</button>
+        </form>
+        <button onClick={this.props.clear}>Clear Completed</button>
       </div>
     )
   }
-}
+}

frontend/components/Todo.js

@@ -1,11 +1,14 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
+
   render() {
     return (
-      <div>
-        Todo
+      <div className={`item${this.props.task.completed ? 'completed' : ''}`}
+      onClick={() => this.props.toggleCompleted(this.props.task.id)}>
+        <h2>{this.props.task.name}</h2>
+
       </div>
     )
   }
-}
+}

frontend/components/TodoList.js

@@ -1,11 +1,19 @@
 import React from 'react'
+import Todo from './Todo'
 
 export default class TodoList extends React.Component {
+
+
+
+
   render() {
     return (
-      <div>
-        TodoList
+      <div className='Todo-list'>
+        {this.props.data.map(task => (
+          <Todo toggleCompleted={this.props.toggleCompleted} key={task.id} task={task}/>
+        ))}
+
       </div>
     )
   }
-}
+}

frontend/index.js

@@ -6,7 +6,7 @@ import './styles/styles.css'
 
 render(
   <React.StrictMode>
-    <h1>Todo App</h1>
+    <h1>What to get Done! Todo App</h1>
     <App />
   </React.StrictMode>
   , document.getElementById('root')

frontend/styles/styles.css

@@ -69,6 +69,7 @@ nav a.active {
 }
 
 #todos {
+  color: black;
   margin: 0 0 1rem 0;
 }
 
@@ -83,3 +84,13 @@ ul, form {
 .todo:hover {
   cursor: pointer;
 }
+
+.itemcompleted {
+text-decoration: line-through;
+}
+.Todo-list {
+  background-image: url(https://images.unsplash.com/photo-1591195852468-03a01d1375d6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTB8fHN0aWNreSUyMG5vdGVzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60);
+  border: dashed black .05rem;
+  background-repeat: no-repeat;
+
+}