1st commit

src/App.js

@@ -1,13 +1,73 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+import TodoList from './components/TodoList';
+import TodoForm from './components/TodoForm';
+
+import './Todo.css';
+
+const todolist = [
+{
+  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 = {
+      todolist: todolist
+    }
+  }
+
+  toggleCompleted = (todoId) => {
+    const updatedTodolist = this.state.todolist.map(todo => {
+      if (todo.id === todoId) {
+        return {
+          ...todo,
+          completed: !todo.completed
+        }
+      }
+      return todo;
+    });
+    this.setState({
+      ...this.state,
+      todolist: updatedTodolist
+    });
+  }
+
+  addTodo = (todoName) => {
+    const newTodo = {
+      task: todoName,
+      id: Date.now(),
+      completed: false
+    };
+    this.setState({
+      ...this.state,
+      todolist: [
+        ...this.state.todolist,
+        newTodo
+      ]
+    })
+  }
+
   render() {
     return (
-      <div>
-        <h2>Welcome to your Todo App!</h2>
+      <div className="App">
+        <div className="header">
+          <h1>Todo List</h1>
+          <TodoForm addTodo={this.addTodo} />
+        </div>
+        <TodoList todolist={this.state.todolist} toggleCompleted={this.toggleCompleted} />
       </div>
     );
   }

src/Todo.css

@@ -0,0 +1,96 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 1em;
+}
+
+body {
+  background-color: #2d2d37;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+p,
+span {
+  color: white;
+  font-family: 'Roboto', sans-serif;
+}
+
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  padding: 0 36px;
+  max-width: 665px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+h1 {
+  text-align: left;
+}
+
+.todolist {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  width: 100%;
+  margin: 0 auto;
+}
+.todo {
+  background-color: #e64944;
+  width: 45%;
+  text-align: left;
+  margin: 4px 0;
+  padding-left: 8px;
+  cursor: pointer;
+}
+
+.todo.completed {
+  background-color: #d17d7c;
+  text-decoration: line-through;
+}
+form {
+  width: 50%;
+  display: flex;
+  justify-content: flex-end;
+}
+form > input {
+  background-color: #2d2d37;
+  border: 0;
+  padding: 6px 0;
+  font-size: 1rem;
+  width: 240px;
+  outline: 0;
+  color: white;
+  border-bottom: 1px solid #e64944;
+  margin-right: 8px;
+}
+
+button {
+  background-color: #e64944;
+  border: 1px solid #e64944;
+  color: white;
+  font-size: 16px;
+  padding: 6px 14px;
+}
+
+input::placeholder {
+  color: #e64944;
+  opacity: 1;
+}
+
+.clear-btn {
+  margin-top: 16px;
+}

src/components/Todo.js

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

src/components/TodoForm.js

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

src/components/TodoList.js

@@ -1,2 +1,23 @@
 // 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="todolist">
+            {props.todolist.map(todo => (
+                <Todo key={todo.id} todo={todo} toggleCompleted={props.toggleCompleted} />
+            ))}
+            <button className="clear-btns" onClick={props.todolist.filter(todo => todo.completed === false)}>
+                Clear Completed
+            </button>
+        </div>
+    );
+};
+
+export default TodoList;