Completed Steps

frontend/components/App.js

@@ -1,11 +1,66 @@
-import React from 'react'
+import React from "react";
+import Form from "./Form";
+import TodoList from "./TodoList";
+
+const list = [
+  {
+    name: "Wash Dishes",
+    id: 100,
+    completed: false,
+  },
+];
 
 export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      list: list,
+    };
+  }
+
+  addItem = (e, item) => {
+    e.preventDefault();
+    const newList = {
+      name: item,
+      id: Date.now(),
+      completed: false,
+    };
+    this.setState({
+      ...this.state,
+      list: [...this.state.list, newList],
+    });
+  };
+
+  toggleItem = (itemId) => {
+    console.log(itemId);
+    this.setState({
+      ...this.state,
+      list: this.state.list.map((items) => {
+        if (itemId === items.id) {
+          return { ...items, completed: !items.completed };
+        }
+        return items;
+      }),
+    });
+  };
+
+  clearCompleted = () => {
+    this.setState({
+      ...this.state,
+      list: this.state.list.filter((item) => {
+        if (!item.completed) return item;
+      }),
+    });
+  };
   render() {
     return (
-      <div>
-        Todo App
+      <div className="App">
+        <div className="header">
+          <Form addItem={this.addItem} />
+        </div>
+        <TodoList toggleItem={this.toggleItem} list={this.state.list} />
+        <button onClick={this.clearCompleted}>Clear Completed</button>
       </div>
-    )
+    );
   }
 }

frontend/components/Form.js

@@ -1,11 +1,38 @@
-import React from 'react'
+import React from "react";
 
 export default class Form extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      item: "",
+    };
+  }
+  handleChange = (evt) => {
+    evt.preventDefault();
+    this.setState({ ...this.state, item: evt.target.value });
+  };
+
+  submitForm = (evt) => {
+    evt.preventDefault();
+    this.props.addItem(evt, this.state.item);
+    this.setState({ ...this.state, item: "" });
+  };
   render() {
     return (
-      <div>
-        Form
-      </div>
-    )
+      <form onSubmit={this.submitForm}>
+        <div>
+          <h1>Add Next To Do Item To List</h1>
+        </div>
+        <br />
+        <input
+          type="text"
+          name="todo"
+          value={this.state.item}
+          onChange={this.handleChange}
+          placeholder="Add item"
+        />
+        <button>Add</button>
+      </form>
+    );
   }
 }

frontend/components/Todo.js

@@ -1,11 +1,17 @@
-import React from 'react'
+import React from "react";
 
 export default class Todo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
   render() {
     return (
-      <div>
-        Todo
+      <div
+        className={`item${this.props.item.completed ? " completed" : ""}`}
+        onClick={() => this.props.toggleItem(this.props.item.id)}
+      >
+        <p>{this.props.item.name}</p>
       </div>
-    )
+    );
   }
 }

frontend/components/TodoList.js

@@ -1,11 +1,18 @@
-import React from 'react'
+import React from "react";
+import Todo from "./Todo";
 
 export default class TodoList extends React.Component {
+  constructor(props) {
+    super(props);
+  }
   render() {
     return (
-      <div>
-        TodoList
+      <div className="todo-list">
+        <h2>TodoList</h2>
+        {this.props.list.map((item) => (
+          <Todo toggleItem={this.props.toggleItem} key={item.id} item={item} />
+        ))}
       </div>
-    )
+    );
   }
 }