diff --git a/src/App.css b/src/App.css
index 5b3e0d2..707995a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -130,7 +130,8 @@ body {
border: 1px solid rgba(255, 255, 255, 0);
}
-.todo-list-stats {
+.todo-list-stats,
+.uncheck-all {
display: flex;
justify-content: center;
padding-bottom: 10px;
@@ -182,4 +183,11 @@ body {
top: 0;
right: 1px;
border-radius: 50%;
+}
+
+.uncheck-all button {
+ border: none;
+ cursor: pointer;
+ background: none;
+ font-size: 1rem;
}
\ No newline at end of file
diff --git a/src/TodoList.tsx b/src/TodoList.tsx
index 23275d4..2c8b6c7 100644
--- a/src/TodoList.tsx
+++ b/src/TodoList.tsx
@@ -20,8 +20,8 @@ interface TodoListStatsProps {
const TodoListStats = (ps: TodoListStatsProps) => (
Completed {ps.completed} / {ps.total}
- {ps.completed ? (✔) : (<>>)}
- {(ps.completed === ps.total && ps.total > 0) ? well done!! 👏 🤩 : (<>>)}
+ {ps.completed && (✔)}
+ {(ps.completed === ps.total && ps.total > 0) && well done!! 👏 🤩}
)
const getTodoListStats = (todos: Todo[]): TodoListStatsProps => {
@@ -93,6 +93,12 @@ export const TodoList = (ps: TodoListProps) => {
return result;
};
+ const uncheckAllTodo = () => {
+ const newTodos = [...todos];
+ newTodos.forEach(todo => todo.isCompleted = false);
+ setTodos(newTodos);
+ }
+
const onDragEnd = (result: DropResult) => {
if (!result.destination) return;
const items = reorder(todos, result.source.index, result.destination.index);
@@ -103,6 +109,8 @@ export const TodoList = (ps: TodoListProps) => {
<>
+ {todoListStats.total && todoListStats.completed === todoListStats.total &&
+ ()}