Todo

In dieser Aufgabe musst du ohne Hilfe klarkommen. Die Aufgabe enthält keine Hilfestellungen mehr.

Aufgabenstellung

Erstelle eine Todo-Liste.

Lösungsschritte

Verwende folgenden Vue Playground als Startpunkt für deine Lösung.

Vue SFC Playgroundsfc.vuejs.org

Taskliste ausgeben

Es wurde bereits eine tasks Variable für dich vorbereitet.

• Gib die Tasks aus der tasks Liste im <template> Bereich an der vorbereiteten Stelle aus.

• Ergänze eine <input type="checkbox"> Checkbox vor jedem Task. Die Checkbox soll checked sein, wenn ein Task bereits erledigt wurde. Wenn die Checkbox angeklickt wird, soll der done Zustand eines Tasks sich entsprechend ändern.

• Im CSS sind bereits zwei Klassen is-done und high-priority vorbereitet. Sorge dafür, dass die Klassen gemäss den done und high_priority Eigenschaften für jeden einzelnen Listeneintrag angwendet werden. Versuche mit der Vue-Dokumentation selber herauszufinden, wie das funktioniert.

Neue Tasks erfassen

Du findest bereits ein Input-Feld, um neue Tasks zu erfassen.

• Sorge dafür, dass über das Input-Feld ein neuer Task zur Taskliste hinzugefügt werden kann. Die «Hohe Priorität» Checkbox soll den erfassten Task direkt mit hoher Priorität erfassen.

• Das Input-Feld sowie die Checkbox sollen nach dem Hinzufügen wieder geleert werden.

Status anzeigen

Oberhalb des Erfassungsformulars findest du eine Statuszeile: x von y Tasks sind erledigt.

• Sorge dafür, dass die Statuszeile die effektive Anzahl erledigter und erfasster Tasks wiedergibt.

Tasks sortieren

Die Taskliste ist momentan nach Erfassungszeitpunkt sortiert.

• Sortiere die Taskliste so, dass Tasks mit hoher Priorität immer am Anfang erscheinen.

Tasks löschen

Ergänze eine «Löschen» Aktion zu jedem Task, mit dem der Task aus der Taskliste entfernt werden kann.

Stundenschätzung

• Ergänze zum Task-Text ein weiteres Feld um die Anzahl geschätzer Stunden (z. B. 2) beim Erfassen eines Tasks definieren zu können.

• Die Anzahl eingetragener Stunden sollen vor jedem Task in der Liste angezeigt werden.

• Ergänze die Summe aller geschätzer Aufwände der nicht erledigten Tasks in der Stausleiste: 2 von 5 Tasks sind erledigt, 4 h Aufwand offen

Zusatzaufgabe: In Tabelle umformatieren

Die Listendarstellung gerät an ihre Grenzen.

• Baue das <ul> Element in folgende Tabellenstruktur um:

Prio	Task	Stunden	Aktionen
Hoch	Rasen mähen	2	Löschen
Hoch	Französisch lernen	5	Löschen
Normal	Einkaufen gehen	2	Löschen