19 - To-Do List with Task Categorization

Description

Develop a to-do list application that allows users to:

• Create and manage tasks with titles and descriptions.

• Assign tasks to specific categories.

• View tasks organized by category.

• Mark tasks as complete or incomplete.

• Optionally, add features like due dates, priority levels, and search functionality.

Algorithm

1. Data Model:

   • Define data structures for tasks and categories (e.g., arrays of objects).

   • Each task includes title, description, category, completion status, and optional fields (due date, priority).

   • Categories can have names and potentially visual indicators (colors, icons).

2. User Interface:

   • Display a list of categories with task counts for each.

   • Allow users to toggle between viewing tasks for all categories or a specific category.

   • Provide a form for adding new tasks with a dropdown or input for category selection.

   • Show individual tasks with titles, descriptions, completion checkboxes, and optional fields.

3. Interactive Logic:

   • Handle task creation, including assigning categories and storing data.

   • Implement category filtering for displaying tasks within a chosen category.

   • Update completion status of tasks when checkboxes are toggled.

   • Optionally, manage due dates, priority levels, and search functionality.

Code

import React, { useState } from 'react';

function ToDoList() {
  const [tasks, setTasks] = useState([]);
  const [categories, setCategories] = useState(['Work', 'Personal', 'Shopping']);
  const [selectedCategory, setSelectedCategory] = useState('All');

  const handleAddTask = (event) => {
    event.preventDefault();
    const newTask = {
      id: Date.now(),
      title: event.target.title.value,
      description: event.target.description.value,
      category: event.target.category.value,
      completed: false,
      // Add other fields as needed (dueDate, priority)
    };
    setTasks([...tasks, newTask]);
    event.target.reset();
  };

  const handleTaskComplete = (taskId) => {
    setTasks(
      tasks.map((task) =>
        task.id === taskId ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div className="todo-list">
      {/* Category filtering options */}
      <div className="categories">
        {categories.map((category) => (
          <button key={category} onClick={() => setSelectedCategory(category)}>
            {category}
          </button>
        ))}
      </div>

      {/* Task list based on selected category */}
      <ul className="task-list">
        {tasks
          .filter((task) => selectedCategory === 'All' || task.category === selectedCategory)
          .map((task) => (
            <li key={task.id}>
              <input type="checkbox" checked={task.completed} onChange={() => handleTaskComplete(task.id)} />
              {task.title}
              {/* Display other task details as needed */}
            </li>
          ))}
      </ul>

      {/* Form for adding new tasks */}
      <form onSubmit={handleAddTask}>
        <input type="text" name="title" placeholder="Task title" required />
        <input type="text" name="description" placeholder="Task description" />
        <select name="category">
          {categories.map((category) => (
            <option key={category} value={category}>
              {category}
            </option>
          ))}
        </select>
        <button type="submit">Add Task</button>
      </form>
    </div>
  );
}

Explanation

• handleAddTask:

  • Creates a new task object with user-provided data.

  • Appends the new task to the tasks state array.

  • Resets the form for the next input.

• handleTaskComplete:

  • Updates the completion status of a task based on its ID.

• Form:

  • Contains inputs for task title, description, and category.

  • Submits data using handleAddTask.

• Category Filtering:

  • Buttons toggle the selectedCategory state.

  • Task list filters based on the selected category.

Additional Notes

• Consider using local storage or a backend database for persistence.

• Explore drag-and-drop, due dates, priority, and search features.

• Implement advanced features like task suggestions and sharing.