## Aufgabe
Ein Warenkorb soll erstellt werden, in dem Benutzer Artikel hinzufügen und entfernen können.
1. **Artikel zum Warenkorb hinzufügen:**
   - Ein neues `<li>`-Element erstellen;
   - Ein neues `<button>`-Element erstellen;
   - Das neue `<button>`-Element zum neuen `<li>`-Element hinzufügen;
   - Das neue `<li>`-Element zur `<ul>` mit der ID `cart-list` hinzufügen.
2. **Artikel aus dem Warenkorb entfernen:** Das spezifische `<li>`-Element aus der `<ul>` löschen.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNob3BwaW5nIENhcnQ8L2gxPgogICAgPGlucHV0CiAgICAgIHR5cGU9InRleHQiCiAgICAgIGlkPSJwcm9kdWN0LW5hbWUtaW5wdXQiCiAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciBwcm9kdWN0IG5hbWUiCiAgICAvPgogICAgPGJ1dHRvbiBpZD0iYWRkLXRvLWNhcnQtYnRuIj5BZGQgdG8gQ2FydDwvYnV0dG9uPgogICAgPHVsIGlkPSJjYXJ0LWxpc3QiPjwvdWw+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdWZXJkYW5hJywgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZjOwogIG1hcmdpbjogMDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4OwogIGNvbG9yOiAjMzMzOwp9CgpoMSB7CiAgZm9udC1zaXplOiAycmVtOwogIGNvbG9yOiAjMDA3YmZmOwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmlucHV0W3R5cGU9J3RleHQnXSB7CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDFyZW07CiAgYm9yZGVyOiAxcHggc29saWQgI2NlZDRkYTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgd2lkdGg6IDI1MHB4OwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmJ1dHRvbiB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyMTg4Mzg7Cn0KCiNhZGQtdG8tY2FydC1idG4gewogIG1hcmdpbi1sZWZ0OiAxMHB4Owp9Cgp1bCB7CiAgbGlzdC1zdHlsZS10eXBlOiBub25lOwogIHBhZGRpbmc6IDA7CiAgd2lkdGg6IDMwMHB4OwogIG1hcmdpbi10b3A6IDFyZW07Cn0KCmxpIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMTBweDsKICBtYXJnaW4tYm90dG9tOiA4cHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjMzMzOwp9CgpsaSBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNkYzM1NDU7CiAgcGFkZGluZzogNXB4IDEwcHg7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmxpIGJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2M4MjMzMzsKfQ==

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50Ll9fX19fKCdsaScpOwogIGNhcnRJdGVtLnRleHRDb250ZW50ID0gcHJvZHVjdE5hbWVJbnB1dC52YWx1ZTsKCiAgLy8gQ3JlYXRlICJSZW1vdmUiIGJ1dHRvbiBmb3IgdGhlIGNhcnQgaXRlbQogIGNvbnN0IHJlbW92ZUJ0biA9IGRvY3VtZW50Ll9fX19fKCdidXR0b24nKTsKICByZW1vdmVCdG4udGV4dENvbnRlbnQgPSAnUmVtb3ZlJzsKCiAgLy8gQXBwZW5kIHRoZSAiUmVtb3ZlIiBidXR0b24gdG8gdGhlIGNhcnQgaXRlbQogIGNhcnRJdGVtLl9fX19fKHJlbW92ZUJ0bik7CgogIC8vIEFwcGVuZCB0aGUgbmV3IGl0ZW0gdG8gdGhlIGNhcnQgbGlzdAogIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsKCiAgLy8gQ2xlYXIgdGhlIGlucHV0IGZpZWxkCiAgcHJvZHVjdE5hbWVJbnB1dC52YWx1ZSA9ICcnOwoKICAvLyBBZGQgY2xpY2sgZXZlbnQgdG8gIlJlbW92ZSIgYnV0dG9uIHRvIGRlbGV0ZSB0aGUgaXRlbQogIHJlbW92ZUJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsgLy8gUmVtb3ZlIHRoZSBzcGVjaWZpYyA8bGk+IGl0ZW0KICB9KTsKfSk7

