javascriptintermediate15 minutes

Build a Task Manager with Dynamic Filtering and Sorting

Create a JavaScript function that manages a list of tasks, allowing dynamic filtering by status and priority, and sorting by due date or priority. This mini-project focuses on multi-step data manipulation and state handling with arrays and objects.

Challenge prompt

Write a function named manageTasks that accepts an array of task objects and a filter/sort options object. Each task has properties: id (number), title (string), status (string: 'pending', 'in-progress', 'completed'), priority (string: 'low', 'medium', 'high'), and dueDate (string in ISO date format). The function should filter the tasks based on the provided status and priority filters, then sort the filtered list according to the sort option. The sort option is either 'dueDate' (ascending) or 'priority' (descending: high > medium > low). Return the filtered and sorted array of tasks.

Guidance

  • Implement filtering by checking task properties against provided filters; if a filter is not given, do not filter by that property.
  • For sorting by priority, define a map to associate priority levels with numeric values to enable comparison.
  • Ensure that date strings are correctly parsed to Date objects for sorting.

Hints

  • Use Array.prototype.filter for filtering tasks based on multiple criteria.
  • Use Array.prototype.sort with custom comparison logic for dueDate and priority.
  • Convert ISO date strings to Date objects using new Date(task.dueDate) inside the sort comparator.

Starter code

function manageTasks(tasks, options) {
  // tasks: Array of task objects
  // options: { status: string|null, priority: string|null, sortBy: 'dueDate'|'priority' }

  // Your code here
}

Expected output

For tasks = [ { id: 1, title: 'Write report', status: 'pending', priority: 'high', dueDate: '2024-06-10' }, { id: 2, title: 'Email client', status: 'completed', priority: 'medium', dueDate: '2024-06-05' }, { id: 3, title: 'Fix bugs', status: 'in-progress', priority: 'high', dueDate: '2024-06-08' }, { id: 4, title: 'Team meeting', status: 'pending', priority: 'low', dueDate: '2024-06-07' } ], calling manageTasks(tasks, { status: 'pending', priority: null, sortBy: 'dueDate' }) should return: [ { id: 4, title: 'Team meeting', status: 'pending', priority: 'low', dueDate: '2024-06-07' }, { id: 1, title: 'Write report', status: 'pending', priority: 'high', dueDate: '2024-06-10' } ]

Core concepts

array filteringsorting with custom comparatordate parsingobject manipulation

Challenge a Friend

Send this duel to someone else and see if they can solve it.