Adding Time wise Filter Feauture in TO-DO LIST

TODO-LIST/src/App.css

@@ -118,4 +118,9 @@ input:focus{
   left:0;
   border-radius: 999px;
   transform: translateY(-10px) rotate(45deg);
+}
+
+.column{
+  display: 'flex';
+  flex-direction:'column';
 }

TODO-LIST/src/components/Todo.jsx

@@ -1,11 +1,20 @@
 import React from 'react'
 
-const Todo = ({ todo,deleteTodo,moveUp,moveDown,total,index}) => {
+const Todo = ({ todo,deleteTodo,moveUp,moveDown,total,index,createdAt}) => {
 
+    const formatDate = (dateString) => {
+        const date = new Date(dateString);
+        const options = { month: 'long', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit',second: '2-digit' };
+        return new Intl.DateTimeFormat('en-US', options).format(date);
+      };
+
     return (
         <div className='todo'>
-            <p className='text'>{todo.text}</p>
-                <div className='utils'>
+            <div className='column' >
+                <p className='text'>{todo.text}</p>
+                <p className='date' style={{fontFamily:'monospace',fontSize:'10px'}} >{formatDate(todo.createdAt)}</p>
+            </div>
+            <div className='utils'>
                 <div className='go-up' style={{borderBottomColor:index === 0 ? 'grey' : '#1DA1F2'}} onClick={() => moveUp(todo.id)}></div>
                 <div className='go-down' style={{borderTopColor:index === total - 1 ? 'grey' : '#1DA1F2'}} onClick={() => moveDown(todo.id)}></div>
                 <div className='remove'  onClick={() => deleteTodo(todo.id)}></div>

TODO-LIST/src/pages/Home.jsx

@@ -10,15 +10,23 @@ const getTodos = () => {
     return []
 }
 
+const getSort = () =>{
+    let sort=localStorage.getItem('sort');
+    return sort ? sort : true;
+}
+
 const Home = () => {
     const [todos, setTodos] = useState(getTodos())
     const [todo, setTodo] = useState('')
+    const [oldfirst, setOldfirst]= useState(getSort());
 
     const addTodo = (e) => {
-        e.preventDefault()
+        e.preventDefault();
+        const current = new Date();
+        const currentDateTime = current.toISOString();
         if (todo && todos.findIndex(t => t.text === todo) === -1) {
-            setTodos(prev => [...prev, {id:nanoid(),text:todo}])
-            setTodo('')
+            setTodos(prev => [...prev, { id: nanoid(), text: todo, createdAt: currentDateTime }]);
+            setTodo('');
         }
     }
 
@@ -45,6 +53,18 @@ const Home = () => {
             setTodos([...todos])
         }
     }
+
+    const handleDateSort = () => {
+        let sortedTodos = [...todos];
+        if (oldfirst) {
+            sortedTodos.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+        } else {
+            sortedTodos.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+        }
+        setTodos(sortedTodos);
+        setOldfirst(!oldfirst);
+        localStorage.setItem('sort',!oldfirst);
+    };
     useEffect(() => {
         localStorage.setItem('todos', JSON.stringify(todos))
     },[todos])
@@ -56,6 +76,7 @@ const Home = () => {
             <input type="text" placeholder='Add item...' value={todo} onChange={(e) => setTodo(e.target.value)}/>
             <input type='button' onClick={addTodo} className='btn-addTodo' value='Add' />
           </form>
+          <div style={{width:'300px',fontWeight:700}} className='btn-addTodo' onClick={handleDateSort} >{oldfirst ?'Oldest To Newest' : 'Newest To Oldest'}</div>
           {
                 todos.length? (
             <div className='todo-list'>