Todo List

Kompletter Prompt für eine responsive Todo-App mit HTML, CSS und Vanilla JavaScript inklusive Drag-and-Drop.

Der Prompt

Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript. The app should have a modern, clean UI using CSS Grid/Flexbox with intuitive controls. Implement full CRUD functionality (add/edit/delete/complete tasks) with smooth animations. Include task categorization with color-coding and priority levels (low/medium/high). Add due dates with a date-picker component and reminder notifications. Use localStorage for data persistence between sessions. Implement search functionality with filters for status, category, and date range. Add drag and drop reordering of tasks using the HTML5 Drag and Drop API. Ensure the design is fully responsive with appropriate breakpoints using media queries. Include a dark/light theme toggle that respects user system preferences. Add subtle micro-interactions and transitions for better UX.

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Dieser Prompt liefert eine sehr detaillierte Spezifikation für eine Todo-App: CRUD-Funktionen, Kategorien mit Farbcodierung, Prioritäten, Fälligkeitsdaten mit Datepicker, Erinnerungen, localStorage-Persistenz, Suche mit Filtern, Drag-and-Drop-Sortierung sowie ein Dark/Light-Theme. Der Wert liegt weniger in der Kreativität als in der Vollständigkeit der Anforderungsliste, das Modell muss nicht raten, welche Features gewünscht sind. Geeignet für alle, die schnell ein funktionsreiches Frontend-Beispielprojekt ohne Framework brauchen, etwa zum Lernen von Vanilla-JS-Patterns oder als Ausgangsbasis für ein eigenes Tool. Wer ein Backend oder Mehrbenutzerbetrieb braucht, muss das selbst ergänzen, da alles nur lokal im Browser gespeichert wird.

Praxis-Tipp

Lassen Sie sich den Code in mehreren Dateien (HTML/CSS/JS getrennt) statt in einer Datei ausgeben, das macht spätere Anpassungen deutlich übersichtlicher.

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …