Assignment Complete

README.md

@@ -60,6 +60,7 @@ In this project you will build an application that allows for todos to be added,
   - Once a todo is submitted, the Todo List should re-render and show the added todo.
 
 ## Submission Format
-- [ ] Only work on main.
-- [ ] Make sure to push your code at regular intervals.
-- [ ] Copy your github repo url and paste it into Canvas to submit your project
+- [ ] If this is your first time connecting a submission, authorize your github account within the codegrade assignment.
+- [ ] Connect your fork to Codegrade using the "Connect Git" button.
+- [ ] Find your newly created fork from the list and push your work to main.
+- [ ] Check this video for details: www.youtube.com/watch?v=fC2BO7dI6IQ

src/App.js

@@ -1,16 +1,86 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+
+import TodoForm from './components/TodoForm';
+import TodoList from './components/TodoList';
+
+const checkList = [
+  {
+    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 = {
+      checkList: checkList
+    }
+  }
+
+  handleClear = () => {
+    this.setState({
+      ...this.state,
+      checkList: this.state.checkList.filter(item => !item.completed)
+    });
+  }
+
+  handleAddItems = (item) => {
+    const newItem = {
+      name: item,
+      id: Date.now,
+      completed: false
+    };
+
+    this.setState({
+      ...this.state,
+      checkList: [...this.state.checkList, newItem]
+    });
+  }
+
+  handleToggle = (item) => {
+    this.setState({
+      ...this.state,
+      checkList: this.state.checkList.map(list => {
+        if(list.id === item.id){
+          return ({
+            ...list,
+            completed: !list.completed
+          })
+        }
+        return list;
+      })
+    })
+  }
+
   render() {
     return (
-      <div>
-        <h2>Welcome to your Todo App!</h2>
+      <div className='App'>
+        <div className='header'>
+          <h1>My Todo Checklist</h1>
+          <TodoForm handleAddItems={this.handleAddItems}/>
+        </div>
+        <TodoList 
+          handleClear={this.handleClear}
+          handleToggle={this.handleToggle}
+          checkList={this.state.checkList}
+        />
+        {/* <button 
+          onClick={this.handleClear} 
+          className='clear-btn'
+        >Refresh</button> */}
       </div>
     );
   }
 }
 
 export default App;
+const rootElement = document.getElementById('root');
+  ReactDOM.render(<App />, rootElement);

src/components/Todo.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Todo = props => {
+    const handleClick = () => {
+        props.handleToggle(props.item);
+    }
+
+    return (
+        <div onClick={handleClick} className={`item${props.item.completed ? ' completed' : ''}`}>
+          <p>{props.item.name}</p>
+        </div>
+    );
+};
+
+export default Todo;

src/components/TodoForm.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+class TodoForm extends React.Component {
+    // create a constructor with state
+    constructor(){
+        super();
+        this.state = {
+            input: ''
+        }
+    }
+
+    // handle any changes with state
+    handleChanges = e => {
+        this.setState({
+            ...this.state,
+            input: e.target.value
+        });
+    };
+
+    // class property to submit form
+    handleSubmit = (event) => {
+        event.preventDefault();
+        this.props.handleAddItems(this.state.input);
+    }
+
+    render() {
+        return (
+            <form onSubmit={this.handleSubmit}>
+                <input onChange={this.handleChanges} type='text' name='item'  />
+                <button>Add</button>
+            </form>
+        )
+    }
+}
+
+export default TodoForm;

src/components/TodoList.js

@@ -1,2 +1,15 @@
-// your components will all go in this `component` directory.
-// feel free to change this component.js into TodoList.js
+import React from 'react'
+import Todo from './Todo'
+
+const TodoList = props => {
+
+    return (
+        <div>
+          {props.checkList.map(item => (
+              <Todo handleToggle={props.handleToggle} key={item.id} item={item} />
+          ))}
+        </div>
+    )
+}
+
+export default TodoList;