## Taak
Je bouwt een winkelwagen waarin gebruikers items kunnen toevoegen en verwijderen.
1. **Voeg een item toe aan de winkelwagen:**
   - Maak een nieuw `<li>`-element aan;
   - Maak een nieuw `<button>`-element aan;
   - Voeg het nieuwe `<button>`-element toe aan het nieuwe `<li>`-element;
   - Voeg het nieuwe `<li>`-element toe aan de `<ul>` met de ID `cart-list`.
2. **Verwijder een item uit de winkelwagen:** Verwijder het specifieke `<li>`-element uit de `<ul>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNob3BwaW5nIENhcnQ8L2gxPgogICAgPGlucHV0CiAgICAgIHR5cGU9InRleHQiCiAgICAgIGlkPSJwcm9kdWN0LW5hbWUtaW5wdXQiCiAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciBwcm9kdWN0IG5hbWUiCiAgICAvPgogICAgPGJ1dHRvbiBpZD0iYWRkLXRvLWNhcnQtYnRuIj5BZGQgdG8gQ2FydDwvYnV0dG9uPgogICAgPHVsIGlkPSJjYXJ0LWxpc3QiPjwvdWw+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdWZXJkYW5hJywgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZjOwogIG1hcmdpbjogMDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4OwogIGNvbG9yOiAjMzMzOwp9CgpoMSB7CiAgZm9udC1zaXplOiAycmVtOwogIGNvbG9yOiAjMDA3YmZmOwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmlucHV0W3R5cGU9J3RleHQnXSB7CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDFyZW07CiAgYm9yZGVyOiAxcHggc29saWQgI2NlZDRkYTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgd2lkdGg6IDI1MHB4OwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmJ1dHRvbiB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyMTg4Mzg7Cn0KCiNhZGQtdG8tY2FydC1idG4gewogIG1hcmdpbi1sZWZ0OiAxMHB4Owp9Cgp1bCB7CiAgbGlzdC1zdHlsZS10eXBlOiBub25lOwogIHBhZGRpbmc6IDA7CiAgd2lkdGg6IDMwMHB4OwogIG1hcmdpbi10b3A6IDFyZW07Cn0KCmxpIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMTBweDsKICBtYXJnaW4tYm90dG9tOiA4cHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjMzMzOwp9CgpsaSBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNkYzM1NDU7CiAgcGFkZGluZzogNXB4IDEwcHg7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmxpIGJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2M4MjMzMzsKfQ==

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50Ll9fX19fKCdsaScpOwogIGNhcnRJdGVtLnRleHRDb250ZW50ID0gcHJvZHVjdE5hbWVJbnB1dC52YWx1ZTsKCiAgLy8gQ3JlYXRlICJSZW1vdmUiIGJ1dHRvbiBmb3IgdGhlIGNhcnQgaXRlbQogIGNvbnN0IHJlbW92ZUJ0biA9IGRvY3VtZW50Ll9fX19fKCdidXR0b24nKTsKICByZW1vdmVCdG4udGV4dENvbnRlbnQgPSAnUmVtb3ZlJzsKCiAgLy8gQXBwZW5kIHRoZSAiUmVtb3ZlIiBidXR0b24gdG8gdGhlIGNhcnQgaXRlbQogIGNhcnRJdGVtLl9fX19fKHJlbW92ZUJ0bik7CgogIC8vIEFwcGVuZCB0aGUgbmV3IGl0ZW0gdG8gdGhlIGNhcnQgbGlzdAogIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsKCiAgLy8gQ2xlYXIgdGhlIGlucHV0IGZpZWxkCiAgcHJvZHVjdE5hbWVJbnB1dC52YWx1ZSA9ICcnOwoKICAvLyBBZGQgY2xpY2sgZXZlbnQgdG8gIlJlbW92ZSIgYnV0dG9uIHRvIGRlbGV0ZSB0aGUgaXRlbQogIHJlbW92ZUJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsgLy8gUmVtb3ZlIHRoZSBzcGVjaWZpYyA8bGk+IGl0ZW0KICB9KTsKfSk7

- Gebruik `createElement` om een nieuw `<li>`-element aan te maken;
- Gebruik `createElement` om een nieuw `<button>`-element aan te maken;
- Gebruik `appendChild` om het nieuwe `<button>`-element toe te voegen aan het `<li>`-element;
- Gebruik `appendChild` om het nieuwe `<li>`-element toe te voegen aan de `<ul>` met de ID `cart-list`;
- Gebruik `removeChild` om het specifieke `<li>`-element uit de `<ul>` te verwijderen.

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgY2FydEl0ZW0udGV4dENvbnRlbnQgPSBwcm9kdWN0TmFtZUlucHV0LnZhbHVlOwoKICAvLyBDcmVhdGUgIlJlbW92ZSIgYnV0dG9uIGZvciB0aGUgY2FydCBpdGVtCiAgY29uc3QgcmVtb3ZlQnRuID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgcmVtb3ZlQnRuLnRleHRDb250ZW50ID0gJ1JlbW92ZSc7CgogIC8vIEFwcGVuZCB0aGUgIlJlbW92ZSIgYnV0dG9uIHRvIHRoZSBjYXJ0IGl0ZW0KICBjYXJ0SXRlbS5hcHBlbmRDaGlsZChyZW1vdmVCdG4pOwoKICAvLyBBcHBlbmQgdGhlIG5ldyBpdGVtIHRvIHRoZSBjYXJ0IGxpc3QKICBjYXJ0TGlzdC5hcHBlbmRDaGlsZChjYXJ0SXRlbSk7CgogIC8vIENsZWFyIHRoZSBpbnB1dCBmaWVsZAogIHByb2R1Y3ROYW1lSW5wdXQudmFsdWUgPSAnJzsKCiAgLy8gQWRkIGNsaWNrIGV2ZW50IHRvICJSZW1vdmUiIGJ1dHRvbiB0byBkZWxldGUgdGhlIGl0ZW0KICByZW1vdmVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICBjYXJ0TGlzdC5yZW1vdmVDaGlsZChjYXJ0SXRlbSk7IC8vIFJlbW92ZSB0aGUgc3BlY2lmaWMgPGxpPiBpdGVtCiAgfSk7Cn0pOw==

Beheers essentiële JavaScript-concepten, waaronder klassen, DOM-manipulatie, eventafhandeling en asynchrone programmering. Leer dynamische en interactieve webapplicaties te creëren door gebruikersinteracties te beheren, gegevens op te halen en weer te geven, en asynchrone operaties efficiënt af te handelen. Deze cursus biedt een combinatie van theorie, praktische uitdagingen en realistische voorbeelden, en voorziet je van de praktische vaardigheden die nodig zijn voor moderne webontwikkeling.

Leer de basisprincipes van JavaScript-klassen, van klasseverklaringen tot het definiëren van methoden die de functionaliteit verbeteren. Ontdek hoe u parameterobjecten effectief gebruikt, privé-eigenschappen beheert en de toegang regelt met getters en setters. Beheers statische eigenschappen en statische methoden en benut de kracht van klasse-overerving met behulp van "extends" en "super()" om schaalbare en herbruikbare code te bouwen.

Beheers DOM-manipulatie om dynamische, interactieve webapplicaties te creëren. Navigeer en wijzig de structuur van de DOM, werk inhoud dynamisch bij en implementeer best practices voor beveiliging en prestaties. Onderscheid eigenschappen en attributen om uw code te optimaliseren.

Ontgrendel de interactiviteit van webapplicaties door het beheersen van JavaScript-events. Begrijp event-propagatie, beheer eventgedrag en implementeer efficiënte eventafhandeling voor gebruikersinteracties. Optimaliseer prestaties met geavanceerde technieken zoals eventdelegatie.

Verdiep u in asynchrone JavaScript, inclusief callbacks, Promises en async/await. Leer hoe u gegevens ophaalt van API's, externe bibliotheken integreert en meerdere verzoeken efficiënt afhandelt, waarmee u vaardigheden ontwikkelt voor het bouwen van datagedreven applicaties.

Uitdaging: DOM-Elementen Toevoegen en Verwijderen

Taak