0
Total
This interactive example manages tasks using simple procedures that operate on shared data. It highlights top-down flow, explicit state, and straightforward function calls.
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();
}