Task Manager

A Task Manager, often referred to as a To-Do List application, is a software tool designed to help users organize, prioritize, and track their tasks or activities. Its primary purpose is to enhance productivity by providing a centralized place to manage all commitments, from daily chores to long-term projects.

Core functionalities typically include:

1. Task Creation: Users can add new tasks, often with a title, description, and sometimes a due date or priority level.
2. Task Display: Tasks are listed, usually in an ordered or filtered manner (e.g., by due date, priority, or completion status).
3. Task Status Management: Users can mark tasks as complete, pending, or in progress. This helps in visually distinguishing between finished and unfinished work.
4. Task Editing: The ability to modify existing task details such as title, description, or due date.
5. Task Deletion: Removing tasks that are no longer relevant or have been completed and no longer need to be tracked.
6. Filtering/Sorting: More advanced task managers allow users to filter tasks by category, status, or due date, and sort them in various ways.

From a development perspective, building a Task Manager involves:
* State Management: Maintaining the list of tasks in the application's state. In React, `useState` is commonly used for local component state, or state management libraries like Redux/Context API for larger applications.
* User Input Handling: Capturing new task descriptions via input fields.
* Event Handling: Responding to user actions like adding a task, marking it complete, or deleting it.
* Component Rendering: Dynamically displaying the list of tasks and updating the UI as the state changes.
* Persistence (Optional for basic example): For a real-world application, tasks would need to be stored in local storage, a database, or a backend API so they persist across sessions.

A Task Manager serves as an excellent foundational project for learning front-end development, as it touches upon many core concepts of UI development and data management within an application.

Example Code

import React, { useState } from 'react';

function TaskManager() {
  const [tasks, setTasks] = useState([]);
  const [newTaskText, setNewTaskText] = useState('');
  const [editingTaskId, setEditingTaskId] = useState(null);
  const [editingTaskText, setEditingTaskText] = useState('');

  const handleAddTask = () => {
    if (newTaskText.trim()) {
      setTasks([...tasks, { id: Date.now(), text: newTaskText, completed: false }]);
      setNewTaskText('');
    }
  };

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

  const handleDeleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  const handleEditTask = (id, currentText) => {
    setEditingTaskId(id);
    setEditingTaskText(currentText);
  };

  const handleSaveEdit = (id) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, text: editingTaskText } : task
    ));
    setEditingTaskId(null);
    setEditingTaskText('');
  };

  const handleCancelEdit = () => {
    setEditingTaskId(null);
    setEditingTaskText('');
  };

  const commonStyle = {
    fontFamily: 'Arial, sans-serif',
    maxWidth: '500px',
    margin: '30px auto',
    padding: '20px',
    border: '1px solid #ddd',
    borderRadius: '8px',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
  };

  const inputStyle = {
    width: 'calc(100% - 70px)',
    padding: '10px',
    marginRight: '10px',
    border: '1px solid #ccc',
    borderRadius: '4px'
  };

  const buttonStyle = {
    padding: '10px 15px',
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  };

  const taskListStyle = {
    listStyle: 'none',
    padding: '0'
  };

  const taskItemStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '10px 0',
    borderBottom: '1px solid #eee',
    wordBreak: 'break-word'
  };

  const completedTaskStyle = {
    textDecoration: 'line-through',
    color: '#888'
  };

  const actionButtonStyle = {
    marginLeft: '5px',
    padding: '5px 10px',
    border: 'none',
    borderRadius: '3px',
    cursor: 'pointer'
  };

  const editInputStyle = {
    flexGrow: 1,
    padding: '8px',
    border: '1px solid #ccc',
    borderRadius: '4px',
    marginRight: '5px'
  };


  return (
    <div style={commonStyle}>
      <h1>Task Manager</h1>

      <div style={{ marginBottom: '20px' }}>
        <input
          type="text"
          value={newTaskText}
          onChange={(e) => setNewTaskText(e.target.value)}
          onKeyPress={(e) => { if (e.key === 'Enter') handleAddTask(); }}
          placeholder="Add a new task..."
          style={inputStyle}
        />
        <button onClick={handleAddTask} style={buttonStyle}>Add Task</button>
      </div>

      <ul style={taskListStyle}>
        {tasks.map(task => (
          <li key={task.id} style={taskItemStyle}>
            {editingTaskId === task.id ? (
              <>
                <input
                  type="text"
                  value={editingTaskText}
                  onChange={(e) => setEditingTaskText(e.target.value)}
                  onKeyPress={(e) => { if (e.key === 'Enter') handleSaveEdit(task.id); }}
                  style={editInputStyle}
                />
                <div>
                  <button onClick={() => handleSaveEdit(task.id)} style={{...actionButtonStyle, backgroundColor: '#28a745', color: 'white'}}>Save</button>
                  <button onClick={handleCancelEdit} style={{...actionButtonStyle, backgroundColor: '#6c757d', color: 'white'}}>Cancel</button>
                </div>
              </>
            ) : (
              <>
                <span
                  style={task.completed ? completedTaskStyle : {}}
                  onClick={() => handleToggleComplete(task.id)}
                >
                  {task.text}
                </span>
                <div>
                  <button
                    onClick={() => handleEditTask(task.id, task.text)}
                    style={{...actionButtonStyle, backgroundColor: '#ffc107', color: 'white'}}
                  >
                    Edit
                  </button>
                  <button
                    onClick={() => handleDeleteTask(task.id)}
                    style={{...actionButtonStyle, backgroundColor: '#dc3545', color: 'white'}}
                  >
                    Delete
                  </button>
                </div>
              </>
            )}
          </li>
        ))}
      </ul>
      {tasks.length === 0 && <p style={{textAlign: 'center', color: '#888'}}>No tasks yet. Add one above!</p>}
    </div>
  );
}

export default TaskManager;

Example Code

Related Topics