done

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

src/App.css

@@ -25,7 +25,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #151b25;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/App.js

@@ -1,11 +1,13 @@
 import "./App.css";
+import TodoList from "./components/TodoList";
 // TODO: Import the todoData and pass it as a prop to the TodoList component
+import todoData from "./todoData";
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        {/* Call the TodoList Component Here */}
+        <TodoList todoData={todoData}/>
       </header>
     </div>
   );

src/components/ToDoItem.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { useState } from "react";
+export const ToDoItem = ({ todo, handleDelete, handleEdit }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedTitle, setEditedTitle] = useState(todo.title);
+
+  const handleChange = (event) => {
+    setEditedTitle(event.target.value);
+  };
+  const handleIsEditing = () => {
+    setIsEditing(!isEditing);
+  };
+
+  return (
+    <div className="flex items-center gap-5 py-2">
+      <button
+        style={{ backgroundColor: "#E10032" }}
+        className="text-white  px-2 rounded-lg"
+        onClick={() => handleDelete(todo.id)}
+      >
+        Delete
+      </button>
+      <button onClick={handleIsEditing}>
+        {isEditing ? (
+          <button
+            style={{ backgroundColor: "#DBE8E1", color: "#151B25" }}
+            className="text-white  px-2 rounded-lg"
+            onClick={() => handleEdit(todo.id, editedTitle)}
+          >
+            save
+          </button>
+        ) : (
+          <button
+            style={{ backgroundColor: "#DBE8E1", color: "#151B25" }}
+            className=" px-2 rounded-lg"
+          >
+            Edit
+          </button>
+        )}
+      </button>
+      {isEditing ? (
+        <input className="text-black" onChange={handleChange} type="text" />
+      ) : (
+        <p>{todo.title}</p>
+      )}
+    </div>
+  );
+};

src/components/TodoList.js

@@ -0,0 +1,120 @@
+import React from "react";
+import { useState, useEffect, useRef } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { ToDoItem } from "./ToDoItem";
+
+function TodoList({ todoData }) {
+  const [todoList, setTodoList] = useState(todoData);
+  const [newTodo, setNewTodo] = useState("");
+  const [error, setError] = useState("");
+  const [filtered, setFiltered] = useState([]);
+  // Create
+  const handleTextChange = (event) => {
+    setNewTodo(event.target.value);
+  };
+  const clear = useRef();
+  const handleTodoCreate = () => {
+    let errors = "";
+    if (!newTodo.trim()) {
+      errors = "write something";
+    } else if (/\d+/.test(newTodo)) {
+      errors = "must not contain numbers";
+    } else if (/\W+/.test(newTodo)) {
+      errors = "must not contain symbols";
+    } else {
+      const newTodoObj = {
+        id: uuidv4(),
+        title: newTodo,
+        done: false,
+      };
+      // Update the array to add the new item
+      setTodoList([...todoList, newTodoObj]);
+    }
+    setError(errors);
+    if (errors.length === 0) {
+      clear.current.value = "";
+    }
+  };
+
+  // Delete
+  const handleDelete = (todoId) => {
+    setTodoList(todoList.filter((todo) => todo.id !== todoId));
+  };
+
+  // Edit
+  const handleEdit = (todoId, editedTitle) => {
+    setTodoList(
+      todoList.map((todo) => {
+        return todo.id === todoId ? { ...todo, title: editedTitle } : todo;
+      })
+    );
+  };
+
+  // Search
+  useEffect(() => {
+    setFiltered(todoList);
+  }, [todoList]);
+  const handleSearch = (e) => {
+    const filter = todoList.filter((todo) =>
+      todo.title.toLowerCase().includes(e.target.value)
+    );
+    setFiltered(filter);
+  };
+
+  return (
+    <div>
+      <div id="search" className="flex flex-col pb-7 items-center px-16">
+        <input
+          style={{ backgroundColor: "#DBE8E1" }}
+          type="text"
+          className="text-black rounded-lg px-2 py-1"
+          placeholder="Search"
+          onInput={handleSearch}
+        />
+      </div>
+      <div
+        style={{ backgroundColor: "#034687" }}
+        className=" p-5 rounded-lg flex justify-center flex-col"
+      >
+        {filtered.map((todo) => (
+          <ToDoItem
+            todo={todo}
+            handleDelete={handleDelete}
+            handleEdit={handleEdit}
+          />
+        ))}
+      </div>
+      <div id="Add" className="pt-7 flex justify-center gap-14">
+        <div className="flex flex-col ">
+          <input
+            ref={clear}
+            type="text"
+            style={{ backgroundColor: "#DBE8E1" }}
+            className="text-black rounded-lg px-2 py-1"
+            placeholder="Enter your Data"
+            onChange={handleTextChange}
+          />
+          {error && (
+            <span
+              style={{ color: "#E10032" }}
+              className=" text-sm text-left pl-2"
+            >
+              {error}
+            </span>
+          )}
+        </div>
+        <div>
+          <button
+            style={{ backgroundColor: "#034687" }}
+            className=" px-2 py-1 rounded-lg"
+            onClick={handleTodoCreate}
+          >
+            Add
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TodoList;

src/index.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+