LU02.L07 - JSON-Daten im Webformularen ausgeben

Bei dieser Aufgabe geht es darum sich mit den verschiedenen Technologien wie HTML, CSS und JavaScript in Kombination vertraut zu machen.

Ihr Auftrag besteht aus Teilaufgaben:

1. Code importieren + Inhalt testen - 10 Min.
2. JSON-Daten ergänzen (mehr Datensätze) - 5 Min.
3. JSON-Daten erweiteren (weitere Hobbies) - 5 Min.
4. Scripte auf JSON-Erweiterungen anpassen - 10 Min.
5. Neues Filterfeld anlegen - 10 Min.

Erklärvideo: Einleitung + Aufgabenvorbesprechung

Erklärvideo: Erklärungen zu den Files

1. Legen Sie im VS Code einen Ordner mit dem Namen lu02_l07 an.
2. Copieren Sie die den Inhalt dieses nachfolgenden komprimierten Zip-Files in diesen Ordner: data.json, script.js, styles.css und index.html.
3. Führen Sie das File index.html im Browser aus bzw. lassen Sie sich die Liste im Browser-Fenster ausgeben.
4. Filtern Sie die Liste nach Namen und Hobbies.

Erklärvideo: Importieren und testen

1. Aktuell sind 10 Datensätze im JSON-File. Legen Sie weitere mindestens 10 Datensätze (Personen an).
2. Testen Sie die Änderung im Browserfenster (anzeigen + filtern).

Erklärvideo: Neue Datensätze anlegen

1. Aktuell sind 4 Hobbies vorhanden: Lesen, Fussball, Malen, Schwimmen.
2. Überschreiben Sie die einige Datensätze Ihrer Wahl mit den neuen Hobbies Gamen und Reisen.
3. Hinweis: Die neuen Hobbies werden zwar angezeigt, man kann aber aktuell nicht nach diesen Filtern, weil die Filter noch nicht angepasst wurden.

Erklärvideo: Daten erweiteren durch weitere Hobbies

1. Damit wir nach den Hobbies filtern können, müssen wir uns index.html anpassen.
2. Ergänzen Sie also im entsprechenden div des HTML-Formulars die Liste der Checkboxen mit den neuen Hobbies Gamen und Reisen.
3. Testen Sie die Filter-Erweitung: die Filter-Liste sollte nun die zwei neuen Hobbies Gamen und Reisen enthalten.
4. Testen Sie die Funktion des Filters: Die Liste sollten nun auch nach den Hobbies Gamen und Reisen gefiltert werden können.

Erklärvideo: Filterliste ergänzen

Volkan Demir