corrections

src/App.js

@@ -43,7 +43,7 @@ function App() {
   //     alert('Please add a Todo')
   //     return;
   //   }
-  //   const newTodos = [todo, ...todos];
+  //   const newTodos = [todo, ...todoData];
   //   setTodos(newTodos);
   //   console.log(newTodos);
   // };
@@ -93,13 +93,11 @@ function App() {
     <>
       <div className='task-main'>
 
-        <Header todos={todoData} />
+        <Header count={todoData} />
 
-        {todoData.map((todos) => (
-          <TodoItem key={todos.id}
-            todos={todos}
-            editMode={((e) => console.log(e.target.value))} />
-        ))}
+        {/* {todoData.map((todos) => (
+          <TodoItem key={todos.id} children={todos.text} complete={todos.isComplete}/>
+        ))} */}
 
         {/* <Todos todos={todos}
           completeTodo={completeTodo}
@@ -111,7 +109,7 @@ function App() {
           setInputValue={setInputValue}
           escFunction={escFunction} /> */}
 
-        {/* <TodoForm onSubmit={addTodo} /> */}
+        <TodoForm />
 
 
         {/* <h4 style={{ textAlign: 'center', marginBottom: '10px' }}>{todos.filter(todoLen => todoLen.status === true).length > 0 ? 'Completed Todos(' + todos.filter(todoLen => todoLen.status === true).length + ')' : ''}</h4>

src/components/Header.js

 import React from 'react';
 
-const Header = ({ todos }) => {
+const Header = ({ count }) => {
     return (
         <div className='App'>
-            <div className='task-head'><b>You have {todos.length > 0 ? todos.length : 'No'} Todos</b></div>
+            <div className='task-head'><b>You have {count.length > 0 ? count.length : 'No'} {count.length <= 1 ? 'Todo' : 'Todos'}</b></div>
         </div>
     )
 }

src/components/TodoForm.js

@@ -13,10 +13,12 @@ function TodoForm(props) {
     props.onSubmit({
       id: Math.floor(Math.random() * 10000),
       text: input,
-      status: false,
+      isEdit: false,
+      isComplete: false
     });
     setInput('');
   };
+
   return (
     <form onSubmit={Submit}>
       <div className='add-form'>
@@ -25,7 +27,6 @@ function TodoForm(props) {
             placeholder='Enter Item'
             value={input}
             onChange={onChange}
-            name='text'
           />
         </div>
         <button className='btn' onClick={Submit}>

src/components/TodoItem.js

 import React from 'react'
 
-const TodoItem = ({ todos, editMode }) => {
+const TodoItem = ({ children, complete }) => {
 
-  const className = `todos ${todos.isComplete ? 't-complete' : ''}`
+  const className = `todos ${complete ? 't-complete' : ''}`
 
   return (
     <div className="task">
-      {todos.isEdit ?
-        <input type='text' defaultValue={todos.text} onChange={editMode}></input> :
-        <div>
-          <input type='checkbox' defaultChecked={todos.isComplete}></input>
-          <span className={className}>{todos.text}</span>
+      <div className="task-body-content">
+        <div style={{ display: 'flex' }}>
+          <input type='checkbox' defaultChecked={complete}></input>
+          <span style={{ cursor: 'pointer' }} className={className}>{children}</span>
         </div>
-      }
+      </div>
     </div >
   )
 }

src/index.css

-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 body {
   font-family: sans-serif;
-  background-color: #cccccc24;
-  font-size: 16px;
+  background-color: #fff;
+  font-size: 15px;
+  box-sizing: border-box;
 }
 
 .btn {
   display: inline-block;
-  background: #000;
   background-color: #fff;
   color: #000;
   border: 1px solid #ccc;
@@ -22,7 +16,6 @@ body {
   cursor: pointer;
   text-decoration: none;
   font-size: 15px;
-  font-family: inherit;
   height: 35px;
   line-height: 0px;
 }
@@ -34,19 +27,15 @@ body {
 }
 
 .form-control input {
-  width: 20rem;
-  height: 35px;
+  width: 18rem;
+  height: 26px;
   margin: 5px 2px 3px 3px;
   padding: 3px 7px;
-  font-size: 17px;
+  font-size: 15px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
 
-footer {
-  margin-top: 30px;
-}
-
 .task-main {
   width: 26rem;
   margin: 15rem auto;
@@ -65,18 +54,15 @@ footer {
   margin-bottom: 15px;
 }
 
-.task-body {
-  height: 30px;
-  padding: 0px 18px !important;
-}
-
 .task-body-content {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ccc;
   padding: 5px 12px;
 }
-
+.task-body-content:last-child{
+  border: none;
+}
 .t-complete {
   text-decoration: line-through;
 }
\ No newline at end of file