Updated

src/components/AddTodo.jsx

@@ -11,6 +11,7 @@ function AddTodo() {
   );
   const [todoName, settodoName] = useState("");
   const [todoDate, settodoDate] = useState("");
+  const [todoEditID, settodoEditID] = useState(false);
 
   const CompletedTodo = (id) => {
     settodoList(
@@ -23,14 +24,37 @@ function AddTodo() {
     );
   };
 
+  useEffect(() => {
+    localStorage.setItem("todoList", JSON.stringify(todoList));
+  }, [todoList]);
+
   const DeleteTodo = (id) => {
     settodoList(todoList.filter((todo) => todo.id !== id));
   };
 
-  useEffect(() => {
-    localStorage.setItem("todoList", JSON.stringify(todoList));
-  }, [todoList]);
+  const EditTodo = (id) => {
+    const editedTodo = todoList.find((todo) => todo.id === id);
+
+    settodoEditID(editedTodo.id);
+
+    if (editedTodo) {
+      settodoName(editedTodo.name);
+      settodoDate(editedTodo.date);
+    }
+  };
+  const UpdateTodo = () => {
+    const updatedTodoList = todoList.map((todo) => {
+      if (todo.id === todoEditID) {
+        return { ...todo, name: todoName, date: todoDate };
+      }
+      return todo;
+    });
+    settodoEditID(false);
+    settodoList(updatedTodoList);
 
+    settodoName("");
+    settodoDate("");
+  };
   function addTodo() {
     if (todoName && todoDate) {
       const newTodo = [
@@ -69,20 +93,28 @@ function AddTodo() {
             value={todoDate}
             onChange={handletodoChange}
             className="form-control"
+            placeholder="Enter Todo Date "
             aria-label="Todo-Date"
           />
         </div>
         <div className="Add__Todo_Btn">
-          <button onClick={addTodo} type="button" id="Addtodo">
-            Add
-          </button>
+          {todoEditID ? (
+            <button onClick={UpdateTodo} type="button" id="Edittodo">
+              Update
+            </button>
+          ) : (
+            <button onClick={addTodo} type="button" id="Addtodo">
+              Add
+            </button>
+          )}
         </div>
       </div>
       {todoList.length > 0 ? (
         <TodoItems
           todoitems={todoList}
           CompletedTodo={CompletedTodo}
           DeleteTodo={DeleteTodo}
+          EditTodo={EditTodo}
         />
       ) : (
         <center style={{ color: "red", fontSize: "1rem" }}>

src/components/TodoItem.jsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from "react";
+import { MdOutlineDeleteOutline } from "react-icons/md";
+import { FaEdit } from "react-icons/fa";
 
 const TodoItem = ({
   todoName,
@@ -7,6 +9,7 @@ const TodoItem = ({
   CompletedTodoID,
   id,
   DeleteTodoID,
+  EditTodoID,
 }) => {
   const [isChecked, setIsChecked] = useState(iscompleted);
   useEffect(() => {
@@ -21,6 +24,9 @@ const TodoItem = ({
   const deleteTodo = () => {
     DeleteTodoID(id);
   };
+  const editTodo = () => {
+    EditTodoID(id);
+  };
 
   return (
     <>
@@ -42,9 +48,14 @@ const TodoItem = ({
             <p className="todo-date">Date: {todoDate}</p>
           </div>
         </div>
-        <button type="button" className="Delete__Btn" onClick={deleteTodo}>
-          Delete
-        </button>
+        <div className="Edit__Delete__Btns">
+          <button type="button" className="Edit__Btn" onClick={editTodo}>
+            <FaEdit />
+          </button>
+          <button type="button" className="Delete__Btn" onClick={deleteTodo}>
+            <MdOutlineDeleteOutline />
+          </button>
+        </div>
       </div>
     </>
   );

src/components/TodoItems.jsx

@@ -1,12 +1,15 @@
 import TodoItem from "./TodoItem.jsx";
 
-const TodoItems = ({ todoitems, CompletedTodo, DeleteTodo }) => {
+const TodoItems = ({ todoitems, CompletedTodo, DeleteTodo, EditTodo }) => {
   const CompletedTodoID = (id) => {
     CompletedTodo(id);
   };
   const DeleteTodoID = (id) => {
     DeleteTodo(id);
   };
+  const EditTodoID = (id) => {
+    EditTodo(id);
+  };
   return (
     <>
       <div className="Todo__Items">
@@ -18,6 +21,7 @@ const TodoItems = ({ todoitems, CompletedTodo, DeleteTodo }) => {
             iscompleted={todo.iscompleted}
             CompletedTodoID={CompletedTodoID}
             DeleteTodoID={DeleteTodoID}
+            EditTodoID={EditTodoID}
             id={todo.id}
           />
         ))}

src/index.css

@@ -8,20 +8,20 @@
 }
 body {
   font-family: "Poppins", sans-serif;
-  
-  &.light-theme{
+
+  &.light-theme {
     background: white;
     color: black;
   }
-  &.dark-theme{
+  &.dark-theme {
     background: black;
     color: white;
   }
 }
 
 .container {
   padding: 1%;
-  .header{
+  .header {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -61,21 +61,30 @@ body {
       background: linear-gradient(45deg, #03fcbf, #33ff43);
       color: black;
     }
-    button:active{
-      box-shadow: inset 0 0 5px #052f09,0 0 20px #33ff43;
+    button:active {
+      box-shadow: inset 0 0 5px #052f09, 0 0 20px #33ff43;
     }
   }
   .Todo__Items {
     width: 100%;
     /* background: linear-gradient(45deg, #c514ed, #00d8ff); */
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid black;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: 10px;
+    position: relative;
+    padding: 20px;
+    overflow: hidden;
+    border-radius: 18px;
+    transition: 2s ease-out;
+    z-index: 10;
+    background: #232323;
+    outline: 5px solid black;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 3px;
+      border-radius: 15px;
+      background: black;
+      z-index: -2;
+    }
 
     .Todo__Item__Container {
       display: flex;
@@ -84,17 +93,17 @@ body {
       width: 100%;
       padding: 1%;
       border-radius: 5px;
-      border: 1px solid black;
-      background: #3F51B5;
+      border: 2px solid black;
+      background: #3f51b5;
       color: white;
-      box-shadow: 0 0 10px #3F51B5;
+      box-shadow: 0 0 10px #3f51b5;
 
       .Todo__And__CheckBox {
         display: flex;
         justify-content: left;
         align-items: center;
         width: 80%;
-        div{
+        div {
           overflow: auto;
           white-space: normal;
           word-wrap: break-word;
@@ -108,6 +117,12 @@ body {
           cursor: pointer;
         }
       }
+      .Edit__Delete__Btns {
+        display: flex;
+        .Edit__Btn {
+          background: #2196f3;
+        }
+      }
       &.completed {
         background: #3cdf43;
         color: black;
@@ -119,6 +134,14 @@ body {
     }
   }
 }
+@keyframes Rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 button {
   cursor: pointer;
   padding: 8px 22px;
@@ -131,12 +154,26 @@ button {
   transition: 0.1s all ease;
   &:active {
     transform: scale(0.9);
-    box-shadow: inset 0 0 5px #ff2a2a,0 0 20px #ff2d55;
+    box-shadow: inset 0 0 5px #ff2a2a, 0 0 20px #ff2d55;
   }
 }
 @media screen and (max-width: 425px) {
   .container {
+    & .Todo__Items {
+      padding: 15px;
+      & .Todo__Item__Container {
+        & .Todo__And__CheckBox {
+          input[type="checkbox"] {
+            width: 15px;
+            height: 15px;
+          }
+        }
+      }
+    }
     & .Add__Todo {
+      button {
+        padding: 5px;
+      }
       .Todo__Inputs {
         flex-direction: column;
         gap: 10px;
@@ -146,8 +183,9 @@ button {
       }
     }
   }
+
   button {
-    padding: 5px;
+    padding: 2px 6px;
     font-size: 1rem;
   }
 }