style changed

src/component/TodoForm.jsx → src/component/TodoForm/TodoForm.jsx

 import React from "react";
-import styles from "../styles/TodoForm.module.css";
+import styles from "./TodoForm.module.css";
 
 const TodoForm = ({ input, error, handleInputChange, handleSubmit }) => {
   return (
-    <div>
+   
       <form className={styles.form} onSubmit={handleSubmit}>
         <div className={styles['input-wrapper']}>
         <input
@@ -17,7 +17,7 @@ const TodoForm = ({ input, error, handleInputChange, handleSubmit }) => {
           </div>
         <button type="submit" className={styles.button}>Submit</button>
       </form>
-    </div>
+    
   );
 };
 

src/Styles/TodoForm.module.css → src/component/TodoForm/TodoForm.module.css

@@ -3,6 +3,9 @@
   flex-wrap: wrap;
   gap: 15px;
   padding:  1rem;
+  position: sticky;
+  bottom: 0;
+  background-color:white
 }
 
 .input-wrapper {

src/component/TodoItem.jsx → src/component/TodoItem/TodoItem.jsx

 import React, { useState, useEffect } from "react";
 import { TiDelete } from "react-icons/ti";
-import styles from "../styles/TodoItem.module.css";
+import styles from "./TodoItem.module.css";
 
 const TodoItem = ({ item, handleToggleComplete, handleUpdate, handleDelete, error }) => {
   const [showConfirm, setShowConfirm] = useState(false);

src/Styles/TodoItem.module.css → src/component/TodoItem/TodoItem.module.css

@@ -83,6 +83,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1000;
 }
 
 .modal {
@@ -91,7 +92,9 @@
   border-radius: 8px;
   text-align: center;
   max-width: auto;
-  margin:0 20px
+  margin:0 20px;
+  position: relative;
+  z-index: 1001;
 }
 
 .modalButtons {

src/component/TodoList.jsx → src/component/TodoList/TodoList.jsx

 import React from "react";
-import TodoItem from "./TodoItem";
-import styles from "../Styles/TodoList.module.css";
+import TodoItem from "../TodoItem/TodoItem";
+import styles from "./TodoList.module.css";
 
 const TodoList = ({ todos, handleToggleComplete, handleUpdate, handleDelete, updateErrors }) => (
   <ul className={styles.task}>

src/Styles/TodoList.module.css → src/component/TodoList/TodoList.module.css

@@ -2,7 +2,5 @@
 ul {
   margin: 0;
   padding: 0;
-  max-height: 84vh;
-  overflow-y: auto;
-  scroll-behavior: smooth;
+  /* max-height: 84vh;  */
 }

src/db.json

 {
   "todos": [
     {
-      "id": "f87f",
-      "text": "vjbdcbdxcvfdvdvfvfxvfrgrv",
+      "id": "4a27",
+      "text": "Buy Groceries tommorrow",
       "completed": false
     },
     {
-      "id": "ed2b",
-      "text": " bbbzdfbdfff",
+      "id": "1aa1",
+      "text": "Travel to head office",
       "completed": false
     },
     {
-      "id": "d7e7",
-      "text": "sdfgdsfg",
+      "id": "274c",
+      "text": "hsdfds",
       "completed": false
     },
     {
-      "id": "2ccd",
-      "text": "dfhgfhdfh",
+      "id": "e40e",
+      "text": "rege",
       "completed": false
     },
     {
-      "id": "9b94",
-      "text": "dfghdfgh",
+      "id": "a146",
+      "text": "gergr",
+      "completed": false
+    },
+    {
+      "id": "4dc6",
+      "text": "cbvcbv",
+      "completed": false
+    },
+    {
+      "id": "c6d8",
+      "text": "ngnn",
+      "completed": false
+    },
+    {
+      "id": "6838",
+      "text": "gnfgn",
+      "completed": false
+    },
+    {
+      "id": "fe38",
+      "text": "gngfn",
+      "completed": false
+    },
+    {
+      "id": "02d1",
+      "text": "ngfng",
+      "completed": false
+    },
+    {
+      "id": "78c1",
+      "text": "gngfn",
+      "completed": false
+    },
+    {
+      "id": "7a0c",
+      "text": "gngfn",
+      "completed": false
+    },
+    {
+      "id": "0698",
+      "text": "gngn",
+      "completed": false
+    },
+    {
+      "id": "81af",
+      "text": "fgnfgn",
+      "completed": false
+    },
+    {
+      "id": "9219",
+      "text": "gngn",
+      "completed": false
+    },
+    {
+      "id": "24d0",
+      "text": "gngn",
+      "completed": false
+    },
+    {
+      "id": "8053",
+      "text": "ngn",
       "completed": false
     }
   ]

src/pages/Todo.jsx

 import React, { useEffect, useState } from "react";
 import {getTodos,addTodo,deleteTodo,updateTodo} from "../api/todo"; 
-import TodoList from "../component/TodoList";
-import TodoForm from "../component/TodoForm";
-import styles from "../Styles/Todo.module.css";
+import TodoList from "../component/TodoList/TodoList.jsx";
+import TodoForm from "../component/TodoForm/TodoForm.jsx";
+import styles from "./Todo.module.css";
 
 function Todo() {
   const [todos, setTodos] = useState([]);
@@ -83,9 +83,12 @@ const handleSubmit = async (e) => {
   return (
     <div className={styles.wrapper}>
     <div className={styles.container}>
+      <div className={styles.wrap}>
         <h1 className={styles.title}>
         You have {todos.length} {todos.length === 1 ? "Todo" : "Todos"}
       </h1>
+      </div>
+      
       {todos.length === 0 ? (
         <p className={styles.message}>No task</p>
       ) : (

src/Styles/Todo.module.css → src/pages/Todo.module.css

@@ -9,8 +9,12 @@
     background-size: 10px 10px;
    
   }
+  .wrap{
+    position: sticky;
+    top:0;
+  }
   .wrapper {
-    height: 100vh;
+   min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -34,6 +38,9 @@
   font-family: system-ui;
   padding: 1rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  background-color:white;
 }
 
 .message {