- `createElement` verwenden, um ein neues `<li>`-Element zu erstellen;
- `createElement` verwenden, um ein neues `<button>`-Element zu erstellen;
- `appendChild` verwenden, um das neue `<button>`-Element zum `<li>`-Element hinzuzufügen;
- `appendChild` verwenden, um das neue `<li>`-Element zur `<ul>` mit der ID `cart-list` hinzuzufügen;
- `removeChild` verwenden, um das spezifische `<li>`-Element aus der `<ul>` zu löschen.

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgY2FydEl0ZW0udGV4dENvbnRlbnQgPSBwcm9kdWN0TmFtZUlucHV0LnZhbHVlOwoKICAvLyBDcmVhdGUgIlJlbW92ZSIgYnV0dG9uIGZvciB0aGUgY2FydCBpdGVtCiAgY29uc3QgcmVtb3ZlQnRuID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgcmVtb3ZlQnRuLnRleHRDb250ZW50ID0gJ1JlbW92ZSc7CgogIC8vIEFwcGVuZCB0aGUgIlJlbW92ZSIgYnV0dG9uIHRvIHRoZSBjYXJ0IGl0ZW0KICBjYXJ0SXRlbS5hcHBlbmRDaGlsZChyZW1vdmVCdG4pOwoKICAvLyBBcHBlbmQgdGhlIG5ldyBpdGVtIHRvIHRoZSBjYXJ0IGxpc3QKICBjYXJ0TGlzdC5hcHBlbmRDaGlsZChjYXJ0SXRlbSk7CgogIC8vIENsZWFyIHRoZSBpbnB1dCBmaWVsZAogIHByb2R1Y3ROYW1lSW5wdXQudmFsdWUgPSAnJzsKCiAgLy8gQWRkIGNsaWNrIGV2ZW50IHRvICJSZW1vdmUiIGJ1dHRvbiB0byBkZWxldGUgdGhlIGl0ZW0KICByZW1vdmVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICBjYXJ0TGlzdC5yZW1vdmVDaGlsZChjYXJ0SXRlbSk7IC8vIFJlbW92ZSB0aGUgc3BlY2lmaWMgPGxpPiBpdGVtCiAgfSk7Cn0pOw==

Beherrschen Sie grundlegende JavaScript-Konzepte, einschließlich Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Erlernen Sie die Erstellung dynamischer und interaktiver Webanwendungen durch Verwaltung von Benutzerinteraktionen, das Abrufen und Anzeigen von Daten sowie die effiziente Handhabung asynchroner Operationen. Dieser Kurs vermittelt Ihnen durch eine Kombination aus Theorie, praxisnahen Herausforderungen und realen Beispielen die praktischen Fähigkeiten, die für die moderne Webentwicklung erforderlich sind.

Erlernen der Grundlagen von JavaScript-Klassen, von Klassendeklarationen bis zur Definition von Methoden zur Erweiterung der Funktionalität.
Entdeckung des effektiven Einsatzes von Parameterobjekten, Verwaltung privater Eigenschaften und Steuerung des Zugriffs mit Gettern und Setzern.
Beherrschung statischer Eigenschaften und statischer Methoden sowie Nutzung der Leistungsfähigkeit der Klassenvererbung mit "extends" und "super()" zur Entwicklung skalierbarer und wiederverwendbarer Codes.

Beherrschen Sie die DOM-Manipulation zur Erstellung dynamischer, interaktiver Webanwendungen. Navigieren und verändern Sie die Struktur des DOM, aktualisieren Sie Inhalte dynamisch und setzen Sie Best Practices für Sicherheit und Performance um. Unterscheiden Sie zwischen Eigenschaften und Attributen, um Ihren Code zu optimieren.

Erschließen Sie die Interaktivität Ihrer Webanwendungen durch das Beherrschen von JavaScript-Ereignissen. Verstehen Sie die Ereignisweiterleitung, steuern Sie das Ereignisverhalten und implementieren Sie effiziente Ereignisbehandlung für Benutzerinteraktionen. Optimieren Sie die Leistung mit fortgeschrittenen Techniken wie der Ereignisdelegation.

Vertiefung in asynchrones JavaScript, einschließlich Callbacks, Promises und async/await. Vermittlung von Methoden zum Abrufen von Daten aus APIs, zur Integration von Drittanbieter-Bibliotheken und zum effizienten Umgang mit mehreren Anfragen, um Kompetenzen für die Entwicklung datengetriebener Anwendungen zu erwerben.

Herausforderung: Hinzufügen und Entfernen von DOM-Elementen

Aufgabe

Awesome!

Herausforderung: Hinzufügen und Entfernen von DOM-Elementen

Aufgabe