TheCodePeople · Mustafa88A · Mar 17, 2024 · Mar 24, 2024 · Apr 27, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git 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": {

diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,12 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Madimi+One&display=swap"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,6 +30,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -1,8 +1,6 @@
 :root {
-  --peach: #ffe6e6;
-  --pink: #e1afd1;
-  --lightPurple: #ad88c6;
-  --darkPurple: #7469b6;
+  --one: #8b84b2;
+  --two: #dfdef0;
 }
 
 * {
@@ -11,6 +9,7 @@
 
 .App {
   text-align: center;
+  background-color: var(--one);
 }
 
 .App-logo {
@@ -25,25 +24,143 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  color: white;
+  font-family: "Madimi One", sans-serif;
+  /* background-color: var(--one); */
+  background-color: rgba(0, 0, 0, 0.2);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+
+  /* color: white; */
 }
 
-.App-link {
-  color: #61dafb;
+.contenr {
+  border: 2px solid white;
+  width: 50%;
+  height: auto;
+  /* background-color: var(--two); */
+  background-image: repeating-linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.1),
+      transparent,
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0.01),
+      rgba(0, 0, 0, 0.02),
+      rgba(0, 0, 0, 0.05),
+      transparent,
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0.1),
+      rgba(0, 0, 0, 0.03) 3px
+    ),
+    linear-gradient(0deg, rgb(85, 159, 230), rgb(230, 105, 196));
+  border-radius: 25px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.input-title {
+  font-family: "Madimi One", sans-serif;
+  width: 250px;
+  height: 35px;
+  border-radius: 15px;
+  margin: 10px;
+  border: 2px #818cf8 solid;
+  /* outline: none; */
+}
+
+.btn-add {
+  border: none;
+  outline: none;
+  background-color: #6c5ce7;
+  padding: 10px 20px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  border-radius: 5px;
+  transition: all ease 0.1s;
+  box-shadow: 0px 5px 0px 0px #a29bfe;
+  margin-left: 5px;
+}
+
+button:active {
+  transform: translateY(5px);
+  box-shadow: 0px 0px 0px 0px #a29bfe;
+}
+.items {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 30px;
+  margin-left: 30px;
+}
+.items p {
+  width: 65%;
+  overflow-wrap: break-word;
+  text-align: start;
+  cursor: pointer;
+}
+.detels {
+  width: 20%;
+  display: flex;
+  justify-content: space-evenly;
+}
+.red {
+  text-decoration: line-through;
+}
+#delete-img,
+#edit-img,
+#save-img {
+  width: 30px;
+}
+.hadar {
+  width: 90%;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.search {
+  border-style: none;
+  height: 50px;
+  width: 50px;
+  padding: 10px;
+  outline: none;
+  border-radius: 50%;
+  transition: 0.5s ease-in-out;
+  background-color: #7e4fd4;
+  box-shadow: 0px 0px 3px #f3f3f3;
+  padding-right: 40px;
+  color: #fff;
+}
+
+.search::placeholder {
+  color: #8f8f8f;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  position: absolute;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  outline: none;
+  border-style: none;
+  border-radius: 50%;
+  pointer-events: painted;
+  background-color: transparent;
+  transition: 0.2s linear;
+}
+
+.icon:focus ~ .search,
+.search:focus {
+  box-shadow: none;
+  width: 250px;
+  border-radius: 0px;
+  background-color: transparent;
+  border-bottom: 3px solid #7e4fd4;
+  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
 }
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,16 @@
 import "./App.css";
+import ToDoList from "./components/ToDoList";
+import todoData from "./todoData";
 // TODO: Import the todoData and pass it as a prop to the TodoList component
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         {/* Call the TodoList Component Here */}
-      </header>
+
+        <ToDoList todoData={todoData} />
+      </header>{" "}
     </div>
   );
 }

diff --git a/src/components/ListTask.jsx b/src/components/ListTask.jsx
@@ -0,0 +1,13 @@
+const ListTask = ({ filterTodo, getToDo }) => {
+  return (
+    <form action="">
+      <select name="" id="" onChange={(e) => filterTodo(e.target.value)}>
+        <option value="1">Active</option>
+        <option value="2">Completed </option>
+        <option value="3">All</option>
+      </select>
+    </form>
+  );
+};
+
+export default ListTask;
diff --git a/src/components/ToDoList.jsx b/src/components/ToDoList.jsx
@@ -0,0 +1,97 @@
+import { useState, useRef } from "react";
+import uuid4 from "uuid4";
+import TodoItem from "./TodoItem";
+import ListTask from "./ListTask";
+
+function ToDoList({ todoData }) {
+  const [copyToDo, setcopyToDo] = useState(todoData);
+  const [getToDo, setToDo] = useState(todoData);
+  const [todoTitel, setToDoTitel] = useState("");
+  const [search, setSearch] = useState("");
+  const inputTitel = useRef();
+  console.log("hi word");
+  function handleTextChange(event) {
+    setToDoTitel(event.target.value);
+  }
+
+  function handleTodoCreate() {
+    const newToDoObj = {
+      id: uuid4(),
+      title: todoTitel,
+      done: false,
+    };
+    setToDo([...getToDo, newToDoObj]);
+    inputTitel.current.value = "";
+  }
+
+  function handleDelete(todoId) {
+    setToDo(getToDo.filter((todo) => todo.id !== todoId));
+  }
+  function handleEdit(idTodo, newText) {
+    setToDo(
+      getToDo.map((todo) =>
+        todo.id === idTodo ? { ...todo, title: newText } : todo
+      )
+    );
+  }
+
+  //###########################################
+  const filterTodo = (text) => {
+    const filterObjects = (text, todos) => {
+      if (text == 1) {
+        return todos.filter((item) => item.done == false);
+      } else if (text == 2) {
+        return todos.filter((item) => item.done == true);
+      } else {
+        return todos.slice(); // Return a copy of the original array if value is not 1 or 2
+      }
+    };
+
+    const filteredTodos = filterObjects(text, copyToDo);
+    setToDo(filteredTodos);
+  };
+  //################################
+
+  return (
+    <div className="contenr">
+      <input
+        ref={inputTitel}
+        type="text"
+        placeholder="Enter New ToDo"
+        onChange={handleTextChange}
+        className="input-title"
+        // {...getToDo("title",{required:true})}
+      ></input>
+
+      <button onClick={handleTodoCreate} className="btn-add">
+        Add
+      </button>
+      <div className="hadar">
+        <input
+          type="text"
+          className="search"
+          onChange={(e) => setSearch(e.target.value)}
+        ></input>
+
+        <ListTask filterTodo={filterTodo} />
+      </div>
+
+      {getToDo
+        .filter((todo) => {
+          return search.toLowerCase() === ""
+            ? todo
+            : todo.title.toLowerCase().includes(search);
+        })
+        .map((todo, index) => (
+          <TodoItem
+            index={index}
+            todo={todo}
+            handleDelete={handleDelete}
+            handleEdit={handleEdit}
+            setToDo={setToDo}
+          />
+        ))}
+    </div>
+  );
+}
+export default ToDoList;