my commit

src/App.css

@@ -37,6 +37,11 @@ p{
 .task ul{
     margin: 0;
     padding: 0;
+  
+}
+ul{
+    max-height: 250px;
+    overflow-y: auto;
 }
 .list{
     display: flex;
@@ -51,7 +56,18 @@ p{
     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;
@@ -66,6 +82,7 @@ p{
 .list input[type="checkbox"]{
     height: 18px;
     min-width: 36px;
+
 }
 .list span{
     flex-grow: 1;
@@ -97,6 +114,7 @@ input::placeholder{
     padding-left: 10px;
 
 }
+
 .formtext:focus{
     outline: none;
     border: none;
@@ -111,8 +129,9 @@ form button{
     padding: 8px;
     font-size: 15px;
     width: 90px;
-    height: 43px;
+    height: 42px;
 }
+
 .deletebutton{
     height: 45px;
     min-width: 30px;
@@ -125,10 +144,23 @@ form button{
     outline: none;
     border: none;
   }
-  span{
-    max-width:85%;
-    margin-left: auto;
-  }
+  .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;

src/App.jsx

@@ -3,47 +3,63 @@ import axios from "axios";
 import { TiDelete } from "react-icons/ti";
 import "../src/App.css";
 
-const API_URL = "http://192.168.1.59:3000/todos";
+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("")
   useEffect(() => {
-    axios.get(API_URL).then((res) => setTodo(res.data));
+    axios.get(URL).then((res) => setTodo(res.data));
   }, []);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (input.trim() === "") return;
-
+    if (input.trim() === ""){
+      setError("Please enter this field");
+      setTimeout(() => setError(""), 3000);
+      return;
+    }
+    setError("");
     const newTodo = { text: input, completed: false };
-    const res = await axios.post(API_URL, newTodo);
+    const res = await axios.post(URL, newTodo);
     setTodo([...todo, res.data]);
     setInput("");
+    console.log(res.data)
   };
 
   const handleDelete = async (id) => {
-    await axios.delete(`${API_URL}/${id}`);
+    await axios.delete(`${URL}/${id}`);
     setTodo(todo.filter((item) => item.id !== id));
   };
 
   const handleUpdate = async (id, updatedText) => {
+
     const updatedTodo = todo.find((item) => item.id === id);
+    if (!updatedTodo) return;
+  
     const newTodo = { ...updatedTodo, text: updatedText };
-    await axios.put(`${API_URL}/${id}`, newTodo);
-
+    await axios.put(`${URL}/${id}`, newTodo);
+  
     setTodo(todo.map((item) =>
       item.id === id ? { ...item, text: updatedText } : item
     ));
+    if (updatedText === '') {
+      setUpdateErrors((prev) => ({ ...prev, [id]: "Todo cannot be empty" }));
+      return;
+    } 
+  
+    setUpdateErrors((prev) => ({ ...prev, [id]: null }));
   };
+  
 
   const handleToggleComplete = async (id, completed) => {
     const updatedTodo = todo.find((item) => item.id === id);
     if (!updatedTodo) return;
 
     const newTodo = { ...updatedTodo, completed };
-    await axios.put(`${API_URL}/${id}`, newTodo);
+    await axios.put(`${URL}/${id}`, newTodo);
 
     setTodo(todo.map((item) =>
       item.id === id ? { ...item, completed } : item
@@ -66,7 +82,16 @@ function App() {
                 checked={item.completed}
                 onChange={() => handleToggleComplete(item.id, !item.completed)}
               />
-              <span
+            <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
@@ -74,7 +99,7 @@ function App() {
                 onBlur={(e) => handleUpdate(item.id, e.target.textContent)}
               >
                 {item.text}
-              </span>
+              </span> */}
               <button>
               <TiDelete 
                 className="deletebutton"
@@ -87,14 +112,16 @@ function App() {
       )}
 
       <form onSubmit={handleSubmit}>
-        <input
-          type="text"
-          value={input}
-          className="formtext"
-          placeholder="Enter Item"
-          onChange={(e) => setInput(e.target.value)}
-        />
-        <button type="submit">Submit</button>
+      <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>
     </div>
   );

src/db.json

 {
   "todos": [
     {
-      "id": "e05e",
-      "text": "Buy Groceries Tomorrowsdfgfdsdfgsdfgsdfgsdf  gsdfgsdfgsdfgsdfgsdfgsdfgsdfgdfg sdfgsdfgsdfgsd fgsdfgsdfgsdfgsdfgsdfsfdfdgsfdg  fsdfgsdfgsdfgsdfgsdfgdsg",
+      "id": "b924",
+      "text": "Buy Groceries tomorrow",
       "completed": false
     },
     {
-      "id": "54ef",
-      "text": "Travel to Head Office",
+      "id": "9166",
+      "text": "Travel to Head office",
+      "completed": false
+    },
+    {
+      "id": "d7f1",
+      "text": "Get Phone from the repair shop",
       "completed": false
     }
   ]