## Tehtävä
Rakennat interaktiivista korttia, jonka ulkoasua käyttäjä voi muuttaa. Käyttäjät voivat vaihtaa kortin taustaväriä, muuttaa sen kokoa ja ottaa käyttöön tai poistaa "korostettu"-tilan lisätyylityksiä varten.
1. **Muuta sisäisiä tyylejä**: Kun painiketta painetaan:
   - Vaihda `<div>`-elementin, jonka ID on `card`, taustaväriksi `"lightblue"`;
   - Aseta kortin leveys arvoon `"300px"`;
   - Lisää korttiin reunus `2px solid #333`.
2. **Korostusluokan vaihtaminen**: Kun painiketta painetaan:
   - Lisää tai poista `highlight`-luokka `<div>`-elementistä, jonka ID on `card`.
3. **Tumman teeman luokan lisääminen**: Kun painiketta painetaan:
   - Lisää tai poista `dark-theme`-luokka `<body>`-elementistä, jolloin sivun teema vaihtuu.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmN2Y5ZmM7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpoMiB7CiAgY29sb3I6ICMzMzM7CiAgZm9udC1zaXplOiAxLjVyZW07Cn0KCnAgewogIGNvbG9yOiAjNjY2OwogIGZvbnQtc2l6ZTogMXJlbTsKfQoKI2NhcmQgewogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7CiAgbWF4LXdpZHRoOiA0MjBweDsKICBtYXJnaW46IDIwcHggYXV0bzsKICBib3JkZXI6IDFweCBzb2xpZCAjZGRkOwp9CgouYnV0dG9uLWNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDE1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbjogNXB4OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKfQoKI2NoYW5nZS1zdHlsZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMxN2EyYjg7Cn0KCiNjaGFuZ2Utc3R5bGUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTM4NDk2Owp9CgojdG9nZ2xlLWhpZ2hsaWdodC1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICNmZmMxMDc7CiAgY29sb3I6ICMzMzM7Cn0KCiN0b2dnbGUtaGlnaGxpZ2h0LWJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UwYTgwMDsKfQoKI3RvZ2dsZS10aGVtZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7Cn0KCiN0b2dnbGUtdGhlbWUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE4ODM4Owp9CgouaGlnaGxpZ2h0IHsKICBib3gtc2hhZG93OiAwcHggMHB4IDE1cHggcmdiYSgyNTUsIDE2NSwgMCwgMC44KTsKICBib3JkZXItY29sb3I6ICNmZmE1MDA7Cn0KCi5kYXJrLXRoZW1lIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiB3aGl0ZTsKfQ==

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuX19fX18gPSAnbGlnaHRibHVlJzsKICBjYXJkLl9fX19fLl9fX19fID0gX19fX187CiAgY2FyZC5fX19fXy5fX19fXyA9IF9fX19fOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0Ll9fX19fKCdoaWdobGlnaHQnKTsKfSk7CgovLyBUb2dnbGUgdGhlIGRhcmsgdGhlbWUgY2xhc3Mgb24gdGhlIGJvZHkKY29uc3QgdG9nZ2xlVGhlbWVCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndG9nZ2xlLXRoZW1lLWJ0bicpOwoKdG9nZ2xlVGhlbWVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgZG9jdW1lbnQuYm9keS5fX19fXy5fX19fXyhfX19fXyk7Cn0pOw==

- Käytä `style.backgroundColor` vaihtaaksesi `<div>`-elementin, jonka ID on `card`, taustaväriksi `"lightblue"`;
- Käytä `style.width` asettaaksesi kortin leveydeksi `"300px"`;
- Käytä `style.border` lisätäksesi korttiin reunuksen `2px solid #333`;
- Käytä `classList.toggle()` lisätäksesi tai poistaaksesi `highlight`-luokan `<div>`-elementistä, jonka ID on `card`;
- Käytä `classList.toggle()` lisätäksesi tai poistaaksesi `dark-theme`-luokan `<body>`-elementistä, jolloin sivun teema vaihtuu.

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJ2xpZ2h0Ymx1ZSc7CiAgY2FyZC5zdHlsZS53aWR0aCA9ICczMDBweCc7CiAgY2FyZC5zdHlsZS5ib3JkZXIgPSAnMnB4IHNvbGlkICMzMzMnOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0LnRvZ2dsZSgnaGlnaGxpZ2h0Jyk7Cn0pOwoKLy8gVG9nZ2xlIHRoZSBkYXJrIHRoZW1lIGNsYXNzIG9uIHRoZSBib2R5CmNvbnN0IHRvZ2dsZVRoZW1lQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RvZ2dsZS10aGVtZS1idG4nKTsKCnRvZ2dsZVRoZW1lQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnRvZ2dsZSgnZGFyay10aGVtZScpOwp9KTs=

Hallitse keskeiset JavaScript-konseptit, kuten luokat, DOM-manipulointi, tapahtumien käsittely ja asynkroninen ohjelmointi. Opiskele dynaamisten ja interaktiivisten verkkosovellusten rakentamista hallitsemalla käyttäjävuorovaikutuksia, tietojen hakua ja näyttämistä sekä asynkronisten toimintojen tehokasta käsittelyä. Teorian, käytännön haasteiden ja reaalimaailman esimerkkien yhdistelmällä tämä kurssi antaa käytännön taidot moderniin web-kehitykseen.

Opi JavaScript-luokkien perusteet, luokkien määrittelystä toimintaa laajentavien metodien luomiseen. Tutustu parametriesineiden tehokkaaseen käyttöön, yksityisten ominaisuuksien hallintaan sekä pääsyn rajoittamiseen gettereillä ja settereillä. Hallitse staattiset ominaisuudet ja staattiset metodit sekä hyödynnä luokkaperintää "extends"- ja "super()"-avainsanoilla skaalautuvan ja uudelleenkäytettävän koodin rakentamiseksi.

Hallitse DOM-manipulointi dynaamisten ja interaktiivisten web-sovellusten luomiseksi. Selaa ja muokkaa DOM:n rakennetta, päivitä sisältöä dynaamisesti sekä toteuta parhaat käytännöt turvallisuuden ja suorituskyvyn varmistamiseksi. Erota ominaisuudet ja attribuutit koodin optimointia varten.

Avaa verkkosovellustesi vuorovaikutteisuus hallitsemalla JavaScript-tapahtumat. Ymmärrä tapahtumien eteneminen, hallitse tapahtumien käyttäytymistä ja toteuta tehokas tapahtumien käsittely käyttäjävuorovaikutuksia varten. Optimoi suorituskyky edistyneillä tekniikoilla, kuten tapahtumien delegoinnilla.

Syvenny asynkroniseen JavaScriptiin, mukaan lukien callbackit, Promiset ja async/await. Opi hakemaan dataa API-rajapinnoista, integroimaan kolmannen osapuolen kirjastoja sekä käsittelemään useita pyyntöjä tehokkaasti, kehittäen taitoja datavetoisten sovellusten rakentamiseen.

Haaste: Dynaamisten Tyylien Soveltaminen DOM-Elementteihin

Tehtävä

Awesome!

Haaste: Dynaamisten Tyylien Soveltaminen DOM-Elementteihin

Tehtävä