Oppgaver: Svelte Runer

Svelte 5 introduserer "Runes" for å håndtere reaktivitet. Her skal vi øve på $state for data og $derived for avledede verdier.

Tips: Husk at i Svelte 5 trenger du ikke lenger $: for avledede verdier, vi bruker nå $derived().

Nivå 1: Lett

🔢 Vise variabler

Vis en variabel i HTML-en.

Krav:

  • Lag en variabel let tall = $state(0);.
  • Vis variabelen i HTML-en.
  • Bruk av $state for å oppdatere variabelen vil ikke ennå virke annerledes, men blir viktig senere!
Nivå 2: Medium

📐 Areal Kalkulator

Lag en kalkulator som regner ut arealet automatisk når lengde eller bredde endres.

Krav:

  • Lag lengde og bredde som $state.
  • Lag en variabel areal ved hjelp av $derived() som ganger lengde med bredde.
  • Koble input-felt til lengde og bredde.
  • Vis arealet i et html element (oppdateres automatisk).
Nivå 3: Avansert

🛒 Handlekurv Sum

Vi har en vare med pris og antall. Beregn totalpris, og sjekk om vi har råd (krever bruk av if-betingelse!).

Krav:

  • Variabler for pris, antall og budsjett (alle $state).
  • total skal være en $derived av pris * antall.
  • harRad skal være en $derived som er true hvis budsjett >= total.
  • Vis totalpris og en tekst som sier "Kjøp!" eller "For dyrt!" basert på harRad.
🐞 Feilsøking

Den fastlåste summen

En utvikler prøver å legge sammen to tall, men summen oppdaterer seg ikke når tallene endres.

<script>
  let a = $state(10);
  let b = $state(20);
  let sum = a + b;
</script>

<input type="number" bind:value={a} />
<p>Summen er: {sum}</p>

Oppgave:

Hvorfor endres ikke sum når a eller b endres? Hva må legges til?