UI,Complete Checkbox and Edit corrections added

src/App.js

@@ -2,9 +2,9 @@ import React from "react";
 import "./App.css";
 import TodoList from "./components/TodoList";
 
-function App(todos={todos}) {
+function App() {
   return (
-    <div className='task'>
+    <div className='task-main'>
       <TodoList />
     </div>
   );

src/components/CompletedTodos.js

+import React from "react";
+import { CgCloseO } from "react-icons/cg";
+
+const Todo = ({
+    todos,
+    completeTodo,
+    removeTodo,
+}) => {
+
+    return todos.map((todo) => (
+        <>
+            {todo.status === true ? (
+            <div className="task-body-content">
+                <div style={{ display: 'flex' }}>
+                    <div style={{ margin: '2px 4px 0px 0px' }}>
+                        <input type='checkbox'
+                            key={todo.id}
+                            checked={todo.status}
+                            onClick={() => completeTodo(todo.id)}
+                        ></input>
+                    </div>
+                    <div>{todo.text}</div>
+                </div>
+                <div>
+                    <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
+                </div>
+            </div>
+            ) : '' }
+        </>
+    ));
+};
+
+export default Todo;

src/components/Header.js

 import React from 'react';
-import { FcSurvey } from "react-icons/fc";
 
 const Header = ({ todos }) => {
     return (
         <div className='App'>
-            <FcSurvey style={{ fontSize: '3em' }} />
-            <div className='task-head'>You have {todos.length > 0 ? todos.length : 'No'} Todos</div>
+            <div className='task-head'><b>You have {todos.length > 0 ? todos.length : 'No'} Todos</b></div>
         </div>
     )
 }

src/components/Todo.js

 import React from "react";
-import { FaRegTrashAlt, FaPen } from "react-icons/fa";
+import { CgCloseO } from "react-icons/cg";
 
-const Todo = ({
+const CompletedTodos = ({
   todos,
   completeTodo,
   removeTodo,
@@ -22,29 +22,33 @@ const Todo = ({
               onChange={(e) => setInputValue(e.target.value)}
             />
           </div>
-          <button className="btn" onClick={() => editTodo(todo.id, inputValue)}>Edit</button>
+          <button className="btn" onClick={() => editTodo(todo.id, inputValue)}>Save</button>
         </div>
       ) : (
         <>
-          <div className="task-body-content">
-            <div
-              key={todo.id}
-              className={todo.isComplete ? "t-complete" : ""}
-              onClick={() => completeTodo(todo.id)}
-              style={{ cursor: 'pointer' }}
-            >
-              {todo.text}
+          {/* New Todos Section */}
+          {todo.status === false ? (
+            < div className="task-body-content">
+              <div style={{ display: 'flex' }}>
+                <div style={{ margin: '2px 4px 0px 0px' }}>
+                  <input type='checkbox'
+                    key={todo.id}
+                    checked={todo.status}
+                    onClick={() => completeTodo(todo.id)}
+                  ></input>
+                </div>
+                <div onClick={() => handleEditChange(todo.id, todo.text)} style={{ cursor: 'pointer' }}>{todo.text}</div>
+              </div>
 
+              <div>
+                <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
+              </div>
             </div>
-            <div>
-              <FaPen onClick={() => handleEditChange(todo.id, todo.text)} style={{ cursor: 'pointer', margin: '0px 7px 0px 7px', fontSize: '12px' }} />
-              <FaRegTrashAlt onClick={() => removeTodo(todo.id)} style={{ color: 'red', cursor: 'pointer' }} />
-            </div>
-          </div>
+          ) : ''}
         </>
       )}
-    </div>
+    </div >
   ));
 };
 
-export default Todo;
+export default CompletedTodos;

src/components/TodoForm.js

 import React, { useState } from "react";
 
-function TodoForm(props) {
+function TodoForm(
+  props,
+) {
+
   const [input, setInput] = useState("");
 
   const onChange = (e) => {
@@ -13,26 +16,27 @@ function TodoForm(props) {
     props.onSubmit({
       id: Math.floor(Math.random() * 10000),
       text: input,
-      complete: false
+      status: false
     });
     setInput("");
   };
-
   return (
-    <form onSubmit={Submit}>
-      <div className="add-form">
-        <div className='form-control'>
-          <input
-            placeholder="Todo..."
-            value={input}
-            onChange={onChange}
-            name="text"
-          />
+    <>
+      <form onSubmit={Submit}>
+        <div className="add-form">
+          <div className='form-control'>
+            <input
+              placeholder="Enter Item"
+              value={input}
+              onChange={onChange}
+              name="text" />
+          </div>
+          <button className="btn" onClick={Submit}>Submit</button>
         </div>
-        <button className="btn" onClick={Submit}>Add</button>
-      </div>
-    </form>
+      </form>
+    </>
   );
+
 }
 
 export default TodoForm;

src/components/TodoList.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import TodoForm from "./TodoForm";
 import Todo from "./Todo";
 import Header from "./Header";
+import CompletedTodos from "./CompletedTodos"
 
 function TodoList() {
 
@@ -31,7 +32,7 @@ function TodoList() {
   const completeTodo = (id) => {
     const updatedTodos = todos.map((todo) => {
       if (todo.id === id) {
-        todo.isComplete = !todo.isComplete;
+        todo.status = !todo.status;
       }
       return todo;
     });
@@ -52,6 +53,7 @@ function TodoList() {
   return (
     <>
       <Header todos={todos} />
+
       <Todo
         todos={todos}
         completeTodo={completeTodo}
@@ -63,6 +65,12 @@ function TodoList() {
         setInputValue={setInputValue}
       />
       <TodoForm onSubmit={addTodo} />
+
+      <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>Completed Todos</h4>
+
+      <CompletedTodos todos={todos}
+        completeTodo={completeTodo}
+        removeTodo={removeTodo} />
     </>
   );
 }

src/index.css

-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
-
 * {
   box-sizing: border-box;
   margin: 0;
@@ -7,18 +5,18 @@
 }
 
 body {
-  font-family: 'Poppins', sans-serif;
-  /* background-color: #0cf; */
+  font-family: sans-serif;
+  background-color: #cccccc24;
   font-size: 14px;
 }
 
 .btn {
   display: inline-block;
   background: #000;
-  background-color: #0cf;
+  background-color: #fff;
   color: #000;
-  border: none;
-  padding: 10px 20px;
+  border: 1px solid #ccc;
+  padding: 10px 12px;
   margin: 5px;
   border-radius: 5px;
   cursor: pointer;
@@ -32,7 +30,7 @@ body {
 .add-form {
   display: flex;
   justify-content: space-around;
-  margin-top: 10px;
+  margin: 10px 0px;
 }
 
 .form-control input {
@@ -49,21 +47,22 @@ footer {
   margin-top: 30px;
 }
 
-.task {
-  width: 22rem;
-  padding: 10px 0px;
-  margin: 5px auto;
-  background-color: #000;
+.task-main {
+  width: 25em;
+  margin: 15rem auto;
   border-bottom: 1px solid rgba(0, 0, 0, .125);
   border-radius: 4px;
-  color: #fff;
-  box-shadow: -1px 2px 8px 0px #383838;
+  color: #000;
+  box-shadow: -1px 2px 8px 0px #38383829;
+  background-color: #fff;
 }
 
 .task-head {
   border-bottom: 1px solid #ffffff61;
-  padding-bottom: 10px;
+  padding: 10px;
   text-align: center;
+  box-shadow: 1px 3px 1px #18181812;
+  margin-bottom: 15px;
 }
 
 .task-body {
@@ -74,11 +73,10 @@ footer {
 .task-body-content {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid #ffffff61;
-  padding: 0px 15px;
+  border-bottom: 1px solid #ccc;
+  padding: 5px 12px;
 }
 
 .t-complete {
-  text-decoration: line-through;
-  color: green;
+  background-color: green;
 }
\ No newline at end of file