COMP 305: Object-Oriented Software Design

University of San Diego, Fall 2025

Procedural Task Manager

This interactive example manages tasks using simple procedures that operate on shared data. It highlights top-down flow, explicit state, and straightforward function calls.

Run

0
Total
0
Active
0
Completed

Task List

Log

// Task Manager initialized
// Ready to track function calls...

Source

Complete source of the demo logic. This uses Astro’s built‑in syntax highlighting.

// Procedural Task Manager Implementation (UI integration)
let tasks = [];
let nextId = 1;
const outputLog = [];
const maxLogEntries = 200;

export function addTask(title, description) {
  const task = { id: nextId++, title, description, completed: false, createdAt: new Date() };
  tasks.push(task);
  logAction(`addTask("${title}", "${description}") // Added ID: ${task.id}`);
  return task;
}

export function completeTask(taskId) {
  const task = findTaskById(taskId);
  if (task && !task.completed) {
    task.completed = true;
    task.completedAt = new Date();
    logAction(`completeTask(${taskId}) // Marked Completed`);
    return true;
  }
  return false;
}

export function deleteTask(taskId) {
  const task = findTaskById(taskId);
  const index = tasks.findIndex(t => t.id === taskId);
  if (index !== -1) {
    const taskTitle = task?.title ?? '';
    tasks.splice(index, 1);
    logAction(`deleteTask(${taskId}) // Removed: "${taskTitle}"`);
    return true;
  }
  return false;
}

export function findTaskById(taskId) {
  for (let i = 0; i < tasks.length; i++) if (tasks[i].id === taskId) return tasks[i];
  return null;
}

export function getAllTasks() {
  logAction(`getAllTasks() // Returned ${tasks.length} tasks`);
  return tasks;
}

export function getTaskStats() {
  const total = tasks.length;
  const completed = tasks.filter(t => t.completed).length;
  const active = total - completed;
  logAction(`getTaskStats() // Total: ${total}, Active: ${active}, Completed: ${completed}`);
  return { total, active, completed };
}

export function logAction(action) {
  const timestamp = new Date().toLocaleTimeString();
  outputLog.push(`[${timestamp}] ${action}`);
  if (outputLog.length > maxLogEntries) outputLog.shift();
}