## Oppgave
Du bygger en handlekurv der brukere kan legge til og fjerne varer. 
1. **Legg til et element i handlekurven:**
   - Opprett et nytt `<li>`-element;
   - Opprett et nytt `<button>`-element;
   - Legg til det nye `<button>`-elementet i det nye `<li>`-elementet;
   - Legg til det nye `<li>`-elementet i `<ul>`-elementet med ID `cart-list`.
2. **Fjern et element fra handlekurven:** Slett det spesifikke `<li>`-elementet fra `<ul>`-elementet.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNob3BwaW5nIENhcnQ8L2gxPgogICAgPGlucHV0CiAgICAgIHR5cGU9InRleHQiCiAgICAgIGlkPSJwcm9kdWN0LW5hbWUtaW5wdXQiCiAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciBwcm9kdWN0IG5hbWUiCiAgICAvPgogICAgPGJ1dHRvbiBpZD0iYWRkLXRvLWNhcnQtYnRuIj5BZGQgdG8gQ2FydDwvYnV0dG9uPgogICAgPHVsIGlkPSJjYXJ0LWxpc3QiPjwvdWw+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdWZXJkYW5hJywgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZjOwogIG1hcmdpbjogMDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4OwogIGNvbG9yOiAjMzMzOwp9CgpoMSB7CiAgZm9udC1zaXplOiAycmVtOwogIGNvbG9yOiAjMDA3YmZmOwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmlucHV0W3R5cGU9J3RleHQnXSB7CiAgcGFkZGluZzogMTBweDsKICBmb250LXNpemU6IDFyZW07CiAgYm9yZGVyOiAxcHggc29saWQgI2NlZDRkYTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgd2lkdGg6IDI1MHB4OwogIG1hcmdpbi1ib3R0b206IDFyZW07Cn0KCmJ1dHRvbiB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBib3JkZXI6IG5vbmU7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyMTg4Mzg7Cn0KCiNhZGQtdG8tY2FydC1idG4gewogIG1hcmdpbi1sZWZ0OiAxMHB4Owp9Cgp1bCB7CiAgbGlzdC1zdHlsZS10eXBlOiBub25lOwogIHBhZGRpbmc6IDA7CiAgd2lkdGg6IDMwMHB4OwogIG1hcmdpbi10b3A6IDFyZW07Cn0KCmxpIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgcGFkZGluZzogMTBweDsKICBtYXJnaW4tYm90dG9tOiA4cHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjMzMzOwp9CgpsaSBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNkYzM1NDU7CiAgcGFkZGluZzogNXB4IDEwcHg7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmxpIGJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2M4MjMzMzsKfQ==

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50Ll9fX19fKCdsaScpOwogIGNhcnRJdGVtLnRleHRDb250ZW50ID0gcHJvZHVjdE5hbWVJbnB1dC52YWx1ZTsKCiAgLy8gQ3JlYXRlICJSZW1vdmUiIGJ1dHRvbiBmb3IgdGhlIGNhcnQgaXRlbQogIGNvbnN0IHJlbW92ZUJ0biA9IGRvY3VtZW50Ll9fX19fKCdidXR0b24nKTsKICByZW1vdmVCdG4udGV4dENvbnRlbnQgPSAnUmVtb3ZlJzsKCiAgLy8gQXBwZW5kIHRoZSAiUmVtb3ZlIiBidXR0b24gdG8gdGhlIGNhcnQgaXRlbQogIGNhcnRJdGVtLl9fX19fKHJlbW92ZUJ0bik7CgogIC8vIEFwcGVuZCB0aGUgbmV3IGl0ZW0gdG8gdGhlIGNhcnQgbGlzdAogIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsKCiAgLy8gQ2xlYXIgdGhlIGlucHV0IGZpZWxkCiAgcHJvZHVjdE5hbWVJbnB1dC52YWx1ZSA9ICcnOwoKICAvLyBBZGQgY2xpY2sgZXZlbnQgdG8gIlJlbW92ZSIgYnV0dG9uIHRvIGRlbGV0ZSB0aGUgaXRlbQogIHJlbW92ZUJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIGNhcnRMaXN0Ll9fX19fKGNhcnRJdGVtKTsgLy8gUmVtb3ZlIHRoZSBzcGVjaWZpYyA8bGk+IGl0ZW0KICB9KTsKfSk7

- Bruk `createElement` for å opprette et nytt `<li>`-element;
- Bruk `createElement` for å opprette et nytt `<button>`-element;
- Bruk `appendChild` for å legge til det nye `<button>`-elementet i `<li>`-elementet;
- Bruk `appendChild` for å legge til det nye `<li>`-elementet i `<ul>`-elementet med ID `cart-list`;
- Bruk `removeChild` for å slette det spesifikke `<li>`-elementet fra `<ul>`-elementet.

