## Tehtävä
Rakennat dynaamista listaa, johon käyttäjät voivat lisätä ja poistaa yksittäisiä kohteita.
1. Käytä **tapahtumien delegointia** lisäämällä yksi click-tapahtumakuuntelija `ul`-elementille, jonka ID on `dynamic-list`;
2. Kun kohdetta klikataan:
   - Jos klikattu elementti on `<li>`, näytä hälytys, jossa on klikattavan kohteen teksti;
   - Jos klikattu elementti on "Delete"-painike, poista vastaava `<li>`-kohde listasta.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHVsIGlkPSJkeW5hbWljLWxpc3QiPgogICAgICA8bGk+SXRlbSAxIDxidXR0b24gY2xhc3M9ImRlbGV0ZS1idG4iPkRlbGV0ZTwvYnV0dG9uPjwvbGk+CiAgICAgIDxsaT5JdGVtIDIgPGJ1dHRvbiBjbGFzcz0iZGVsZXRlLWJ0biI+RGVsZXRlPC9idXR0b24+PC9saT4KICAgIDwvdWw+CiAgICA8YnV0dG9uIGlkPSJhZGQtaXRlbSI+QWRkIEl0ZW08L2J1dHRvbj4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjRmODsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDIwcHggMDsKICB3aWR0aDogMzAwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA1cHggMTVweCByZ2JhKDAsIDAsIDAsIDAuMSk7Cn0KCiNkeW5hbWljLWxpc3QgbGkgewogIHBhZGRpbmc6IDEycHg7CiAgbWFyZ2luOiA4cHggMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmYWZiOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwogIGNvbG9yOiAjMWYyOTM3Owp9CgojZHluYW1pYy1saXN0IGxpOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTVlZmZmOwp9CgojZHluYW1pYy1saXN0IGJ1dHRvbiB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2VmNDQ0NDsKICBjb2xvcjogI2ZmZmZmZjsKICBib3JkZXI6IG5vbmU7CiAgcGFkZGluZzogNnB4IDEycHg7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIGZvbnQtc2l6ZTogMC45cmVtOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKI2R5bmFtaWMtbGlzdCBidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNkYzI2MjY7Cn0KCiNhZGQtaXRlbSB7CiAgcGFkZGluZzogMTBweCAxNXB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjM2I4MmY2OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgojYWRkLWl0ZW06aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMyNTYzZWI7Cn0=

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgphZGRJdGVtQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGl0ZW1Db3VudCsrOwogIGNvbnN0IG5ld0l0ZW0gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaScpOwogIG5ld0l0ZW0udGV4dENvbnRlbnQgPSBgSXRlbSAke2l0ZW1Db3VudH0gYDsKCiAgY29uc3QgZGVsZXRlQnV0dG9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYnV0dG9uJyk7CiAgZGVsZXRlQnV0dG9uLnRleHRDb250ZW50ID0gJ0RlbGV0ZSc7CiAgZGVsZXRlQnV0dG9uLmNsYXNzTGlzdC5hZGQoJ2RlbGV0ZS1idG4nKTsKCiAgbmV3SXRlbS5hcHBlbmRDaGlsZChkZWxldGVCdXR0b24pOwogIGR5bmFtaWNMaXN0LmFwcGVuZENoaWxkKG5ld0l0ZW0pOwp9KTsKCi8vIEV2ZW50IGRlbGVnYXRpb24gdG8gaGFuZGxlIGl0ZW0gYW5kIGRlbGV0ZSBidXR0b24gY2xpY2tzCl9fX19fLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZXZlbnQgPT4gewogIGlmIChfX19fXykgewogICAgYWxlcnQoYFlvdSBjbGlja2VkIG9uOiAke2V2ZW50LnRhcmdldC5maXJzdENoaWxkLnRleHRDb250ZW50fWApOwogIH0KCiAgaWYgKGV2ZW50LnRhcmdldC5jbGFzc0xpc3QuY29udGFpbnMoJ2RlbGV0ZS1idG4nKSkgewogICAgY29uc3QgbGlzdEl0ZW0gPSBldmVudC50YXJnZXQucGFyZW50Tm9kZTsKICAgIGR5bmFtaWNMaXN0LnJlbW92ZUNoaWxkKGxpc3RJdGVtKTsKICB9Cn0pOw==

- Käytä `event.target.tagName === 'LI'` tarkistaaksesi, onko klikattu elementti `<li>`;
- Käytä `event.target.classList.contains('delete-btn')` tarkistaaksesi, onko klikattu elementti "Delete"-painike.

Y29uc3QgZHluYW1pY0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZHluYW1pYy1saXN0Jyk7CmNvbnN0IGFkZEl0ZW1CdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYWRkLWl0ZW0nKTsKbGV0IGl0ZW1Db3VudCA9IDI7CgovLyBBZGQgbmV3IGl0ZW1zIHRvIHRoZSBsaXN0CmFkZEl0ZW1CdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgaXRlbUNvdW50Kys7CiAgY29uc3QgbmV3SXRlbSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2xpJyk7CiAgbmV3SXRlbS50ZXh0Q29udGVudCA9IGBJdGVtICR7aXRlbUNvdW50fSBgOwoKICBjb25zdCBkZWxldGVCdXR0b24gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdidXR0b24nKTsKICBkZWxldGVCdXR0b24udGV4dENvbnRlbnQgPSAnRGVsZXRlJzsKICBkZWxldGVCdXR0b24uY2xhc3NMaXN0LmFkZCgnZGVsZXRlLWJ0bicpOwoKICBuZXdJdGVtLmFwcGVuZENoaWxkKGRlbGV0ZUJ1dHRvbik7CiAgZHluYW1pY0xpc3QuYXBwZW5kQ2hpbGQobmV3SXRlbSk7Cn0pOwoKLy8gRXZlbnQgZGVsZWdhdGlvbiB0byBoYW5kbGUgaXRlbSBhbmQgZGVsZXRlIGJ1dHRvbiBjbGlja3MKZHluYW1pY0xpc3QuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LnRhcmdldC50YWdOYW1lID09PSAnTEknKSB7CiAgICBhbGVydChgWW91IGNsaWNrZWQgb246ICR7ZXZlbnQudGFyZ2V0LmZpcnN0Q2hpbGQudGV4dENvbnRlbnR9YCk7CiAgfQoKICBpZiAoZXZlbnQudGFyZ2V0LmNsYXNzTGlzdC5jb250YWlucygnZGVsZXRlLWJ0bicpKSB7CiAgICBjb25zdCBsaXN0SXRlbSA9IGV2ZW50LnRhcmdldC5wYXJlbnROb2RlOwogICAgZHluYW1pY0xpc3QucmVtb3ZlQ2hpbGQobGlzdEl0ZW0pOwogIH0KfSk7

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: Tapahtumien Etenemisen ja Delegoinnin Käsittely

Tehtävä

Awesome!

Haaste: Tapahtumien Etenemisen ja Delegoinnin Käsittely

Tehtävä