Task - Styling done

src/components/TodoEditList.js

@@ -3,21 +3,23 @@ import UnarchiveIcon from '@mui/icons-material/Unarchive';
 
 function TodoEditList({task, updateTodo}) {
     const [value, setValue] = useState(task.task);
+    const [border, setBorder] = useState(false);
 
+    console.log(border);
     const handleSubmit = (e) => {
         e.preventDefault();
 
         //edit task fun from Todo Wrapper
         updateTodo(value, task.id);
     }
-
+// className={`${task.completed ? "line-through" : " "} capitalize`}
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} onClick={() => setBorder(!border)} className={`${border ? "border border-slate-500" : ""} p-2 flex items-center justify-between w-[100%] relative rounded-full`}>
     <input
         type="text"
         value={value}
         onChange={(e) => setValue(e.target.value)}
-        className="todo-input"
+        className="todo-input w-[100%] bg-transparent focus:outline-none"
 
         placeholder="Update your task here"
       />

src/components/TodoForm.js

@@ -15,14 +15,14 @@ function TodoForm({addTodo}) {
     }
   }
   return (
-    <form onSubmit={handleSubmit} className="w-[500px] relative">
+    <form onSubmit={handleSubmit} className="w-full max-w-md mx-auto relative px-4 sm:px-6">
       <div className="relative">
 
       <input
         type="text" 
         value={value}
         onChange={(e) => setValue(e.target.value)}
-        className="w-full p-4 rounded-full bg-slate-800 focus:outline-none"
+        className="w-full p-4 rounded-full bg-slate-800 focus:outline-none placeholder:text-gray-400 focus:text-gray-200"
 
         placeholder="Add today's task here"
       />

src/components/TodoList.js

@@ -1,21 +1,37 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import EditIcon from "@mui/icons-material/Edit";
 import CloseIcon from "@mui/icons-material/Close";
 
-
 function TodoList({ task, deleteTodo, toggleComplete, toggleEditable }) {
+
+  const [show, setShow] = useState(false);
+
+  console.log('Transition', show);
+  useEffect(() => {
+     // Delay to ensure the component has mounted before applying the transition
+     setTimeout(() => {
+      setShow(true);
+    }, 100);
+  }, [])
   return (
-    <div className="w-full p-3 text-white rounded-2xl flex items-center justify-between">
-      {/* if it's completed then LINE-THROUGH : REGULAR */}
+    <div className={` ${show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"} w-full p-3 text-white rounded-2xl flex items-center justify-between bg-slate-800 hover:bg-slate-700 transition-colors`}>
+      {/* If completed, then LINE-THROUGH : REGULAR */}
       <p
-        className={`${task.completed ? "line-through" : " "} capitalize`}
+        className={`${
+          task.completed ? "line-through" : ""
+        } capitalize cursor-pointer`}
         onClick={() => toggleComplete(task.id)}>
         {task.task}
       </p>
-      <div className="flex items-center justify-center gap-x-4">
-
-      <EditIcon onClick={() => toggleEditable(task.id)} />
-      <CloseIcon onClick={() => deleteTodo(task.id)} />
+      <div className="flex items-center gap-x-3">
+        <EditIcon
+          className="w-5 h-5 cursor-pointer hover:text-gray-300"
+          onClick={() => toggleEditable(task.id)}
+        />
+        <CloseIcon
+          className="w-5 h-5 cursor-pointer hover:text-gray-300"
+          onClick={() => deleteTodo(task.id)}
+        />
       </div>
     </div>
   );

src/components/TodoWrapper.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import TodoForm from "./TodoForm";
 import TodoList from "./TodoList";
 import { v4 as uuidv4 } from "uuid";
@@ -9,7 +9,25 @@ import Heading from "./Heading";
 function TodoWrapper() {
   const [todos, setTodos] = useState([]);
 
-  console.log(todos.length);
+
+  //Fetch todos from localstorage when compo mounts
+  useEffect(() => {
+    const fetchedTodos = JSON.parse(localStorage.getItem('todos'));
+
+    if(fetchedTodos){
+      console.log("from local", fetchedTodos)
+      setTodos(fetchedTodos);
+    }
+  }, [])
+
+  //Store Todos to localstorage whenever the todos state changes
+  useEffect(() => {
+    console.log("to local", todos)
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }, [todos]);
+
+
+  // console.log(todos.length);
 
   const addTodo = (todo) => {
     setTodos([
@@ -46,22 +64,23 @@ function TodoWrapper() {
         return todo.id !== id;
       })
     );
-    console.log(todos);
+    // console.log(todos);
   };
   //   console.log(todos);
   return (
-    <div className="mt-8 p-2 flex flex-col justify-center items-center gap-y-6 max-w-lg relative w-full">
+    <div className="mt-8 p-4 flex flex-col justify-center items-center gap-y-6 max-w-lg mx-auto w-full">
       <Heading />
       <TodoForm addTodo={addTodo} />
 
       {/* Rendering All todos */}
-
       {todos.length === 0 ? (
-        <div className="flex items-center justify-center h-full">
-          <p className="text-gray-400 text-2xl">No todos available</p>
+        <div className="flex items-center justify-center w-full">
+          <p className="text-gray-400 text-lg sm:text-2xl">
+            No todos available
+          </p>
         </div>
       ) : (
-        <div className="relative w-full bg-slate-800 text-white rounded-xl flex flex-col items-start justify-start max-h-96 overflow-y-auto custome-scroll">
+        <div className="relative w-full bg-slate-800 text-white rounded-xl flex flex-col items-start justify-start max-h-[60vh] sm:max-h-96 overflow-y-auto custom-scroll">
           {todos &&
             todos.map((todo) => {
               return todo.isEditing ? (
@@ -75,7 +94,6 @@ function TodoWrapper() {
                   toggleEditable={toggleEditable}
                 />
               );
-              //console.log(todo.task);
             })}
         </div>
       )}