Merkliste ​

Wir alle verwenden verschiedene Streamingdienste um uns Filme oder Serien anzusehen. Die meisten dieser Dienste haben auch eine sogenannte Merkliste. Diese bietet eine Möglichkeit, Filme oder Serien zu markieren, um sie später anzusehen.

Leider hat jede Streamingplattform ihre eigene Merkliste. In dieser Aufgabe möchten wir das ändern, indem wir eine universelle Merkliste als Website programmieren.

Aufgabenmaterial herunterladen ​

Um das Aufgabenmeterial herunterzuladen, gib folgenden Befehl in ein neues Terminal in deinem Codespace ein:

wget -O - https://inf-lab.dev/watchlist/material/lab-watchlist.zip.sh | bash

Teilaufgabe 1 ​

Nachdem du das Aufgabenmaterial heruntergeladen hast, beginne damit, dir die bereitgestellte index.html Datei anzusehen. Beantworte hierzu insbesondere die folgenden Fragen:

1. In welcher Sprache (gemeint ist die natürliche Sprache, nicht die Programmiersprache) ist der Inhalt des Dokuments laut seinen Elementen?
2. Wie lautet der Titel des HTML-Dokuments, wenn es im Browser angesehen wird?

Teilaufgabe 2 ​

Um überhaupt Einträge auf unserer Merkliste speichern zu können, benötigen wir ein Formular um diese hinzuzufügen. Erstelle daher ein HTML-Formular, welches es uns erlaubt Einträge auf unsere Merkliste hinzuzufügen.

Dieses Formular soll über zwei Eingabefelder verfügen. Erstens ein Feld für den Titel title des Films und zweitens eine Auswahlmöglichkeit für die Plattform provider, auf der der Film verfügbar ist. Schließlich benötigt unser Formular noch einen Button, um es abzusenden (also zu speichern).

Überlege dir selbst, welche Elemente du sinnvoll für den Titel und die Platform verwenden kannst, und welche Attribute diese Elemente benötigen. Achte auch darauf, dass der Nutzer weiß, wofür welches Feld verwendet werden soll.

Im folgenden Bild ist dargestellt, wie das Formular am Ende aussehen könnte.

Teilaufgabe 3 ​

Nachdem wir nun das Formular erstellt haben, ist es an der Zeit den zugehörigen JavaScript Code zu schreiben.

Sobald das Formular abgesendet wurde, soll überprüft werden, ob sowohl title als auch provider einen validen Wert enthalten. Sollte dies nicht der Fall sein, kannst du einfach mit der alert Funktion eine Fehlermeldung ausgeben.

Erstelle eine globale Variable movies, in der alle Filme der Merkliste gespeichert werden. Ergänze deinen Code so, dass der Film aus dem Formular nach erfolgreicher Validierung zur Merkliste hinzugefügt wird. Sorge außerdem dafür, dass das Formular nach dem Hinzufügen automatisch zurückgesetzt wird, damit ein weiterer Eintrag bequem eingefügt werden kann.

person = {
    'firstName': 'Max',
    'lastName': 'Mustermann',
}

Teilaufgabe 4 ​

Da wir nun Filme auf unsere Merkliste setzen können, sollten wir diese auch anzeigen.

Erstelle hierzu im HTML-Code eine unsortierte Liste und befülle diese in einer neuen JavaScript Funktion namens render. Zuerst sollte diese Funktion alle bereits bestehenden Listenelemente löschen, sodass wir sie mehrmals hintereinander aufrufen können ohne Einträge doppelt auszugeben. Iteriere dann in dieser Funktion über alle movies und erstelle für jeden Eintrag ein neues Listenelement gemäß dem Format <title> (at <provider>), wobei <title> und <provider> natürlich durch die jeweiligen Daten ersetzt werden sollen. Füge schließlich die erstellen Listenelemente in die Liste ein.

Ändere nun deinen Code aus Teilaufgabe 3 so ab, dass dieser nach erfolgreichem Einfügen in die movies Liste auch die Funktion render aufruft um die Liste darzustellen.

Wenn du alles richtig gemacht hast, könnte deine fertige Liste (je nach Eingaben im Formular) wie im folgenden Bild aussehen.

Teilaufgabe 5 ​

Nun können wir Filme auf unsere Liste einfügen und diese auch ansehen. Jetzt fehlt nur noch eine Funktion bereits angesehene Filme auch wieder zu löschen.

Passe den Code der render-Funktion so an, dass für jeden Eintrag neben dem Text zusätzlich ein <button> mit dem Text Watched! erstellt wird. Beim Anklicken dieses Buttons soll das entsprechende Element aus der Liste gelöscht werden. Vergiss nicht, nach dem Löschen auch wieder deine render Funktion aufzurufen, sonst wirst du vom Löschen nichts sehen!

Das könnte dann wie im folgenden Bild aussehen.

let fruit = ['Banane', 'Apfel', 'Melone'];

fruit.splice(1, 1);

Testen ​

Starte http-server in einem Terminal, während du dich im Verzeichnis lab-watchlist befindest, um einen Webserver zu starten, der die Webseite bereitstellt.

Einträge dauerhaft speichern ​

Bisher ist es so, dass die movies bei jedem Laden der Website wieder vergessen wurden. Für unser Testen kann es jedoch hilfreich sein, wenn diese dauerhaft gespeichert werden.

Hierfür haben wir etwas Code vorbereitet, den du nicht verstehen musst.^[1] Füge einfach folgenden HTML-Code vor deinem eigenen <script> Element ein und kommentiere das erstellen deiner movies Variable aus. Diese wird dir von unserem Code erstellt.

Nun sollte deine movies-Liste solange gespeichert bleiben, bis du die Website wirklich schließt.

<script src="https://inf-lab.dev/watchlist/material/persistent-movies.hosted.js"></script>

Vergiss nicht, die movies Variable wieder normal zu erstellen, wenn du das Skript entfernst!

Korrektheit ​

Für diese Aufgabe gibt es kein check50, da die Implementierungen sehr unterschiedlich ausfallen können.

Style ​

Leider unterstützt style50 keine HTML-Dateien. Daher liegt es an dir, deine HTML-Tags sauber einzurücken und auszurichten.