todolist

package.json

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

src/App.css

@@ -25,7 +25,12 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background: #E8CBC0;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #636FA4, #E8CBC0);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #636FA4, #E8CBC0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+
+  width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/App.js

@@ -1,11 +1,13 @@
 import "./App.css";
+import TodoList from "./assets/componets/Todo";
 // 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/assets/componets/Todo.js

@@ -0,0 +1,73 @@
+import { useState } from "react";
+
+import uuid4 from "uuid4";
+import TodoItem from "./Todoitem";
+import ssimg from "./img/search (1).png"
+
+function TodoList({ tododata }) {
+  const [todoList, setTodoList] = useState(tododata);
+  const [newTodo, setNewTodo] = useState("");
+  const [searchitem, setsearchitem] = useState("");
+
+  const handleInput = (event) => {
+    setNewTodo(event.target.value);
+  };
+
+  const createList = () => {
+    const newTodoItem = {
+      id: uuid4(),
+      title: newTodo,
+      done: false,
+    };
+    setTodoList([...todoList, newTodoItem]);
+    setNewTodo("");
+  };
+
+  const deleteItem = (todoId) => {
+    setTodoList(todoList.filter((todo) => todo.id !== todoId));
+  };
+
+  return (
+    <div className=" w-{90%} h-full p-4 my-5 rounded-md overflow-y-auto">
+      <div className="w-50 h-40 flex flex-col mb-20">
+        <div className="flex  w-full m-2">
+           <input
+          type="text"
+          value={newTodo}
+          onChange={handleInput}
+          placeholder="Add new task"
+          className="w-full border border-gray-300 rounded text-black "
+        />
+        <button onClick={createList} className=" px-4 bg-green-400 text-white text-2xl rounded ">
+          +
+        </button>
+
+        </div>
+         <div className="flex  w-full m-2 bg-teal-600 h-1"></div>
+
+         <div className="flex  w-full m-2">
+           <input
+          type="text"
+          id="searchInput"
+          value={searchitem}
+          onChange={(event) => setsearchitem(event.target.value)}
+          placeholder="Search tasks"
+          className="w-full border border-gray-300 rounded text-black "
+        />
+                <label  className="mt-2"><img className="w-11" src={ssimg} alt="" /></label>
+
+         </div>
+
+      </div>
+
+      {todoList.map((todo) => {
+        if (todo.title.toLowerCase().includes(searchitem.toLowerCase())) {
+          return <TodoItem key={todo.id} todo={todo} deleteItem={deleteItem} />;
+        }
+        return null;
+      })}
+    </div>
+  );
+}
+
+export default TodoList;

src/assets/componets/Todoitem.js

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import eidt from "./img/edit.png"
+import delet from "./img/trash.png"
+
+function TodoItem({ todo, deleteItem }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [newTitle, setNewTitle] = useState(todo.title);
+  const [isChecked, setisChecked] = useState(false);
+  const [greencolor ,setgreencolor] = useState(false)
+  const [yalowcolor ,setyalowcolor] = useState(false)
+  const [redcolor ,setredcolor] = useState(false)
+  const handleSave = () => {
+    todo.title = newTitle;
+    setIsEditing(false);
+  };
+
+  const handleEditClick = () => {
+    setIsEditing(!isEditing);
+  };
+
+  function handelcheckbox (){
+    setisChecked(!isChecked)
+  }
+
+
+ function greenboxcolor (){
+  setgreencolor(!greencolor)
+ }
+ function yaloweboxcolor(){
+  setyalowcolor(!yalowcolor)
+ }
+ function redboxcolor (){
+  setredcolor(!redcolor)
+ }
+
+  return (
+    <div >
+      {isEditing ? (
+        <div className="flex gap-5 justify-between  bg-white mb-2 p-2 ">
+          <input
+          className=" text-black"
+            type="text"
+            value={newTitle}
+            onChange={(event) => setNewTitle(event.target.value)}
+          />
+          <button className="text-green-600" onClick={handleSave}>Save</button>
+        </div>
+      ) : (
+            <div className={`flex gap-5 justify-between h-auto w-{100%}  mb-6 p-2 rounded-lg hover:shadow-[5px_5px_rgba(0,_98,_90,_0.4),_10px_10px_rgba(0,_98,_90,_0.3),_15px_15px_rgba(0,_98,_90,_0.2),_20px_20px_rgba(0,_98,_90,_0.1),_25px_25px_rgba(0,_98,_90,_0.05)] 
+             shadow-[0px_10px_1px_rgba(221,_221,_221,_1),_0_10px_20px_rgba(204,_204,_204,_1)] ${isChecked?"bg-slate-400  text-white" : "bg-white" }`}>
+
+          <div className="flex gap-3 w-{70%}" >
+             <input type="checkbox" checked={isChecked} onChange={handelcheckbox}/> 
+            <p className={`w-full text-black font-serif text-wrap ${isChecked ? "line-through text-gray-500  " : ""}`}>{todo.title}</p>
+            </div>
+
+            <div className={"flex gap-5 w-{30%}"}>
+
+          <div className={"flex gap-2 h-5 mt-2"}>
+            <div className={`${greencolor?"bg-green-500 px-2 py-2":"bg-green-100 px-2 py-2"}`} onClick={greenboxcolor}></div>
+            <div  className={`${yalowcolor?"bg-yellow-400 px-2 py-2":"bg-yellow-100 px-2 py-2"}`} onClick={yaloweboxcolor}></div>
+            <div  className={`${redcolor?"bg-red-500 px-2 py-2":"bg-red-100 px-2 py-2"}`} onClick={redboxcolor}></div>
+          </div>
+
+          <div className="flex gap-4">
+            <label htmlFor=""></label>
+            <button className="text-red-600" onClick={() => deleteItem(todo.id)}><img className="w-9" src={delet} alt="" /></button>
+          <button className="text-green-600" onClick={handleEditClick}><img className="w-9" src={eidt} alt="" /></button>
+          </div>
+            </div>
+
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TodoItem;

src/index.css

@@ -1,10 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  height: auto;
 }
 
 code {

tailwind.config.js

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