Skip to content
Learni
View all tutorials
Productivité

How to Use the Eisenhower Matrix in 2026

12 minBEGINNER
ProductivitéGestion du temps
Lire en français

Introduction

The Eisenhower Matrix is a time management tool that categorizes tasks by urgency and importance. It helps identify priority actions and avoid procrastination. In 2026, integrating it into a simple digital tool can greatly improve productivity. This tutorial guides you step by step to understand and implement the matrix.

Prerequisites

  • Basic knowledge of JavaScript
  • Node.js installed
  • Code editor (VS Code recommended)

Define Task Types

types.ts
export type Task = {
  id: number;
  title: string;
  urgent: boolean;
  important: boolean;
};

export type Quadrant = 'do' | 'schedule' | 'delegate' | 'eliminate';

These TypeScript types define the structure of a task and the four matrix quadrants for strict typing.

Categorization Function

categorize.ts
import { Task, Quadrant } from './types';

export function categorizeTask(task: Task): Quadrant {
  if (task.urgent && task.important) return 'do';
  if (!task.urgent && task.important) return 'schedule';
  if (task.urgent && !task.important) return 'delegate';
  return 'eliminate';
}

This pure function assigns each task to its quadrant based on urgency and importance criteria.

Simple HTML Interface

index.html
<!DOCTYPE html>
<html>
<head><title>Matrice Eisenhower</title></head>
<body>
<div id="matrix"></div>
<script src="app.js"></script>
</body>
</html>

Minimal HTML structure to display the matrix and load the JavaScript script.

Complete JavaScript Logic

app.js
const tasks = [];
function addTask(title, urgent, important) {
  tasks.push({ id: Date.now(), title, urgent, important });
  renderMatrix();
}
function renderMatrix() {
  console.log('Tâches classées:', tasks.map(t => ({...t, quadrant: categorizeTask(t)})));
}
function categorizeTask(task) {
  if (task.urgent && task.important) return 'do';
  if (!task.urgent && task.important) return 'schedule';
  if (task.urgent && !task.important) return 'delegate';
  return 'eliminate';
}
addTask('Répondre aux emails', true, false);

This complete script handles adding and displaying categorized tasks. Run it in a browser to test.

Persistence with localStorage

storage.js
function saveTasks(tasks) {
  localStorage.setItem('eisenhowerTasks', JSON.stringify(tasks));
}
function loadTasks() {
  const saved = localStorage.getItem('eisenhowerTasks');
  return saved ? JSON.parse(saved) : [];
}

These functions allow saving and reloading tasks between browser sessions.

Best Practices

  • Review the matrix every morning
  • Limit to 8 tasks per quadrant
  • Use action verbs in titles
  • Automate delegated tasks when possible

Common Mistakes to Avoid

  • Confusing urgency with importance
  • Not updating the matrix regularly
  • Adding too many tasks without prioritization
  • Ignoring the 'eliminate' quadrant

Going Further

Discover our productivity and project management courses at Learni.

How to Use the Eisenhower Matrix in 2026 | Learni