TODO.TXT-App

NWSX-003REF: 2026-05-24JavaScriptMIT

Live-Demo: nwsx.org/todo.txt
Quellcode: github.com/NousWorksHQ/todo.txt-App

// ÜBERSICHT & ZWECK

Die TODO.TXT-App entstand aus dem Bedürfnis nach einer Aufgabenverwaltung, die vollständig offline funktioniert, keine Abhängigkeit von Cloud-Services hat und das offene todo.txt-Format unterstützt.

Das todo.txt-Format ist ein einfacher Textstandard: Jede Zeile ist eine Aufgabe. Prioritäten, Projekte, Kontexte und Fälligkeitsdaten werden durch festgelegte Präfixe kodiert. Dadurch bleibt die Datei menschenlesbar und kann mit jedem Texteditor geöffnet werden.

Kernprinzip: Alle Daten bleiben ausschliesslich im Browser. Es gibt keinen Server, keine Datenbank, keine Registrierung.

// TECHNISCHER AUFBAU

Stack

Technologie	Rolle
HTML5	Struktur, <dialog>-Element für Modals
CSS3	Custom Properties, kein CSS-Framework
JavaScript ES6+	Gesamte App-Logik, kein Framework
localStorage API	Datenpersistenz im Browser
File API	Import/Export von todo.txt-Dateien

Architektur

Die App ist als IIFE-modulares Vanilla-JS-Projekt aufgebaut – ohne Build-Pipeline. Fünf Dateien bilden die vollständige Logik:

├── index.html            # App-Shell, CSS-Import, Markup
├── css/
│   └── style.css         # Gesamtes Styling mit CSS Custom Properties
└── js/
    ├── parser.js         # todo.txt-Format parsen & serialisieren
    ├── storage.js        # localStorage & File API Abstraktion
    ├── ui.js             # DOM-Rendering & Interaktion
    ├── format-toolbar.js # Toolbar für Format-Helfer
    └── app.js            # Haupt-Koordination, Event-Handling

Datenfluss:

1. storage.js liest/schreibt den rohen todo.txt-String aus localStorage
2. parser.js wandelt den String in strukturierte Objekte um (und zurück)
3. ui.js rendert die Liste, verwaltet Filter, löst DOM-Events aus
4. app.js koordiniert alles und reagiert auf Nutzerinteraktionen

Browserkompatibilität

Browser	Mindestversion
Chrome / Edge	90+
Firefox	88+
Safari	15+

Benötigte APIs: localStorage, File API, <dialog>, CSS Custom Properties, ES6 Modules.

// INSTALLATION & NUTZUNG

Direktes Öffnen

git clone https://github.com/NousWorksHQ/todo.txt-App.git
cd todo.txt-App
# macOS:
open index.html
# Windows:
start index.html

Achtung

Import/Export via File API funktioniert nur über einen HTTP-Server. Beim direkten Öffnen (file://) ist diese Funktion eingeschränkt.

Lokaler Server

git clone https://github.com/NousWorksHQ/todo.txt-App.git
cd todo.txt-App

# Python (in der Regel vorinstalliert):
python3 -m http.server 8080

# oder Node.js:
npx serve .

App unter http://localhost:8080 öffnen.

todo.txt-Format Kurzreferenz

(A) Wichtige Aufgabe +ProjektName @Kontext due:2026-06-01
x 2026-05-15 2026-05-01 Abgeschlossene Aufgabe

Element	Syntax	Beispiel
Priorität	(A) bis (Z) am Anfang	(A) Dringend
Abgeschlossen	x am Anfang	x 2026-05-15 …
Projekt	+Name	+Renovierung
Kontext	@Name	@Büro
Fälligkeitsdatum	due:YYYY-MM-DD	due:2026-06-01

Tastaturkürzel

Kürzel	Aktion
n	Neue Aufgabe erstellen
/	Suche fokussieren
Esc	Filter/Suche zurücksetzen

// BESONDERHEITEN & ENTSCHEIDUNGEN

Keine Abhängigkeiten: Die Entscheidung für reines Vanilla JS ohne Framework bedeutet, dass die App auch in zehn Jahren noch ohne Anpassungen laufen wird. Kein npm install, keine Sicherheitslücken durch veraltete Pakete.

Privacy by Design: Da alle Daten nur im localStorage liegen, verlassen sie niemals das Gerät des Nutzers. Kein Tracking, kein Analytics.

XSS-Schutz: Alle Nutzereingaben werden vor dem Einfügen in den DOM escaped, um Cross-Site-Scripting zu verhindern.

Kein Build-Step: Die App läuft direkt im Browser ohne Kompilierung. Das vereinfacht Wartung und Weiterentwicklung erheblich.