+ {isEmpty ? (
+
+
-
-
+
+
+ );
+ }
+}
+
+export default DeleteButton;
\ No newline at end of file
diff --git a/src/components/DeleteButton/DeleteButton.scss b/src/components/DeleteButton/DeleteButton.scss
new file mode 100644
index 00000000..e25b7d80
--- /dev/null
+++ b/src/components/DeleteButton/DeleteButton.scss
@@ -0,0 +1,25 @@
+.testButton {
+ background-color: blue;
+ color: white;
+ padding: 8px 20px;
+}
+
+.container{
+ display: flex;
+ justify-content: flex-end;
+
+ .cancel {
+ border-radius: 50px;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ border: none;
+ background-color: rgb(194, 194, 194);
+
+ &:hover {
+ background-color: rgb(128, 128, 128);
+ transition: 0.5s;
+ }
+ }
+}
+
diff --git a/src/components/DeleteButton/index.js b/src/components/DeleteButton/index.js
new file mode 100644
index 00000000..b026a924
--- /dev/null
+++ b/src/components/DeleteButton/index.js
@@ -0,0 +1 @@
+export { default } from "./DeleteButton";
\ No newline at end of file
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
new file mode 100644
index 00000000..530f69e3
--- /dev/null
+++ b/src/components/Main/Main.js
@@ -0,0 +1,11 @@
+import React from "react";
+import "./Main.scss";
+
+function Main({ children, ...props}) {
+ return (
+ TODO
+
+
+ );
+}
+
+export default NavItem;
\ No newline at end of file
diff --git a/src/components/NavItems/NavItems.scss b/src/components/NavItems/NavItems.scss
new file mode 100644
index 00000000..253e30ab
--- /dev/null
+++ b/src/components/NavItems/NavItems.scss
@@ -0,0 +1,25 @@
+.should__be__nav {
+ li {
+ font-weight: 500;
+ list-style: none;
+ cursor: pointer;
+ }
+
+ li:hover {
+ color: #505050;
+ }
+
+ .navigation {
+ color: #a8a8a8;
+ }
+
+ .navigation:hover {
+ text-decoration: none;
+ color: #505050;
+ }
+
+ .active {
+ color: #5278ca;
+ text-align: center;
+ }
+ }
\ No newline at end of file
diff --git a/src/components/NavItems/index.js b/src/components/NavItems/index.js
new file mode 100644
index 00000000..bcaf7397
--- /dev/null
+++ b/src/components/NavItems/index.js
@@ -0,0 +1 @@
+export { default } from "./NavItems";
\ No newline at end of file
diff --git a/src/components/NotToDo/NotToDo.js b/src/components/NotToDo/NotToDo.js
new file mode 100644
index 00000000..2d5331cf
--- /dev/null
+++ b/src/components/NotToDo/NotToDo.js
@@ -0,0 +1,22 @@
+import React from "react";
+import "./NotToDo.scss";
+import image from "../../img/undraw.svg";
+
+function NotToDo() {
+ return (
+
+
+ All
+
+
+ Active
+
+
+ Completed
+
+
+
+
+ )
+}
+
+export default NotToDo;
+
diff --git a/src/components/NotToDo/NotToDo.scss b/src/components/NotToDo/NotToDo.scss
new file mode 100644
index 00000000..36120c89
--- /dev/null
+++ b/src/components/NotToDo/NotToDo.scss
@@ -0,0 +1,16 @@
+.d-flex {
+ .blue {
+ color: #5278ca;
+ }
+
+ .grey {
+ color: #505050;
+ }
+
+ .halfsize {
+ width: 300px;
+ .undraw {
+ mix-blend-mode: unset;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/NotToDo/index.js b/src/components/NotToDo/index.js
new file mode 100644
index 00000000..b45f4f60
--- /dev/null
+++ b/src/components/NotToDo/index.js
@@ -0,0 +1 @@
+export { default } from "./NotToDo"
\ No newline at end of file
diff --git a/src/components/TaskIndicator/TaskIndicator.js b/src/components/TaskIndicator/TaskIndicator.js
new file mode 100644
index 00000000..75c67224
--- /dev/null
+++ b/src/components/TaskIndicator/TaskIndicator.js
@@ -0,0 +1,16 @@
+ import React from "react";
+ import "./TaskIndicator.scss";
+ import NavItem from "../NavItems"
+
+
+ function TaskIndicator ({ todoLength}) {
+ return(
+
+ )
+ }
+
+ export default TaskIndicator;
diff --git a/src/components/TaskIndicator/TaskIndicator.scss b/src/components/TaskIndicator/TaskIndicator.scss
new file mode 100644
index 00000000..2a49c9f5
--- /dev/null
+++ b/src/components/TaskIndicator/TaskIndicator.scss
@@ -0,0 +1,9 @@
+footer{
+ width: 100%;
+ height: 60px;
+ border-top: 0.5px solid #d3d3d3;
+
+ .gFont{
+ color: grey;
+ }
+}
diff --git a/src/components/TaskIndicator/index.js b/src/components/TaskIndicator/index.js
new file mode 100644
index 00000000..360c0ee2
--- /dev/null
+++ b/src/components/TaskIndicator/index.js
@@ -0,0 +1 @@
+export { default } from "./TaskIndicator";
\ No newline at end of file
diff --git a/src/components/ToDo/ToDo.js b/src/components/ToDo/ToDo.js
new file mode 100644
index 00000000..5822df96
--- /dev/null
+++ b/src/components/ToDo/ToDo.js
@@ -0,0 +1,46 @@
+import React, {Component} from "react";
+import "./ToDo.scss";
+import CompletedCheckBox from "../CompletedCheckBox/CompletedCheckBox";
+
+class ToDo extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ todoName: ""
+ }
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ }
+
+ handleChange(e) {
+ e.preventDefault();
+ this.setState({ todoName: e.target.value });
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+ this.props.handleSubmit(this.state.todoName);
+ this.setState({ todoName: "" });
+ }
+
+ render() {
+ const { todoName } = this.state;
+
+ return (
+
+
+ Nothing to show you baby
+Add something to start
+
+ 
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default ToDo;
\ No newline at end of file
diff --git a/src/components/ToDo/ToDo.scss b/src/components/ToDo/ToDo.scss
new file mode 100644
index 00000000..8a52441b
--- /dev/null
+++ b/src/components/ToDo/ToDo.scss
@@ -0,0 +1,40 @@
+.todo__input {
+ font-weight:800;
+ width: 100% !important;
+ border: none;
+}
+
+form{
+ width: 90%;
+}
+
+.todo__input::placeholder {
+ opacity:0.5;
+}
+
+.todo__checkbox {
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ border: 1px solid #ddd;
+ -webkit-appearance: none;
+ outline: none;
+ cursor: pointer;
+ margin-top: 5px;
+ min-width: 25px;
+
+ &:checked{
+ width: 25px;
+ height: 25px;
+ transition: 0.3s;
+ border-radius: 50%;
+ border: 1px solid rgba(0, 0, 0, 0.143);
+ -webkit-appearance: none;
+ outline: none;
+ cursor: pointer;
+ margin-top: 5px;
+ background-color: #7c5ee7b4;
+ }
+
+}
+
diff --git a/src/components/ToDo/index.js b/src/components/ToDo/index.js
new file mode 100644
index 00000000..ecc05741
--- /dev/null
+++ b/src/components/ToDo/index.js
@@ -0,0 +1 @@
+export { default } from "./ToDo";
\ No newline at end of file
diff --git a/src/components/ToDoList/ToDoList.js b/src/components/ToDoList/ToDoList.js
new file mode 100644
index 00000000..4f2d416e
--- /dev/null
+++ b/src/components/ToDoList/ToDoList.js
@@ -0,0 +1,34 @@
+import React from "react";
+import CompletedCheckBox from "../CompletedCheckBox/CompletedCheckBox";
+import "../DeleteButton/DeleteButton";
+import "./toDoList.scss";
+import DeleteButton from "../../components/DeleteButton/DeleteButton";
+
+function ToDoList ({displayList, handleTodoComplete, handleRemove, handleChangeEdit, handleSubmitEdit}) {
+ return (
+ -
+ {displayList.map ((todo) => {
+ return(
+
-
+
{ + handleTodoComplete(todo.id) + }}/> + {todo.isEditing ? : handleSubmitEdit(e, todo.id)}>{todo.name} } + { handleRemove(todo.id)}}/> +
+ )
+ })}
+
+
+
+
+ 
+
+
+