Oppgaver: Svelte Intro

Svelte gjør nettsider levende! Her er oppgaver som blander HTML med JavaScript dataverden og Svelte kode som binder dem sammen.

Tips: Fokuser på variabler og bind:value. Du trenger ikke bruke "Runer" ($state).

Nivå 1: Lett

🔢 Vise en verdi

Opprett en verdi i dataverden og vise den på det grafiske brukergrensesnittet.

Krav:

  • Lag en variabel let mittTall = 0;.
  • Vis antallet i et p-element med {mittTall}.
Nivå 1: Lett

🗣️ Ekko

Lag en tekstinput hvor teksten du skriver vises tre ganger etter hverandre.

Krav:

  • Input felt med bind:value.
  • Vis teksten tre ganger etter hverandre (f.eks. Hei Hei Hei) på nettsiden.
Nivå 1: Lett

🏷️ Navneskilt Generator

Lag et dynamisk navneskilt som oppdaterer seg mens du skriver.

Krav:

  • Lag variabler for navn og tittel i script-taggen.
  • Lag to input-felter som bruker bind:value mot disse variablene.
  • Vis innholdet i en pen boks under (bruk { }).
Nivå 2: Medium

🎨 Stemnings-skifter

Lag en nettside som skifter utseende basert på input fra brukeren.

Krav:

  • Bruk en <input type="color"> og bind den til en variabel.
  • Bruk denne variabelen i style-attributtet til en <div> for å endre bakgrunnsfargen.
  • Legg til en slider (range input) som styrer border-radius (hvor rund boksen er) på samme måten.
Nivå 2: Medium

🧮 Minikalkulator

Lag to input-felter for tall og legg dem sammen.

Krav:

  • To input felter (type="number") med bind:value.
  • Vis summen (Tall 1 + Tall 2) automatisk.
Nivå 2: Medium

🌑 Dark Mode Toggle

Lag to radioknapper som bytter mellom "Dark Mode" og "Light Mode".

Krav:

  • To input elementer av type="radio" med value="darkgreen" og value="lightgreen"
  • Bruk bind:group mot kun en variabel.
  • Bakgrunnsfargen til et div element skal kunne settes til lysegrønt eller mørkegrønt.
Nivå 3: Utfordring

⚽ Fotballkort

Lag et interaktivt spillerkort hvor total-scoren regnes ut automatisk.

Krav:

  • Lag variabler for speed, shooting og passing (tall 0-100).
  • Bind disse til hver sin slider (type="range").
  • Regn ut gjennomsnittet av disse tallene og vis det som "Rating" på kortet.
Nivå 3: Utfordring

📝 Velg font-family

En nedtreksliste med tre forskjellige font-family.

Krav:

  • En variabel for en font-family verdi som string.
  • En nedtreksliste med tre forskjellige font-family verdier.
  • Et tekst element der font-familyen vises.
Nivå 3: Utfordring

🖼️ Bildegalleri

Lag to radio-knapper for å bytte mellom to bilder.

Krav:

  • En variabel for en bilde-url som string.
  • To radio-knapper der brukeren kan velge det ene eller det andre bilde og som endrer variabelen til to forskjellige url bildeadresser fra nettet.
  • Vis bildet som matcher valgt beskrivelse.
🐞 Feilsøking

Den glemte bindingen

En utvikler prøver å få teksten til å oppdatere seg, men ingenting skjer når man skriver.

<script>
  let navn = "Ukjent";
</script>

<input type="text" value={navn}>
<p>Hei, {navn}!</p>

Oppgave:

Hvorfor endres ikke navn? Hva må byttes ut i input-feltet?

🐞 Feilsøking

Matte-trøbbel

Vi prøver å legge sammen 5 + 5

<input type="text" bind:value={tall1}>
<input type="text" bind:value={tall2}>
<p>Sum: {tall1 + tall2}</p>

Oppgave:

Men svaret blir 55! Hvorfor?

🐞 Feilsøking

Variable virker ikke

Jeg får en feilmelding med denne koden.

<script>
  count = 0;
  count = count + 2;
</script>

Oppgave:

Hvorfor fungerer ikke koden?