## Aufgabe
Sie bauen einen Einkaufswagen, in dem Benutzer Artikel hinzufügen und entfernen können.
1. **Einen Artikel zum Warenkorb hinzufügen:**
   - Erstellen Sie ein neues `<li>`-Element;
   - Erstellen Sie ein neues `<button>`-Element;
   - Fügen Sie das neue `<button>`-Element dem neuen `<li>`-Element hinzu;
   - Fügen Sie ein neues `<li>`-Element zur `<ul>` mit der ID `cart-list` hinzu.
2. **Einen Artikel aus dem Warenkorb entfernen:** Löschen Sie das spezifische `<li>`-Element aus der `<ul>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNob3BwaW5nIENhcnQ8L2gxPgogICAgPGlucHV0CiAgICAgIHR5cGU9InRleHQiCiAgICAgIGlkPSJwcm9kdWN0LW5hbWUtaW5wdXQiCiAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciBwcm9kdWN0IG5hbWUiCiAgICAvPgogICAgPGJ1dHRvbiBpZD0iYWRkLXRvLWNhcnQtYnRuIj5BZGQgdG8gQ2FydDwvYnV0dG9uPgogICAgPHVsIGlkPSJjYXJ0LWxpc3QiPjwvdWw+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdWZXJkYW5hJywgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZjOwogIG1hcmdpbjogMDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4OwogIGNvbG9yOiAjMzMzOwp9CgpoMSB7CiAgZm9udC1zaXplOiAycmVtOwogIGNvbG9yOiAjMDA3YmZmOwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmlucHV0W3R5cGU9J3RleHQnXSB7CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDFyZW07CiAgYm9yZGVyOiAxcHggc29saWQgI2NlZDRkYTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgd2lkdGg6IDI1MHB4OwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmJ1dHRvbiB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyMTg4Mzg7Cn0KCiNhZGQtdG8tY2FydC1idG4gewogIG1hcmdpbi1sZWZ0OiAxMHB4Owp9Cgp1bCB7CiAgbGlzdC1zdHlsZS10eXBlOiBub25lOwogIHBhZGRpbmc6IDA7CiAgd2lkdGg6IDMwMHB4OwogIG1hcmdpbi10b3A6IDFyZW07Cn0KCmxpIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMTBweDsKICBtYXJnaW4tYm90dG9tOiA4cHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjMzMzOwp9CgpsaSBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNkYzM1NDU7CiAgcGFkZGluZzogNXB4IDEwcHg7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmxpIGJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2M4MjMzMzsKfQ==

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50Ll9fX19fKCdsaScpOwogIGNhcnRJdGVtLnRleHRDb250ZW50ID0gcHJvZHVjdE5hbWVJbnB1dC52YWx1ZTsKCiAgLy8gQ3JlYXRlICJSZW1vdmUiIGJ1dHRvbiBmb3IgdGhlIGNhcnQgaXRlbQogIGNvbnN0IHJlbW92ZUJ0biA9IGRvY3VtZW50Ll9fX19fKCdidXR0b24nKTsKICByZW1vdmVCdG4udGV4dENvbnRlbnQgPSAnUmVtb3ZlJzsKCiAgLy8gQXBwZW5kIHRoZSAiUmVtb3ZlIiBidXR0b24gdG8gdGhlIGNhcnQgaXRlbQogIGNhcnRJdGVtLl9fX19fKHJlbW92ZUJ0bik7CgogIC8vIEFwcGVuZCB0aGUgbmV3IGl0ZW0gdG8gdGhlIGNhcnQgbGlzdAogIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsKCiAgLy8gQ2xlYXIgdGhlIGlucHV0IGZpZWxkCiAgcHJvZHVjdE5hbWVJbnB1dC52YWx1ZSA9ICcnOwoKICAvLyBBZGQgY2xpY2sgZXZlbnQgdG8gIlJlbW92ZSIgYnV0dG9uIHRvIGRlbGV0ZSB0aGUgaXRlbQogIHJlbW92ZUJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsgLy8gUmVtb3ZlIHRoZSBzcGVjaWZpYyA8bGk+IGl0ZW0KICB9KTsKfSk7

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

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgY2FydEl0ZW0udGV4dENvbnRlbnQgPSBwcm9kdWN0TmFtZUlucHV0LnZhbHVlOwoKICAvLyBDcmVhdGUgIlJlbW92ZSIgYnV0dG9uIGZvciB0aGUgY2FydCBpdGVtCiAgY29uc3QgcmVtb3ZlQnRuID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgcmVtb3ZlQnRuLnRleHRDb250ZW50ID0gJ1JlbW92ZSc7CgogIC8vIEFwcGVuZCB0aGUgIlJlbW92ZSIgYnV0dG9uIHRvIHRoZSBjYXJ0IGl0ZW0KICBjYXJ0SXRlbS5hcHBlbmRDaGlsZChyZW1vdmVCdG4pOwoKICAvLyBBcHBlbmQgdGhlIG5ldyBpdGVtIHRvIHRoZSBjYXJ0IGxpc3QKICBjYXJ0TGlzdC5hcHBlbmRDaGlsZChjYXJ0SXRlbSk7CgogIC8vIENsZWFyIHRoZSBpbnB1dCBmaWVsZAogIHByb2R1Y3ROYW1lSW5wdXQudmFsdWUgPSAnJzsKCiAgLy8gQWRkIGNsaWNrIGV2ZW50IHRvICJSZW1vdmUiIGJ1dHRvbiB0byBkZWxldGUgdGhlIGl0ZW0KICByZW1vdmVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICBjYXJ0TGlzdC5yZW1vdmVDaGlsZChjYXJ0SXRlbSk7IC8vIFJlbW92ZSB0aGUgc3BlY2lmaWMgPGxpPiBpdGVtCiAgfSk7Cn0pOw==

Dieser Kurs bietet eine tiefgehende Erkundung der wichtigsten JavaScript-Prinzipien, mit Schwerpunkt auf Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Sie lernen, dynamische und interaktive Elemente zu erstellen, Benutzerinteraktionen zu verwalten und asynchrone Operationen zu handhaben. Durch eine Mischung aus Theorie und praktischen Herausforderungen hilft Ihnen dieser Kurs, praktische JavaScript-Fähigkeiten für reale Anwendungen zu entwickeln.

Lernen Sie die Grundlagen von JavaScript-Klassen, von Klassendeklarationen bis hin zur Definition von Methoden, die die Funktionalität verbessern. Entdecken Sie, wie Sie Parameterobjekte effektiv nutzen, private Eigenschaften verwalten und den Zugriff mit Gettern und Settern steuern. Beherrschen Sie statische Eigenschaften und statische Methoden und entfesseln Sie die Kraft der Klassenvererbung mit "extends" und "super()", um skalierbaren und wiederverwendbaren Code zu erstellen.

Beherrschen Sie die DOM-Manipulation, um dynamische, interaktive Webanwendungen zu erstellen. Navigieren und ändern Sie die Struktur des DOM, aktualisieren Sie Inhalte dynamisch und implementieren Sie Best Practices für Sicherheit und Leistung. Unterscheiden Sie zwischen Eigenschaften und Attributen, um Ihren Code zu optimieren.

Entfesseln Sie die Interaktivität Ihrer Webanwendungen, indem Sie JavaScript-Ereignisse meistern. Verstehen Sie die Ereignisausbreitung, steuern Sie das Ereignisverhalten und implementieren Sie eine effiziente Ereignisbehandlung für Benutzerinteraktionen. Optimieren Sie die Leistung mit fortgeschrittenen Techniken wie der Ereignisdelegation.

Dieser Abschnitt behandelt die Grundlagen von asynchronem JavaScript, einschließlich Callbacks, Promises und async/await. Sie lernen, Daten von APIs abzurufen, Drittanbieter-Bibliotheken zu integrieren und mehrere Anfragen effizient zu bearbeiten, um Fähigkeiten zum Erstellen datengetriebener Anwendungen zu entwickeln.

Herausforderung: Hinzufügen und Entfernen von Elementen

Aufgabe

Herausforderung: Hinzufügen und Entfernen von Elementen

Aufgabe