diff --git a/Assignment_004/readme.md b/Assignment_004/readme.md
index 915c635..6605ad5 100644
--- a/Assignment_004/readme.md
+++ b/Assignment_004/readme.md
@@ -1,6 +1,6 @@
# Interaktive Filmdatenbank
-📆 **Fällig: 19.11.2023** 📆
+📆 **Fällig: 19.11.2023** 📆 [Musterlösung](solution/)
Erstellen Sie eine einfache Filmdatenbank, in die man Filme per Formular hinzufügen kann.
@@ -32,7 +32,9 @@ Stylen Sie die Tabelle und die Seite mit CSS so, dass die Tabelle entsprechende
## Teil 2: JSON-Format
-Überlegen Sie sich ein JSON-Format für die Speicherung von Filmen für die oben genannte Tabelle. Erzeugen Sie ein Array Ihrer Lieblingsfilme mit dem entsprechenden Format. Wenn Sie Ihre Lieblingsfilme nicht preisgeben wollen, verwenden Sie folgende Filme als Beispiel:
+Überlegen Sie sich ein JSON-Format (JavaScript-Objekt) für die Speicherung eines einzelnen Films. Die notwendigen Attribute finden Sie in den Beispielen der oben genannte Tabelle. Erzeugen Sie dann ein Array von diesen Objekten mit den Daten Ihrer Lieblingsfilme.
+
+Wenn Sie Ihre Lieblingsfilme nicht preisgeben wollen, verwenden Sie folgende Filme als Beispiel:
| Titel | Regisseur | Jahr | Spielzeit | FSK |
|----------------------|-------------------|------|-----------|-----|
diff --git a/Assignment_004/solution/index.html b/Assignment_004/solution/index.html
new file mode 100644
index 0000000..efebb0e
--- /dev/null
+++ b/Assignment_004/solution/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Filmdatenbank
+
+
+
+
+
+
+ Filmdatenbank
+
+
+
diff --git a/Assignment_004/solution/js/filmdatenbank.js b/Assignment_004/solution/js/filmdatenbank.js
new file mode 100644
index 0000000..2090246
--- /dev/null
+++ b/Assignment_004/solution/js/filmdatenbank.js
@@ -0,0 +1,130 @@
+// Class for storing the movie
+class Film {
+ constructor(titel, regisseur, jahr, spielzeit, fsk) {
+ this.titel = titel;
+ this.regisseur = regisseur;
+ this.jahr = jahr;
+ this.spielzeit = spielzeit;
+ this.fsk = fsk;
+ }
+}
+
+(function() {
+
+ let num = 1;
+
+ let filme = [
+ new Film("Pulp Fiction", "Quentin Tarantino", 1994, 154, 16),
+ new Film("Inglourious Basterds", "Quentin Tarantino", 2009, 153, 16),
+ new Film("Reservoir Dogs", "Quentin Tarantino", 1992, 99, 18),
+ new Film("Blade Runner", "Ridley Scott", 1982, 117, 16)
+ ];
+
+ function extractFilm() {
+ return new Film(
+ document.querySelector("#title").value,
+ document.querySelector("#regisseur").value,
+ parseInt(document.querySelector("#jahr").value),
+ parseInt(document.querySelector("#spielzeit").value),
+ parseInt(document.querySelector("#fsk").value));
+ }
+
+ function createTD(contents) {
+ let td = document.createElement("td");
+ td.appendChild(document.createTextNode(contents));
+ return td;
+ }
+
+ function deleteMovie(rowId) {
+ let row = document.getElementById(rowId);
+ row.parentNode.removeChild(row);
+ }
+
+ function createRow(id, film) {
+ let row = document.createElement("tr");
+ let button = document.createElement("button");
+ button.appendChild(document.createTextNode("X"));
+
+ button.onclick = () => deleteMovie(id);
+
+ row.setAttribute("id", id);
+ row.appendChild(createTD(film.titel));
+ row.appendChild(createTD(film.regisseur));
+ row.appendChild(createTD(film.jahr));
+ row.appendChild(createTD(film.spielzeit));
+ row.appendChild(createTD(film.fsk));
+ row.appendChild(button);
+
+ return row;
+ }
+
+ function appendFilm(film) {
+ let table = document.querySelector("#filmtable > tbody");
+ table.appendChild(createRow(num, film));
+ num++;
+ }
+
+ function checkSubmit(event) {
+ if (event.charCode === 13) {
+ // Do not submit the form by pressing enter
+ event.preventDefault();
+
+ // Let the form check for missing fields
+ let valid = document.querySelector('form').reportValidity();
+
+ if (!valid) {
+ return;
+ }
+
+ let film = extractFilm();
+
+ filme.push(film);
+ appendFilm(film);
+
+ for (let e of document.querySelectorAll('input')) {
+ e.value = "";
+ }
+
+ document.getElementById("title").focus();
+ }
+ }
+
+ function clear() {
+ for (num--; num > 0; num--) {
+ deleteMovie(num);
+ }
+
+ num = 1;
+ }
+
+ function sort(event) {
+ let column = event.target.getAttribute("data-field");
+ let type = event.target.getAttribute("data-type");
+
+ if (type == "string") {
+ filme.sort((a, b) => a[column].localeCompare(b[column]));
+ }
+ else {
+ filme.sort((a, b) => a[column] - b[column]);
+ }
+ clear();
+ init();
+ }
+
+
+ function init() {
+ for (let film of filme) {
+ appendFilm(film);
+ }
+
+ for (let e of document.querySelectorAll('input')) {
+ e.addEventListener('keypress', checkSubmit);
+ }
+
+ for (let e of document.querySelectorAll('th')) {
+ e.addEventListener('click', sort);
+ }
+ }
+
+ init();
+})();
diff --git a/readme.md b/readme.md
index c42271c..bffe2b0 100644
--- a/readme.md
+++ b/readme.md
@@ -10,9 +10,9 @@ Die Kursmaterialien finden Sie, wie immer, im [Moodle](https://moodle.hs-mannhei
Hier finden Sie die wöchentlichen Assignments für die Vorlesung Webbasierte Systeme (WEB). Die Assignments sind unten, zusammen mit dem Fälligkeitsdatum, aufgelistet.
-| # | Ausgabe | Thema | Fällig am 📆 |
-|----|------------|-----------------------------------------------------------|----------------|
-| 1. | 09.10.2023 | [Fanseite ohne Styling](Assignment_001/readme.md) | **15.10.2023** |
-| 2. | 16.10.2023 | [Styling der Fanseite mit CSS](Assignment_002/readme.md) | **22.10.2023** |
-| 3. | 23.10.2023 | [Fanseite responsive machen](Assignment_003/readme.md) | **05.11.2023** |
-| 4. | 06.11.2023 | [Interaktive Filmdatenbank](Assignment_004/readme.md) | **19.11.2023** |
+| # | Ausgabe | Thema | Fällig am 📆 | Musterlösung |
+|----|------------|-----------------------------------------------------------|----------------|----------------|
+| 1. | 09.10.2023 | [Fanseite ohne Styling](Assignment_001/readme.md) | **15.10.2023** | |
+| 2. | 16.10.2023 | [Styling der Fanseite mit CSS](Assignment_002/readme.md) | **22.10.2023** | |
+| 3. | 23.10.2023 | [Fanseite responsive machen](Assignment_003/readme.md) | **05.11.2023** | |
+| 4. | 06.11.2023 | [Interaktive Filmdatenbank](Assignment_004/readme.md) | **19.11.2023** | [✅](Assignment_004/solution/readme.md) |