grouped Todos

README.md

@@ -37,3 +37,5 @@
     Always retrieve the most recent data directly from the primary source (like localStorage) before making updates, ensuring you're working with the latest information.
 
     -   using a function as a state variable to load initially the localstorage instead of a straight useEffect
+
+    - grouping together of done and pending

src/TODO/ToDo.jsx

@@ -84,6 +84,17 @@ export default function ToDo() {
 		persistTodos(newTodos);
 	}
 
+	const pendingTodos = [],
+		doneTodos = [];
+	todos.forEach((t) => {
+		if (t.isDone) {
+			doneTodos.push(t);
+		} else {
+			pendingTodos.push(t);
+		}
+	});
+	const groupedTodos = [...pendingTodos, ...doneTodos];
+
 	return (
 		<>
 			<InputText
@@ -96,8 +107,8 @@ export default function ToDo() {
 			/>
 			{/* {todoToAdd} */}
 			<ToDos
-				todos={todos}
-				handleDone={handleDone}
+				todos={groupedTodos} // replace with grouped todos
+				onDone={handleDone}
 				onDelete={handleDeleteTodo}
 				onEdit={handleEditTodo}
 				onEditCancel={handleEditCancel}

src/index.css

@@ -120,6 +120,10 @@ button:hover {
 	margin-right: 10px;
 }
 
+div[data-done-todo="true"] {
+	background-color: green;
+}
+
 /* Responsive Adjustments */
 @media (max-width: 600px) {
 	#root {