## Opgave
Du skal oprette et interaktivt kort, der kan ændre udseende baseret på brugerhandlinger. Brugere kan ændre baggrundsfarven på kortet, ændre dets størrelse og slå en "fremhævet" tilstand til eller fra for yderligere styling.
1. **Ændr inline-stilarter**: Når knappen klikkes:
   - Ændr baggrundsfarven på `<div>` med ID `card` til `"lightblue"`;
   - Sæt bredden på kortet til `"300px"`;
   - Tilføj en `2px solid #333` kant rundt om kortet.
2. **Slå en highlight-klasse til/fra**: Når knappen klikkes:
   - Tilføj eller fjern klassen `highlight` på `<div>` med ID `card`.
3. **Tilføj en dark-theme-klasse**: Når knappen klikkes:
   - Tilføj eller fjern klassen `dark-theme` på `<body>`, hvilket skal skifte sidens tema.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0iY2FyZCI+CiAgICAgIDxoMj5JbnRlcmFjdGl2ZSBDYXJkPC9oMj4KICAgICAgPHA+VGhpcyBjYXJkIGNoYW5nZXMgaXRzIHN0eWxlIGR5bmFtaWNhbGx5ITwvcD4KICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iYnV0dG9uLWNvbnRhaW5lciI+CiAgICAgIDxidXR0b24gaWQ9ImNoYW5nZS1zdHlsZS1idG4iPkNoYW5nZSBTdHlsZTwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUtaGlnaGxpZ2h0LWJ0biI+VG9nZ2xlIEhpZ2hsaWdodDwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUtdGhlbWUtYnRuIj5Ub2dnbGUgVGhlbWU8L2J1dHRvbj4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmN2Y5ZmM7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpoMiB7CiAgY29sb3I6ICMzMzM7CiAgZm9udC1zaXplOiAxLjVyZW07Cn0KCnAgewogIGNvbG9yOiAjNjY2OwogIGZvbnQtc2l6ZTogMXJlbTsKfQoKI2NhcmQgewogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7CiAgbWF4LXdpZHRoOiA0MjBweDsKICBtYXJnaW46IDIwcHggYXV0bzsKICBib3JkZXI6IDFweCBzb2xpZCAjZGRkOwp9CgouYnV0dG9uLWNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDE1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbjogNXB4OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKfQoKI2NoYW5nZS1zdHlsZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMxN2EyYjg7Cn0KCiNjaGFuZ2Utc3R5bGUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTM4NDk2Owp9CgojdG9nZ2xlLWhpZ2hsaWdodC1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICNmZmMxMDc7CiAgY29sb3I6ICMzMzM7Cn0KCiN0b2dnbGUtaGlnaGxpZ2h0LWJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UwYTgwMDsKfQoKI3RvZ2dsZS10aGVtZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7Cn0KCiN0b2dnbGUtdGhlbWUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE4ODM4Owp9CgouaGlnaGxpZ2h0IHsKICBib3gtc2hhZG93OiAwcHggMHB4IDE1cHggcmdiYSgyNTUsIDE2NSwgMCwgMC44KTsKICBib3JkZXItY29sb3I6ICNmZmE1MDA7Cn0KCi5kYXJrLXRoZW1lIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiB3aGl0ZTsKfQ==

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuX19fX18gPSAnbGlnaHRibHVlJzsKICBjYXJkLl9fX19fLl9fX19fID0gX19fX187CiAgY2FyZC5fX19fXy5fX19fXyA9IF9fX19fOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0Ll9fX19fKCdoaWdobGlnaHQnKTsKfSk7CgovLyBUb2dnbGUgdGhlIGRhcmsgdGhlbWUgY2xhc3Mgb24gdGhlIGJvZHkKY29uc3QgdG9nZ2xlVGhlbWVCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndG9nZ2xlLXRoZW1lLWJ0bicpOwoKdG9nZ2xlVGhlbWVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgZG9jdW1lbnQuYm9keS5fX19fXy5fX19fXyhfX19fXyk7Cn0pOw==

- Brug `style.backgroundColor` til at ændre baggrundsfarven på `<div>` med ID `card` til `"lightblue"`;
- Brug `style.width` til at sætte bredden på kortet til `"300px"`;
- Brug `style.border` til at tilføje en `2px solid #333` kant rundt om kortet;
- Brug `classList.toggle()` til at tilføje eller fjerne klassen `highlight` på `<div>` med ID `card`;
- Brug `classList.toggle()` til at tilføje eller fjerne klassen `dark-theme` på `<body>`, hvilket skal skifte sidens tema.

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJ2xpZ2h0Ymx1ZSc7CiAgY2FyZC5zdHlsZS53aWR0aCA9ICczMDBweCc7CiAgY2FyZC5zdHlsZS5ib3JkZXIgPSAnMnB4IHNvbGlkICMzMzMnOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0LnRvZ2dsZSgnaGlnaGxpZ2h0Jyk7Cn0pOwoKLy8gVG9nZ2xlIHRoZSBkYXJrIHRoZW1lIGNsYXNzIG9uIHRoZSBib2R5CmNvbnN0IHRvZ2dsZVRoZW1lQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RvZ2dsZS10aGVtZS1idG4nKTsKCnRvZ2dsZVRoZW1lQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnRvZ2dsZSgnZGFyay10aGVtZScpOwp9KTs=

Behersk væsentlige JavaScript-koncepter, herunder klasser, DOM-manipulation, eventhåndtering og asynkron programmering. Lær at skabe dynamiske og interaktive webapplikationer ved at håndtere brugerinteraktioner, hente og vise data samt håndtere asynkrone operationer effektivt. Gennem en kombination af teori, praktiske udfordringer og virkelighedsnære eksempler giver dette kursus dig de praktiske færdigheder, der er nødvendige for moderne webudvikling.

Lær grundlæggende JavaScript-klasser, fra klassedeklarationer til definition af metoder, der udvider funktionaliteten. Opdag, hvordan parameterobjekter anvendes effektivt, håndtering af private egenskaber og adgangskontrol med getters og setters. Behersk statiske egenskaber og statiske metoder, og udnyt styrken ved klassearv ved brug af "extends" og "super()" til at opbygge skalerbar og genanvendelig kode.

Behersk DOM-manipulation for at skabe dynamiske, interaktive webapplikationer. Naviger og modificer DOM-strukturen, opdater indhold dynamisk, og implementer bedste praksis for sikkerhed og ydeevne. Skeln mellem egenskaber og attributter for at optimere din kode.

Lås op for interaktiviteten i dine webapplikationer ved at mestre JavaScript-hændelser. Forstå hændelsespropagering, kontroller hændelsesadfærd, og implementer effektiv hændelseshåndtering for brugerinteraktioner. Optimer ydeevnen med avancerede teknikker som hændelsesdelegering.

Dyk ned i asynkron JavaScript, herunder callbacks, Promises og async/await. Lær at hente data fra API'er, integrere tredjepartsbiblioteker og håndtere flere forespørgsler effektivt, hvilket opbygger færdigheder til at skabe datadrevne applikationer.

Udfordring: Anvend Dynamiske Stilarter på DOM-Elementer

Opgave

Awesome!

Udfordring: Anvend Dynamiske Stilarter på DOM-Elementer

Opgave