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 && + (
)}