changes

src/App.js

 import React, { useState, useCallback, useEffect } from "react";
 import "./App.css";
 import TodoForm from "./components/TodoForm";
-import TodoItem from "./components/TodoItem";
 import Header from "./components/Header";
 import CompletedTodos from "./components/CompletedTodos";
+import Todos from './components/Todos'
 
 function App() {
   const [todos, setTodos] = useState([]);
@@ -71,14 +71,23 @@ function App() {
 
         <Header todos={todos} />
 
-        <TodoItem />
+        <Todos todos={todos}
+          completeTodo={completeTodo}
+          removeTodo={removeTodo}
+          editTodo={editTodo}
+          handleEditChange={handleEditChange}
+          editId={editId}
+          inputValue={inputValue}
+          setInputValue={setInputValue}
+          escFunction={escFunction} />
 
         <TodoForm onSubmit={addTodo} />
 
-        <CompletedTodos todos={todos}
-          completeTodo={completeTodo}
-          removeTodo={removeTodo} />
-          
+
+        <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>{todos.filter(todoLen => todoLen.status === true).length > 0 ? 'Completed Todos(' + todos.filter(todoLen => todoLen.status === true).length + ')' : ''}</h4>
+
+        <CompletedTodos todos={todos} completeTodo={completeTodo} removeTodo={removeTodo} />
+
       </div>
 
     </>

src/components/CompletedTodos.js

 import React from "react";
 import { CgCloseO } from "react-icons/cg";
 
-const CompletedTodos = ({
-    todos,
-    completeTodo,
-    removeTodo,
-}) => {
-
+const CompletedTodos = ({ todos, completeTodo, removeTodo, lengthCheck }) => {
     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 className="task-body-content">
+                    <div style={{ display: 'flex' }}>
+                        <div style={{ margin: '2px 4px 0px 0px', lineHeight: '1px' }}>
+                            <input type='checkbox'
+                                key={todo.id}
+                                checked={todo.status}
+                                onClick={() => completeTodo(todo.id)}
+                            ></input>
+                        </div>
+                        <div className={`todo ${todo.status ? 't-complete' : ''}`} onClick={() => lengthCheck()}>{todo.text}</div>
+                    </div>
+                    <div>
+                        <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
                     </div>
-                    <div>{todo.text}</div>
-                </div>
-                <div>
-                    <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
                 </div>
-            </div>
-            ) : '' }
+            ) : ''}
         </>
     ));
 };

src/components/TodoForm.js

@@ -32,8 +32,6 @@ function TodoForm(props) {
           <button className="btn" onClick={Submit}>Submit</button>
         </div>
       </form>
-      
-      <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>Completed Todos</h4>
     </>
   );
 

src/components/TodoItem.js

 import React from 'react'
 import { CgCloseO } from "react-icons/cg";
 
-const TodoItem = () => {
+const TodoItem = ({ todos, completeTodo, removeTodo, editTodo, handleEditChange, editId, inputValue, setInputValue, escFunction }) => {
   return (
     <div className="task">
-      <div className="task-body-content">
-        <div style={{ display: 'flex' }}>
-          <div style={{ margin: '2px 4px 0px 0px' }}>
-            <input type='checkbox' defaultChecked={false}></input>
+
+      {/*** List Todos ***/}
+
+      {editId !== todos.id ? (
+        todos.status === false ? (
+          <div className="task-body-content">
+            <div style={{ display: 'flex' }}>
+              <div style={{ margin: '2px 4px 0px 0px', lineHeight: '1px' }}>
+                <input type='checkbox'
+                  checked={todos.status}
+                  onChange={() => completeTodo(todos.id)}
+                ></input>
+              </div>
+              <div onClick={() => handleEditChange(todos.id, todos.text)} style={{ cursor: 'pointer' }}>{todos.text}</div>
+            </div>
+            <div>
+              <CgCloseO onClick={() => removeTodo(todos.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
+            </div>
+          </div>
+        ) : ''
+      ) : (
+        <>
+          {/*** Edit Todos ***/}
+
+          <div className="add-form">
+            <div className='form-control'>
+              <input
+                type="text"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                escFunction={(e) => escFunction(e.key)}
+              />
+            </div>
+            <button className="btn" onClick={() => editTodo(todos.id, inputValue)}>Save</button>
           </div>
-          <div>Item 1</div>
-        </div>
-        <div>
-          <CgCloseO style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
-        </div>
-      </div>
-    </div>
+        </>
+      )}
+    </div >
   )
 }
 

src/components/Todos.js

+import React from 'react'
+import TodoItem from './TodoItem'
+
+const Todos = ({ todos, removeTodo, completeTodo, editTodo, handleEditChange, inputValue, setInputValue, escFunction, editId }) => {
+    return (
+        <div>
+            {todos.map((todos) => (
+                <TodoItem key={todos.id} todos={todos} removeTodo={removeTodo} completeTodo={completeTodo} editTodo={editTodo} handleEditChange={handleEditChange} inputValue={inputValue} setInputValue={setInputValue} escFunction={escFunction} editId={editId} />
+            ))}
+        </div>
+    )
+}
+
+export default Todos

src/index.css

@@ -7,7 +7,7 @@
 body {
   font-family: sans-serif;
   background-color: #cccccc24;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .btn {
@@ -29,12 +29,12 @@ body {
 
 .add-form {
   display: flex;
-  justify-content: space-around;
-  margin: 10px 0px;
+  justify-content: space-between;
+  margin: 10px 10px 10px 5px;
 }
 
 .form-control input {
-  width: 100%;
+  width: 20rem;
   height: 35px;
   margin: 5px 2px 3px 3px;
   padding: 3px 7px;
@@ -48,7 +48,7 @@ footer {
 }
 
 .task-main {
-  width: 25em;
+  width: 26rem;
   margin: 15rem auto;
   border-bottom: 1px solid rgba(0, 0, 0, .125);
   border-radius: 4px;
@@ -78,5 +78,5 @@ footer {
 }
 
 .t-complete {
-  background-color: green;
+  text-decoration: line-through;
 }
\ No newline at end of file