Build a Dynamic To-Do List Manager in JavaScript
Create a small interactive to-do list manager that allows users to add, remove, edit, and toggle completion of tasks. This project will strengthen your skills with arrays, objects, DOM manipulation, and event handling in JavaScript.
Challenge prompt
Build a JavaScript function called todoManager that takes an array of task objects and a command object to update the list. Each task object has properties: id (unique number), text (string), and completed (boolean). The command object can be one of four types: add (with a text), remove (with task id), edit (with id and new text), or toggle (with id to mark as completed/uncompleted). Implement the logic to process the command and return the updated tasks array. Ensure task ids are unique and preserved. Your function should not modify the original array but return a new updated array.
Guidance
- • Use array methods like map, filter, and some to handle task updates immutably.
- • Generate unique IDs for new tasks by finding the max existing id and adding 1.
- • Carefully handle each command type distinctly and return a new updated array without mutating the original.
Hints
- • For 'add', append a new task object with a unique id and completed set to false.
- • For 'remove', filter out the task with the given id.
- • For 'toggle' and 'edit', use map to update matching tasks without altering others.
Starter code
function todoManager(tasks, command) {
// tasks: Array of {id, text, completed}
// command: {type, ...args}
// Implement your logic here
}Expected output
Example: const tasks = [ {id: 1, text: 'Buy milk', completed: false}, {id: 2, text: 'Walk dog', completed: false} ]; todoManager(tasks, {type: 'toggle', id: 2}); // returns: // [ // {id: 1, text: 'Buy milk', completed: false}, // {id: 2, text: 'Walk dog', completed: true} // ]
Core concepts
Challenge a Friend
Send this duel to someone else and see if they can solve it.