initial commit

README.md

@@ -1,4 +1,4 @@
-# React-Todo
+# React-Todojv
 
 We're going to practice building a stateful class component with this project. Even though hooks are gaining popularity among react developers, class components are going to be around for a long time. It's imperative that you get use to class components, and feel comfortable working with class components since you'll most likely need to work with them if you are hired to work on a React app.
 

src/App.js

@@ -1,13 +1,81 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+
+import TodoForm from './components/TodoForm'
+import TodoList from './components/TodoList'
+
+const task =
+[
+  {
+    task: 'Organize Garage',
+    id: 1528817077286,
+    completed: false
+  },
+  {
+    task: 'Bake Cookies',
+    id: 1528817084358,
+    completed: false
+  }
+];
+
 
 class App extends React.Component {
   // you will need a place to store your state in this component.
   // design `App` to be the parent component of your application.
   // this component is going to take care of state, and any change handlers you need to work with your state
+  constructor() {
+    super();
+    this.state = {
+      task: task
+    }
+  }
+
+  handleTodoToggle = (todoId) => {
+    this.setState({
+      task: this.state.task.map(item=> {
+        if(item.id === todoId){
+          return{
+            ...item,
+            completed: (item.completed ? false: true)
+          }
+        }
+        return(item)
+      })
+    })
+  }
+
+  handleTodoAdd = (taskName) => {
+    const task = {
+      task: taskName,
+      id: Date.now(),
+      completed: false
+    }
+    const newTasks = [...this.state.task, task];
+    this.setState({
+      task: newTasks
+    })
+  } 
+
+    handleTodoCompleted = () => {
+      const newTask = this.state.task.filter(item=>{
+        return(!item.completed)
+      })
+
+      this.setState({
+        task: newTask
+      })
+  }
+
   render() {
     return (
       <div>
-        <h2>Welcome to your Todo App!</h2>
+      <h1>Todo List</h1>
+      <TodoList 
+      task={this.state.task}
+      handleTodoToggle={this.handleTodoToggle}
+      handleTodoCompleted={this.handleTodoCompleted}
+      handleTodoAdd={this.handleTodoAdd} />
+      <TodoForm handleTodoAdd={this.handleTodoAdd} />
       </div>
     );
   }

src/components/Todo.css

@@ -0,0 +1,3 @@
+.item.completed {
+    text-decoration: line-through;
+  }

src/components/Todo.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import './Todo.css';
+
+
+class Todo extends React.Component {
+    constructor() {
+        super();
+    }
+
+    handleClick = () => {
+        this.props.handleTodoToggle(this.props.item.id)
+    }
+
+    render() {
+        return (
+            <div onClick={this.handleClick} className={`item${this.props.item.completed ? ' completed' : ''}`}>
+                <p>{this.props.item.task}</p>
+            </div>
+        )
+    }
+
+}
+
+export default Todo

src/components/TodoForm.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+class TodoForm extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            inputValue: ""
+        }
+    }
+
+    handleChanges = e => {
+        this.setState({
+            inputValue: e.target.value
+        })
+    }
+
+    handleSubmit = (e) => {
+        e.preventDefault();
+        this.props.handleTodoAdd(this.state.inputValue);
+        this.setState({
+            inputValue: ''
+        })
+    }
+
+
+    render() {
+        return(
+            <form onSubmit={this.handleSubmit}>
+                <input value={this.state.inputValue} onChange={this.handleChanges} type='text' name='task' />
+                <button>Add Todo</button>
+
+            </form>
+        )
+    }
+}
+
+
+export default TodoForm

src/components/TodoList.js

@@ -1,2 +1,31 @@
 // your components will all go in this `component` directory.
 // feel free to change this component.js into TodoList.js
+import { render } from '@testing-library/react';
+import React from 'react';
+import Todo from './Todo'
+
+
+class TodoList extends React.Component {
+    constructor() {
+        super()
+    }
+
+
+handleClick = () => {
+    this.props.handleTodoCompleted();
+}
+
+    render() {
+        return(
+            <div>
+                {this.props.task.map(item => (
+                    <Todo handleTodoToggle={this.props.handleTodoToggle} key={item.id} item={item}/>))}        
+                <button onClick={this.handleClick} className='clear-btn'>
+                    Clear Completed
+                </button>      
+            </div>
+        )
+    }
+}
+
+export default TodoList;