ToDo-Liste - Vorüberlegungen

[Felix Riesterer]

Lieber Matthias,

das DOM für so eine ToDo-Liste würde ich so angehen:

<ul id="task-list">
  <li>
    <input id="task-1" name="task-1" type="checkbox">
    <button name="delete">löschen</button>
    <button name="edit">bearbeiten</button>
    <label for="task-1">im Wiki aktiv werden</label>
  </li>
  <li>
    <input id="task-2" name="task-2" type="checkbox">
    <button name="delete">löschen</button>
    <button name="edit">bearbeiten</button>
    <label for="task-2">Spende an SELFHTML e.V.</label>
  </li>
  <li>
    <button id="add">neuen Eintrag hinzufügen</button>
  </li>
</ul>

[jsFiddle]

Mit diesem DOM kann man den „Checkbox-Hack“ verwenden, um erledigte Tasks entsprechend anders darzustellen. Auch die Buttons kann man dann (wahlweise) unsichtbar schalten.

Für alles, was den Eintrag inhaltlich verändert, braucht es einen passenden Button. Das Abhaken sollte eine Checkbox sein.

Das mit contenteditable würde bedeuten, dass man das DOM innerhalb eines Elements verändern kann. Das willst Du bei einer ToDo-Liste nicht, denn sonst könnte man das <li> mit beliebigen Kindelementen befüllen, die ihrerseits Listen, Tabellen und noch viel mehr sein können. Und nur damit der User etwas kursiv und fett formatieren kann... würde ich unbedingt davon abraten.

Liebe Grüße

Felix Riesterer