Ly8gQWRkIGFuIGl0ZW0gdG8gdGhlIGNhcnQKY29uc3QgYWRkVG9DYXJ0QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FkZC10by1jYXJ0LWJ0bicpOwpjb25zdCBjYXJ0TGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJ0LWxpc3QnKTsKY29uc3QgcHJvZHVjdE5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUtaW5wdXQnKTsKCmFkZFRvQ2FydEJ0bi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAvLyBDcmVhdGUgYSBuZXcgPGxpPiBlbGVtZW50IGFuZCBzZXQgaXRzIHRleHQgdG8gaW5wdXQgdmFsdWUKICBjb25zdCBjYXJ0SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgY2FydEl0ZW0udGV4dENvbnRlbnQgPSBwcm9kdWN0TmFtZUlucHV0LnZhbHVlOwoKICAvLyBDcmVhdGUgIlJlbW92ZSIgYnV0dG9uIGZvciB0aGUgY2FydCBpdGVtCiAgY29uc3QgcmVtb3ZlQnRuID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgcmVtb3ZlQnRuLnRleHRDb250ZW50ID0gJ1JlbW92ZSc7CgogIC8vIEFwcGVuZCB0aGUgIlJlbW92ZSIgYnV0dG9uIHRvIHRoZSBjYXJ0IGl0ZW0KICBjYXJ0SXRlbS5hcHBlbmRDaGlsZChyZW1vdmVCdG4pOwoKICAvLyBBcHBlbmQgdGhlIG5ldyBpdGVtIHRvIHRoZSBjYXJ0IGxpc3QKICBjYXJ0TGlzdC5hcHBlbmRDaGlsZChjYXJ0SXRlbSk7CgogIC8vIENsZWFyIHRoZSBpbnB1dCBmaWVsZAogIHByb2R1Y3ROYW1lSW5wdXQudmFsdWUgPSAnJzsKCiAgLy8gQWRkIGNsaWNrIGV2ZW50IHRvICJSZW1vdmUiIGJ1dHRvbiB0byBkZWxldGUgdGhlIGl0ZW0KICByZW1vdmVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICBjYXJ0TGlzdC5yZW1vdmVDaGlsZChjYXJ0SXRlbSk7IC8vIFJlbW92ZSB0aGUgc3BlY2lmaWMgPGxpPiBpdGVtCiAgfSk7Cn0pOw==

Behersk grunnleggende JavaScript-konsepter, inkludert klasser, DOM-manipulering, hendelseshåndtering og asynkron programmering. Lær å lage dynamiske og interaktive webapplikasjoner ved å håndtere brukerinteraksjoner, hente og vise data, samt effektivt håndtere asynkrone operasjoner. Gjennom en kombinasjon av teori, praktiske utfordringer og eksempler fra virkeligheten gir dette kurset deg de praktiske ferdighetene som kreves for moderne webutvikling.

Lær det grunnleggende om JavaScript-klasser, fra klassedeklarasjoner til å definere metoder som utvider funksjonaliteten. Oppdag hvordan du bruker parameterobjekter effektivt, håndterer private egenskaper og kontrollerer tilgang med getters og setters. Mestre statiske egenskaper og statiske metoder, og utnytt kraften i klassearv ved å bruke "extends" og "super()" for å bygge skalerbar og gjenbrukbar kode.

Behersk DOM-manipulering for å lage dynamiske, interaktive webapplikasjoner. Naviger og endre DOM-strukturen, oppdater innhold dynamisk, og implementer beste praksis for sikkerhet og ytelse. Skille mellom egenskaper og attributter for å optimalisere koden din.

Lås opp interaktiviteten i dine webapplikasjoner ved å mestre JavaScript-hendelser. Forstå hendelsespropagering, kontroller hendelsesatferd, og implementer effektiv hendelseshåndtering for brukerinteraksjoner. Optimaliser ytelsen med avanserte teknikker som hendelsesdelegering.

Fordypning i asynkron JavaScript, inkludert callbacks, Promises og async/await. Lær hvordan du henter data fra API-er, integrerer tredjepartsbiblioteker og håndterer flere forespørsler effektivt, for å utvikle ferdigheter i å lage datadrevne applikasjoner.

Utfordring: Legg til og fjern DOM-elementer

Oppgave

Awesome!

Utfordring: Legg til og fjern DOM-elementer

Oppgave