javascriptintermediate15 minutes

Build a Task Management App with JavaScript

Create a simple task management mini-project where users can add, mark complete, and delete tasks dynamically using JavaScript arrays and DOM manipulation.

Challenge prompt

Build a task management app that allows users to: (1) add new tasks with a task description, (2) toggle completion status of any task, and (3) delete tasks. The app should maintain an array of task objects, each with a description and a completed status. Render the task list dynamically based on this array. Whenever a task is toggled or deleted, update the array and re-render the list to reflect the changes.

Guidance

• Use an array of objects to store the tasks; each object should contain 'description' and 'completed' properties.
• Create functions to handle adding tasks, toggling the completed state, and deleting tasks.
• Use event delegation or attach event listeners dynamically to handle user interactions on task items.
• Each time the task list changes, re-render the task list in the DOM to keep it in sync with the array.

Hints

• Consider using the array methods like push, filter, and map to manipulate task data.
• Use `element.innerHTML` or DOM methods to generate the task list with appropriate CSS classes to show completed tasks.
• To toggle completion, invert the boolean value of the 'completed' property for the targeted task object.

Starter code

function TaskManager() {
  this.tasks = [];

  this.addTask = function(description) {
    // Add your code here
  };

  this.toggleTask = function(index) {
    // Add your code here
  };

  this.deleteTask = function(index) {
    // Add your code here
  };

  this.render = function() {
    // Add your code here to dynamically update the displayed task list
  };

}

const taskManager = new TaskManager();

// Example usage:
// taskManager.addTask('Learn JavaScript');
// taskManager.render();

Expected output

When tasks are added, toggled, or deleted, the rendered list updates dynamically. Completed tasks are visually distinct (for example, crossed out or greyed out). Deleting a task removes it from the list. Adding a task appends it to the bottom of the list.

Core concepts

arraysDOM manipulationevent handlingobject management

Challenge a Friend

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