harblaith7 · Andi-M96 · Jun 16, 2022
diff --git a/public/index.html b/public/index.html
@@ -27,6 +27,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+     <!-- Compiled and minified CSS -->
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <title>React App</title>
   </head>
   <body>

diff --git a/src/AddToDo.js b/src/AddToDo.js
@@ -0,0 +1,31 @@
+import React, { Component } from "react"
+
+class AddToDo extends Component {
+    state = {
+        content: ''
+    }
+    handleChange = (e) => {
+        this.setState({
+            content: e.target.value
+        })
+    }
+    handleSubmit = (e) => {
+        e.preventDefault();
+        this.props.addToDo(this.state);
+        this.setState({
+            content: ''
+        })
+    }
+    render(){
+        return (
+            <div>
+                <form onSubmit={this.handleSubmit}>
+                    <label>Add new todo:</label>
+                    <input type="text" onChange={this.handleChange} value={this.state.content}/>
+                </form>
+            </div>
+        )
+    }
+}
+
+export default AddToDo
diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,42 @@
-import logo from './logo.svg';
-import './App.css';
-import Banner from './components/Banner/Banner';
-import { Switch, Route } from "react-router-dom"
-import TodoPage from './pages/TodoPage/TodoPage';
-import FollowersPage from './pages/FollowersPage/FollowersPage';
+import React, { Component } from "react";
+import ToDos from "./ToDos";
+import "./App.css";
+import AddToDo from "./AddToDo";
 
-function App() {
-  return (
-    <div className="App">
-      <Banner />
-      <Switch>
-        <Route strict exact path="/" component={TodoPage}/>
-        <Route strict exact path="/followers" component={FollowersPage}/>
-      </Switch>
-    </div>
-  );
+class App extends Component {
+  state = {
+    todos: [
+      { id: 1, content: "learn react" },
+      { id: 2, content: "learn react again" },
+    ],
+  };
+
+  deleteToDo = (id) => {
+    const todos = this.state.todos.filter(todo => {
+      return todo.id !== id;
+    });
+    this.setState({
+      todos,
+    })
+  }
+
+  addToDo = (todo) => {
+    todo.id = Math.random();
+    let todos = [...this.state.todos, todo];
+    this.setState({
+      todos
+    })
+  }
+
+  render() {
+    return (
+      <div className="todo-app container">
+        <h1 className="center purple-text">ToDo's</h1>
+        <ToDos todos={this.state.todos} deleteToDo={this.deleteToDo} />
+        <AddToDo addToDo={this.addToDo} />
+      </div>
+    );
+  }
 }
 
 export default App;
diff --git a/src/ToDos.js b/src/ToDos.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+const ToDos = ({ todos, deleteToDo }) => {
+  const todoList = todos.length ? (
+    todos.map((todo) => {
+      return (
+        <div className="collection-item" key={todo.id}>
+          <span
+            onClick={() => {
+              deleteToDo(todo.id);
+            }}
+          >
+            {todo.content}
+          </span>
+        </div>
+      );
+    })
+  ) : (
+    <p className="center">You have nothing To Do!</p>
+  );
+  return <div className="todos collection">{todoList}</div>;
+};
+
+export default ToDos;
diff --git a/src/components/AddInput/AddInput.css b/src/components/AddInput/AddInput.css
diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css
diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
diff --git a/src/components/Followers/Followers.css b/src/components/Followers/Followers.css
diff --git a/src/components/Followers/Followers.js b/src/components/Followers/Followers.js
diff --git a/src/components/FollowersList/FollowersList.css b/src/components/FollowersList/FollowersList.css
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
diff --git a/src/components/Todo/Todo.css b/src/components/Todo/Todo.css
diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js
diff --git a/src/components/TodoFooter/TodoFooter.css b/src/components/TodoFooter/TodoFooter.css
diff --git a/src/components/TodoFooter/TodoFooter.js b/src/components/TodoFooter/TodoFooter.js
diff --git a/src/components/TodoList/TodoList.css b/src/components/TodoList/TodoList.css
diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js
diff --git a/src/logo.svg b/src/logo.svg