Finished MVP

src/App.js

@@ -1,13 +1,80 @@
 import React from 'react';
+import TodoForm from './components/TodoForm';
+import TodoList from './components/TodoList'
+
+const list = [
+  {
+    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 = {
+      list:list
+    }
+  }
+
+  toggleFinished = (todoId) => {
+    const updatedTodoList = this.state.list.map(todo => {
+      if (todo.id === todoId) {
+        return {...todo, finished: !todo.finished};
+      }
+      else{
+        return todo;
+      }
+    });
+    this.setState({
+      ...this.state,
+      list: updatedTodoList
+    });
+}
+
+addTodo = (todoName) => {
+  this.setState({
+    ...this.state,
+    list: [
+      ...this.state.list,
+      {
+        task: todoName,
+        id: Date.now(),
+        finished: false
+      }
+    ]
+  })
+}
+
+clearFinished = () => {
+  this.setState({
+    ...this.state,
+    list: this.state.list.filter(todo => !todo.finished)
+  })
+}
+
   render() {
     return (
-      <div>
+      <div className="App">
+        <div className="header">
         <h2>Welcome to your Todo App!</h2>
+        <TodoForm addTodo={this.addTodo} />
+        </div>
+        <TodoList
+        list={this.state.list}
+        toggleFinished={this.toggleFinished}
+        clearFinished={this.clearFinished}
+        />
       </div>
     );
   }

src/components/Todo.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Todo = props => {
+    return (
+        <div 
+        onClick={() => props.toggleFinished(props.todo.id)}
+        className={`todo${props.todo.finished ? ' finished' : ''}`}
+        >
+            <p>{props.todo.task}</p>
+        </div>
+    );
+};
+
+export default Todo;

src/components/TodoForm.js

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

src/components/TodoList.js

@@ -1,2 +1,17 @@
-// 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 className='todo-list'>
+            {props.list.map(todo => (
+                <Todo key={todo.id} todo={todo} toggleFinished={props.toggleFinished} />
+            ))}
+            <button onClick={props.clearFinished} className="clear-button">
+                Clear Finished
+            </button>
+        </div>
+    );
+};
+
+export default TodoList;

src/style.scss

@@ -0,0 +1,4 @@
+.todo.finished {
+    background-color: #d17d7c;
+    text-decoration: line-through;
+  }