my new commit

src/App.css

-*{
-    margin: 0;
-    padding: 0;
-}
-body{
-    background-color: #f5f5f5;
-    background-image: radial-gradient(#ccc 0.5px, transparent 1px);
-    background-size: 10px 10px;
-}
-
-.container{
-    max-width: 550px;
-    width: 90%;
-    margin: 200px auto;
-    background: #fff;
-    /*border: 2px solid #ddd;*/
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    position: relative;
-}
-
-h1{
-    font-size: 1.4rem;
-    text-align:center;
-    font-weight: bold;
-    font-family: system-ui;
-    padding: 1rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-   
-}
-p{
-    text-align: center;
-    padding:3rem;
-    font-size: 20px;
-    font-family: sans-serif;
-}
-.task ul{
-    margin: 0;
-    padding: 0;
-  
-}
-ul{
-    max-height: 250px;
-    overflow-y: auto;
-}
-.list{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-top: 0.5px solid rgb(170, 156, 156);
-    padding:7px 4px ;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 17px;
-    font-weight: 400;
-    list-style: none;
-    color: rgb(94, 93, 93);
-   
-}
-.todo-content{
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 17px;
-    font-weight: 400;
-    color: rgb(94, 93, 93);
-
-}
-.todo-content:focus{
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-}
-.list button{
-    background: none;
-    border: none;
-    cursor: pointer;
-   
-}
-
-.list:first-child{
-    border-top: none;
-    
-}
-.list input[type="checkbox"]{
-    height: 18px;
-    min-width: 36px;
-
-}
-.list span{
-    flex-grow: 1;
-}
-form{
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: space-evenly;
-    padding:7px;
-    padding-bottom: 15px;
-}
-form input [type="text"] {
-    flex:1;
-    
-}
-input::placeholder{
-    font-size: 15px;
-}
-.formtext{
-    border-radius:3px;
-    border: 1px solid #dbd8d8;
-    box-shadow: inset 0 0 4px rgba(93, 81, 81, 0.2), 0 0 4px rgba(233, 228, 228, 0.1);
-    height: 33px;
-    width: 100%;
-    max-width:400px;
-    font-size: 17px;
-    padding: 4px;
-    padding-left: 10px;
-
-}
-
-.formtext:focus{
-    outline: none;
-    border: none;
-}
-
-form button{
-    border: 1px solid #ccc;
-    border-radius: 4px ;
-    background: #fff;
-    cursor: pointer;
-    color: #333;
-    padding: 8px;
-    font-size: 15px;
-    width: 90px;
-    height: 42px;
-}
-
-.deletebutton{
-    height: 45px;
-    min-width: 30px;
-    padding-right: 20px;
-    cursor: pointer;
-    color: #ccc;
-}
-
-.editable-text:focus {
-    outline: none;
-    border: none;
-  }
-  .error{
-    color: red;
-  font-size: 0.9rem;
-  display: block;
-  margin-top: 40px; 
-  width:450rem;
-  margin-right: auto;
-}
-.content{
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.input-error::placeholder{
-    color: red;
-}
-
-  @media (max-width: 600px) {
-    .formtext {
-      max-width: 40rem;
-      font-size: 16px;
-      height: 2rem;
-      max-width: 30rem;
-    }
-  
-    form button {
-    /* min-width: 93%;*/
-      max-width: 40rem;
-      width: 100%;
-      font-size: 16px;
-      height:2.5rem;
-    }
-  
-    .list {
-      display: flex;
-      flex-direction: row;
-    }
-  
-    .deletebutton {
-      margin-top: 5px;
-      align-self: flex-end;
-      padding: 4px;
-    }
-  }
-  
\ No newline at end of file

src/App.jsx

 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import { TiDelete } from "react-icons/ti";
-import "../src/App.css";
+import TodoList from "../src/component/TodoList";
+import TodoForm from "../src/component/TodoForm";
+import "./styles/App.css";
 
 const URL = "http://192.168.1.59:3000/todos";
 
 function App() {
   const [todo, setTodo] = useState([]);
   const [input, setInput] = useState("");
-  const[updateErrors,setUpdateErrors]=useState({});
-  const[error,setError]=useState("")
+  const [error, setError] = useState("");
+  const [updateErrors, setUpdateErrors] = useState({});
+
   useEffect(() => {
     axios.get(URL).then((res) => setTodo(res.data));
   }, []);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (input.trim() === ""){
-      setError("Please enter this field");
+    if (input.trim() === "") {
+      setError("Please fill this field");
       setTimeout(() => setError(""), 3000);
       return;
     }
-    setError("");
-    const newTodo = { text: input, completed: false };
-    const res = await axios.post(URL, newTodo);
-    setTodo([...todo, res.data]);
-    setInput("");
-    console.log(res.data)
+      const newTodo = { text: input, completed: false };
+      const res = await axios.post(URL, newTodo);
+      setTodo([...todo, res.data]);
+      setInput("");
   };
 
   const handleDelete = async (id) => {
@@ -69,60 +69,11 @@ function App() {
   return (
     <div className="container">
       <h1>You have {todo.length} {todo.length === 1 ? "Todo" : "Todos"}</h1>
-    
-
-      {todo.length === 0 ? (
-        <p>No task</p>
-      ) : (
-        <ul className="task">
-          {todo.map((item) => (
-            <li key={item.id} className="list">
-              <input
-                type="checkbox"
-                checked={item.completed}
-                onChange={() => handleToggleComplete(item.id, !item.completed)}
-              />
-            <input type="text" value={item.text} className="todo-content"   style={{width:"100%",border:"none",textDecoration: item.completed ? "line-through" : "none"}} onChange={(e)=>{
-              handleUpdate(item.id,e.target.value);
-            }}/>
-          {updateErrors[item.id] && (
-          <div className="error">
-            {updateErrors[item.id]}
-          </div>
-        )}
-       
-              {/* <span
-                style={{ textDecoration: item.completed ? "line-through" : "none" }}
-                className="editable-text"
-                contentEditable
-                suppressContentEditableWarning={true}
-                onBlur={(e) => handleUpdate(item.id, e.target.textContent)}
-              >
-                {item.text}
-              </span> */}
-              <button>
-              <TiDelete 
-                className="deletebutton"
-                onClick={() => handleDelete(item.id)}
-              />
-              </button>
-            </li>
-          ))}
-        </ul>
+      {todo.length === 0 ? <p>No task</p> : (
+        <TodoList todos={todo} handleToggleComplete={handleToggleComplete} handleUpdate={handleUpdate} handleDelete={handleDelete} updateErrors={updateErrors}
+        />
       )}
-
-      <form onSubmit={handleSubmit}>
-      <input
-             type="text"
-             value={input}
-             className="formtext"
-              placeholder={error ? error : "Enter Item"}
-            onChange={(e) => setInput(e.target.value)}
-            style={{ border: error ? "1px solid red" : undefined }}
-/>
-
-        <button type="submit" >Submit</button>
-      </form>
+      <TodoForm input={input} error={error} setInput={setInput} handleSubmit={handleSubmit}/>
     </div>
   );
 }

src/Styles/App.css

+* {
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    background-color: #f5f5f5;
+    background-image: radial-gradient(#ccc 0.5px, transparent 1px);
+    background-size: 10px 10px;
+  }
+  
+  .container {
+    max-width: 34.375rem;
+    width: 90%;
+    margin: 200px auto;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    position: relative;
+  }
+  
+  h1 {
+    font-size: 1.4rem;
+    text-align: center;
+    font-weight: bold;
+    font-family: system-ui;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  p {
+    text-align: center;
+    padding: 3rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+    font-family: system-ui;
+  }
+  
+  @media (max-width: 600px) {
+    .formtext {
+      font-size: 16px;
+      height: 2rem;
+      max-width: 30rem;
+    }
+  
+    form button {
+      width: 100%;
+      font-size: 1rem;
+      height: 2.5rem;
+    }
+  
+    .list {
+      flex-direction: row;
+    }
+  
+    .deletebutton {
+      margin-top: 0.313rem;
+      align-self: flex-end;
+      padding: 0.25rem;
+    }
+  }
\ No newline at end of file

src/Styles/TodoForm.css

+form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: space-evenly;
+    padding: 0.438rem;
+    padding-bottom: 0.938rem;
+    padding-top: 15px;
+  }
+  
+  form input[type="text"] {
+    flex: 1;
+  }
+  
+  input::placeholder {
+    font-size: 0.938rem;
+  }
+  
+  .formtext {
+    border-radius: 3px;
+    border: 1px solid #dbd8d8;
+    box-shadow: inset 0 0 4px rgba(93, 81, 81, 0.2), 0 0 4px rgba(233, 228, 228, 0.1);
+    height: 2.063rem;
+    width: 100%;
+    max-width: 25rem;
+    font-size: 1.063rem;
+    padding: 4px 10px;
+    transition: all 0.3s ease;
+  }
+  
+  .formtext:focus {
+    outline: none;
+    border: 1px solid #007BFF;
+  }
+  
+  .input-error::placeholder {
+    color: red;
+  }
+  
+  form button {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #fff;
+    cursor: pointer;
+    color: #333;
+    padding: 8px;
+    font-size: 0.938rem;
+    width: 5.625rem;
+    height: 2.625rem;
+    /* transition: all 0.3s ease; */
+  }
+  
\ No newline at end of file

src/Styles/TodoItem.css

+.list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 0.5px solid rgb(170, 156, 156);
+    padding: 7px 4px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1.063rem;
+    font-weight: 400;
+    list-style: none;
+    color: rgb(94, 93, 93);
+  }
+  
+  .todo-content {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1.063rem;
+    font-weight: 400;
+    color: rgb(94, 93, 93);
+    width: 100%;
+    border: none;
+    text-decoration: none;
+  }
+  
+  .todo-content.completed {
+    text-decoration: line-through;
+    color: #aaa;
+  }
+  
+  .todo-content:focus {
+    outline: none;
+    box-shadow: none !important;
+  }
+  
+  .list:first-child {
+    border-top: none;
+  }
+  
+  .list input[type="checkbox"] {
+    height: 1.125rem;
+    min-width: 2.25rem;
+  }
+  
+  .list button {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .deletebutton {
+    height: 2.813rem;
+    min-width: 1.875rem;
+    padding-right: 20px;
+    cursor: pointer;
+    color: #999;
+    transition: color 0.2s ease;
+  }
+  
+  .deletebutton:hover {
+    color: #e74c3c;
+  }
+  
+  .error {
+    color: red;
+    font-size: 0.9rem;
+    display: block;
+    margin-top: 2rem;
+    margin-right:auto;
+    width: 450rem;
+  }
+  
\ No newline at end of file

src/Styles/TodoList.css

+.task ul,
+ul {
+  margin: 0;
+  padding: 0;
+  max-height: 15.625rem;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}

src/component/TodoForm.jsx

+import React from "react";
+import "../styles/TodoForm.css";
+
+const TodoForm = ({ input, error, setInput, handleSubmit }) => (
+  <form onSubmit={handleSubmit}>
+    {/* {error && <div className="error">{error}</div>} */}
+    <input
+      type="text"
+      value={input}
+      className={`formtext ${error ? "input-error" : ""}`}
+      placeholder={error ? error : "Enter Item"}
+      onChange={(e) => setInput(e.target.value)}
+      style={{ border: error ? "1px solid red" : undefined }}
+    />
+    <button type="submit">Submit</button>
+  </form>
+);
+
+export default TodoForm;

src/component/TodoItem.jsx

+import React from "react";
+import { TiDelete } from "react-icons/ti";
+import "../styles/TodoItem.css";
+
+const TodoItem = ({ item, handleToggleComplete, handleUpdate, handleDelete, error }) => (
+  <li className="list">
+    <input
+      type="checkbox"
+      checked={item.completed}
+      onChange={() => handleToggleComplete(item.id, !item.completed)}
+    />
+    <input
+      type="text"
+      value={item.text}
+      className={`todo-content ${item.completed ? "completed" : ""}`}
+      onChange={(e) => handleUpdate(item.id, e.target.value)}
+    />
+    {error && <div className="error">{error}</div>}
+    <button onClick={() => handleDelete(item.id)}>
+      <TiDelete className="deletebutton" />
+    </button>
+  </li>
+);
+
+export default TodoItem;

src/component/TodoList.jsx

+import React from "react";
+import TodoItem from "./TodoItem";
+import "../styles/TodoList.css";
+
+const TodoList = ({ todos, handleToggleComplete, handleUpdate, handleDelete, updateErrors }) => (
+  <ul className="task">
+    {todos.map((item) => (
+      <TodoItem key={item.id} item={item} handleToggleComplete={handleToggleComplete} handleUpdate={handleUpdate} handleDelete={handleDelete} error={updateErrors[item.id]}
+      />
+    ))}
+  </ul>
+);
+
+export default TodoList;

src/db.json

 {
   "todos": [
     {
-      "id": "b924",
-      "text": "Buy Groceries tomorrow",
+      "id": "9a22",
+      "text": "Buy Groceries Tomorrow",
       "completed": false
     },
     {
-      "id": "9166",
-      "text": "Travel to Head office",
+      "id": "58ea",
+      "text": "Travel to Head Office",
       "completed": false
     },
     {
-      "id": "d7f1",
-      "text": "Get Phone from the repair shop",
+      "id": "d446",
+      "text": "Get the phone from the repair shop",
       "completed": false
     }
   ]