## Oppgave
Du lager et skjema hvor brukere kan sende inn sine opplysninger. Målet er å validere brukerens inndata, gi tilbakemelding i sanntid mens de skriver, og forhindre innsending av skjemaet hvis inndataene er ugyldige.
1. **Sanntids tilbakemelding på inndata**:
   - Lytt etter endringer mens brukeren skriver;
   - Sjekk lengden på inndataen inne i hendelsesbehandleren;
   - Hvis den er mindre enn 3 tegn, sett innholdet i `<p>` med ID `feedback` til `"Name is too short."`;
   - Hvis den er 3 tegn eller mer, sett `feedback` til `"Name looks good!"`.
2. **Forhindre standard innsending av skjema**:
   - Lytt etter innsending av skjemaet;
   - Stopp skjemaet fra å utføre standard innsending;
   - Sjekk inndataen;
   - Hvis den er mindre enn 3 tegn, vis `"Please enter a longer name"` i `<p>` med ID `form-message`;
   - Hvis den er 3 tegn eller mer, vis `"Form submitted successfully!"` i `form-message`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNpZ24gVXAgRm9ybTwvaDE+CiAgICA8Zm9ybSBpZD0idXNlci1mb3JtIj4KICAgICAgPGxhYmVsIGZvcj0ibmFtZS1pbnB1dCI+TmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUtaW5wdXQiIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIG5hbWUiIC8+CiAgICAgIDxidXR0b24gaWQ9InN1Ym1pdC1idG4iIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CiAgICAgIDxwIGlkPSJmZWVkYmFjayI+PC9wPgogICAgICA8cCBpZD0iZm9ybS1tZXNzYWdlIj48L3A+CiAgICA8L2Zvcm0+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmM2Y0ZjY7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIGNvbG9yOiAjMWYyOTM3Owp9CgpoMSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgY29sb3I6ICMzYjgyZjY7CiAgbWFyZ2luLWJvdHRvbTogMjVweDsKfQoKZm9ybSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAyNXB4IDMwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDI1cHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7Cn0KCmxhYmVsIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM0YjU1NjM7CiAgbWFyZ2luLWJvdHRvbTogNXB4Owp9CgppbnB1dFt0eXBlPSd0ZXh0J10gewogIHBhZGRpbmc6IDEycHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNkMWQ1ZGI7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7Cn0KCmlucHV0W3R5cGU9J3RleHQnXTpmb2N1cyB7CiAgYm9yZGVyLWNvbG9yOiAjM2I4MmY2OwogIG91dGxpbmU6IG5vbmU7CiAgYm94LXNoYWRvdzogMCAwIDhweCByZ2JhKDU5LCAxMzAsIDI0NiwgMC4zKTsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTBiOTgxOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwNTk2Njk7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpOwp9CgpidXR0b246YWN0aXZlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7Cn0KCiNmZWVkYmFjayB7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgY29sb3I6ICNmNTllMGI7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQoKI2Zvcm0tbWVzc2FnZSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGZvbnQtd2VpZ2h0OiA3MDA7CiAgbWFyZ2luLXRvcDogNnB4Owp9CgojZm9ybS1tZXNzYWdlLnN1Y2Nlc3MgewogIGNvbG9yOiAjMTBiOTgxOwp9CgojZm9ybS1tZXNzYWdlLmVycm9yIHsKICBjb2xvcjogI2VmNDQ0NDsKfQ==

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcihfX19fXywgZnVuY3Rpb24gKGV2ZW50KSB7CiAgaWYgKF9fX19fKSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0gZWxzZSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKF9fX19fLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgfSBlbHNlIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

- Bruk `input`-hendelsen for å lytte etter endringer mens brukeren skriver;
- Bruk `event.target.value.length < 3` for å sjekke lengden på inndataen;
- Bruk `submit`-hendelsen for å lytte etter innsending av skjemaet;
- Bruk `event.preventDefault()` for å stoppe skjemaet fra å utføre standard innsending;
- Bruk `nameInput.value.length < 3` for å sjekke inndataen.

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBpZiAoZXZlbnQudGFyZ2V0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgaXMgdG9vIHNob3J0Lic7CiAgfSBlbHNlIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgbG9va3MgZ29vZCEnOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKCdzdWJtaXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gJ1BsZWFzZSBlbnRlciBhIGxvbmdlciBuYW1lJzsKICB9IGVsc2UgewogICAgZm9ybU1lc3NhZ2UudGV4dENvbnRlbnQgPSAnRm9ybSBzdWJtaXR0ZWQgc3VjY2Vzc2Z1bGx5ISc7CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

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: Implementere Hendelseslyttere

Oppgave

Awesome!

Utfordring: Implementere Hendelseslyttere

Oppgave