diff --git a/package-lock.json b/package-lock.json index e6a160a..1a1791e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,11 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "uuid4": "^2.0.3", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "tailwindcss": "^3.4.1" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -17332,6 +17336,11 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/uuid4": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/uuid4/-/uuid4-2.0.3.tgz", + "integrity": "sha512-CTpAkEVXMNJl2ojgtpLXHgz23dh8z81u6/HEPiQFOvBc/c2pde6TVHmH4uwY0d/GLF3tb7+VDAj4+2eJaQSdZQ==" + }, "node_modules/v8-to-istanbul": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz", diff --git a/package.json b/package.json index 88a269e..37f020b 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "uuid4": "^2.0.3", "web-vitals": "^2.1.4" }, "scripts": { @@ -34,5 +35,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "tailwindcss": "^3.4.1" } } diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 13088c2..0000000 --- a/src/App.css +++ /dev/null @@ -1,49 +0,0 @@ -:root { - --peach: #ffe6e6; - --pink: #e1afd1; - --lightPurple: #ad88c6; - --darkPurple: #7469b6; -} - -* { - box-sizing: border-box; -} - -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 0ff7d8a..d72ead7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,13 @@ -import "./App.css"; -// TODO: Import the todoData and pass it as a prop to the TodoList component - +import ToDoList from "./component/ToDoList" +import todoData from "./todoData"; function App() { return ( -
+
- {/* Call the TodoList Component Here */} + + + +
); diff --git a/src/component/ToDoList.js b/src/component/ToDoList.js new file mode 100644 index 0000000..b42bd26 --- /dev/null +++ b/src/component/ToDoList.js @@ -0,0 +1,61 @@ +import { useState } from "react"; +import uuid4 from "uuid4"; +import TodoItem from "./Todoitem"; + +function ToDoList({ todoData }) { + const [toDoList, setToDoList] = useState(todoData); + const [newTodo, setCreatList] = useState(""); + + const handeltextchange = (event) => { + setCreatList(event.target.value); + }; + + const handelToDo = () => { + const newToDoObj = { + id: uuid4, + title: newTodo, + done: false, + }; + setToDoList([...toDoList, newToDoObj]); + setCreatList(""); + }; + const handelDelete = (todoid) => { + setToDoList(toDoList.filter((todo) => todo.id !== todoid)); + }; + const handleSave = (todoId, editedTitle) => { + setToDoList( + + toDoList.map((todo) => + todo.id === todoId ? { ...todo, title: editedTitle } : todo + ) + ); + }; + + return ( +
+ +
+ + + + {toDoList.map((todo) => ( + + ))} +
+
+ ); +} + +export default ToDoList; diff --git a/src/component/Todoitem.js b/src/component/Todoitem.js new file mode 100644 index 0000000..67ddbb5 --- /dev/null +++ b/src/component/Todoitem.js @@ -0,0 +1,74 @@ +import { useState } from "react"; + +const TodoItem = ({ todo, handelDelete, handleSave }) => { + const [isEditing, setIsEditing] = useState(false); + const [isDone,setIsDone]=useState(todo.done) + const [newTitle, setNewTitle] = useState(todo.title); + + const handledone=()=>{ + setIsDone(!isDone) + } + const handelediti = () => { + setIsEditing(!isEditing); + }; + const handelsaveedite = (event) => { + setNewTitle(event.target.value); + }; + + const handleSaveButton = () => { + handleSave(todo.id, newTitle); + setIsEditing(!isEditing); + }; + + return ( +
+ {isEditing ? ( + + ) : ( +isDone?

{todo.title}

:

{todo.title}

+ )} + {isEditing ? ( + save + ) : ( + + + + + + + )} + handelDelete(todo.id)}> + {" "} + + + + +
+ ); +}; + +export default TodoItem; diff --git a/src/index.css b/src/index.css index ec2585e..d1a09b2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,7 @@ -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; -} +@tailwind base; +@tailwind components; +@tailwind utilities; -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} +body{ +background-image: url(https://www.svgbackgrounds.com/wp-content/uploads/2021/05/protruding-squares-orange-background.png); +background-repeat: repeat;} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..176007d --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,17 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{html,js}"], + theme: { + colors:{ + black:"#000000", + red:"#CF0A0A", + white:"#EEEEEE", + org:"#DC5F00", + orgl:"#ffd0ad" + + }, + extend: {}, + }, + plugins: [], +} +