From c55af6ce6515b1263afe32dfb0f244400718772e Mon Sep 17 00:00:00 2001
From: alijoumaa2 <joumaaaliofficiel@gmail.com>
Date: Tue, 21 Feb 2023 13:13:32 +0200
Subject: [PATCH 1/3] changed color

---
 src/Components/task/Task.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/task/Task.jsx b/src/Components/task/Task.jsx
index c94f691..0ff78b7 100644
--- a/src/Components/task/Task.jsx
+++ b/src/Components/task/Task.jsx
@@ -11,7 +11,7 @@ function Task({ description, date }) {
     <div
       className="container_tasks"
       onClick={handleClick}
-      style={{ backgroundColor: click ? "red" : "white" }}
+      style={{ backgroundColor: click ? "blue" : "white" }}
     >
       <div>{description}</div>
       <div>{date}</div>

From 778923ff8a17e5225b3cbe9263327ab58e6e3f95 Mon Sep 17 00:00:00 2001
From: alijoumaa2 <joumaaaliofficiel@gmail.com>
Date: Tue, 21 Feb 2023 13:42:33 +0200
Subject: [PATCH 2/3] added the delete task function and moved the array to a
 use state

---
 src/Components/Box/Box.jsx   | 26 +++++++++++++++++++++-----
 src/Components/task/Task.jsx |  5 +++--
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/Components/Box/Box.jsx b/src/Components/Box/Box.jsx
index 1aa0e33..e0ada32 100644
--- a/src/Components/Box/Box.jsx
+++ b/src/Components/Box/Box.jsx
@@ -1,34 +1,50 @@
-import React from "react";
+import React, { useState } from "react";
 import "./box.css";
 import Task from "../task/Task";
 
 export default function Box() {
-  const tasks = [
+  const [tasks, setTasks] = useState([
     {
       description: "first Task",
       date: "20-02-2022",
+      id: 1,
     },
     {
       description: "second Task",
       date: "20-03-2022",
+      id: 2,
     },
     {
       description: "third Task",
       date: "20-04-2022",
+      id: 3,
     },
     {
       description: "fourth Task",
       date: "20-05-2022",
+      id: 4,
     },
     {
       description: "fifth Task",
       date: "20-06-2022",
+      id: 5,
     },
-  ];
+  ]);
+
+  const delteTask = (id) => {
+    const newTasks = tasks.filter((task) => task.id != id);
+    setTasks(newTasks);
+  };
   return (
     <div className="box">
-      {tasks.map((task) => (
-        <Task description={task.description} date={task.date} />
+      {tasks.map((task, i) => (
+        <Task
+          description={task.description}
+          date={task.date}
+          id={task.id}
+          onDelete={delteTask}
+          key={i}
+        />
       ))}
     </div>
   );
diff --git a/src/Components/task/Task.jsx b/src/Components/task/Task.jsx
index afc3f0b..285202e 100644
--- a/src/Components/task/Task.jsx
+++ b/src/Components/task/Task.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import "./task.css";
 
-function Task({ description, date }) {
+function Task({ description, date, onDelete, id }) {
   const [click, setClick] = useState(false);
 
   const handleClick = () => {
@@ -11,11 +11,12 @@ function Task({ description, date }) {
     <div
       className="container_tasks"
       onClick={handleClick}
+      onDoubleClick={() => onDelete(id)} //invocation
       style={{ backgroundColor: click ? "blue" : "white" }}
     >
       <div>{description}</div>
       <div>{date}</div>
-      <input type="checkbox"/>
+      <input type="checkbox" />
     </div>
   );
 }

From e80f87efb47c6f01b4b40d786439e09ff1e73836 Mon Sep 17 00:00:00 2001
From: alijoumaa2 <joumaaaliofficiel@gmail.com>
Date: Tue, 21 Feb 2023 14:18:06 +0200
Subject: [PATCH 3/3] fixed name of the function

---
 src/Components/Box/Box.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Box/Box.jsx b/src/Components/Box/Box.jsx
index e0ada32..8ab2895 100644
--- a/src/Components/Box/Box.jsx
+++ b/src/Components/Box/Box.jsx
@@ -31,7 +31,7 @@ export default function Box() {
     },
   ]);
 
-  const delteTask = (id) => {
+  const deleteTask = (id) => {
     const newTasks = tasks.filter((task) => task.id != id);
     setTasks(newTasks);
   };
@@ -42,7 +42,7 @@ export default function Box() {
           description={task.description}
           date={task.date}
           id={task.id}
-          onDelete={delteTask}
+          onDelete={deleteTask}
           key={i}
         />
       ))}