Oppgaver: {#if} og {#each}

Her skal du trene mengde på {#if} og {#each}. Vi starter enkelt og øker vanskelighetsgraden.

Tips: Bruk console.log() hvis du står fast for å se hva variablene dine inneholder.

Nivå 1: Lett

� Hei på deg!

Vis eller skjul en hilsen ved å bruke en checkbox.

Krav:

  • Lag en variabel visHilsen = false.
  • Lag en checkbox koblet til denne variabelen.
  • Bruk {#if visHilsen} for å vise "Hei på deg!" når boksen er krysset av.
Nivå 1: Lett

🛒 Handleliste

Vis en enkel liste med varer.

Krav:

  • Lag varer: let varer = ["Melk", "Brød", "Egg"];.
  • Bruk {#each} til å vise alle varene i en <ul> liste.
Nivå 1: Lett

🔢 Nummerert liste

Lag en liste som viser indeksen til hver vare.

Krav:

  • Bruk listen fra forrige oppgave.
  • Bruk each varer as vare, i for å få tak i indeksen.
  • Vis teksten: "Vare 1: Melk", "Vare 2: Brød" osv. (Husk at datamaskiner teller fra 0, så du må bruke i + 1).
Nivå 2: Medium

� Kun partall i godteposen

Loop gjennom tall, men vis kun partall.

Krav:

  • Lag listen: let tall = [1, 2, 3, 4, 5, 6];.
  • Bruk {#each}.
  • Inni løkken: Bruk {#if t % 2 === 0} for å sjekke om tallet er partall. Vis kun disse.
Nivå 2: Medium

📝 Lange ord

Vis kun ord som er lengre enn 5 bokstaver.

Krav:

  • Listen: ["Bil", "Sykkel", "Tog", "Helikopter"];.
  • Bruk {#if ord.length > 5} inni løkken for å filtrere visningen.
Nivå 2: Medium

🔐 Admin-listen

Skjul hele listen hvis man ikke er admin.

Krav:

  • Lag variabel erAdmin (checkbox).
  • Lag en liste med "Hemmelige dokumenter" (strings).
  • Bruk {#if erAdmin} rundt hele listen.
  • Bruk {:else} for å vise "Ingen tilgang".
Nivå 3: Avansert

🔍 Søkefunksjon

Lag en enkel søkemotor som filtrerer navn.

Krav:

  • Liste: ["Per", "Pål", "Espen", "Jan", "Petter"];.
  • Lag et tekstfelt bundet til variabelen sok.
  • Vis kun navn som inneholder teksten i søkefeltet (bruk navn.toLowerCase().includes(sok.toLowerCase()) i if-blokken).
Nivå 3: Avansert

🌡️ Temperatur-farger

Styling basert på verdi.

Krav:

  • Liste med temperaturer: [-5, 12, 23, -2, 0, 15];.
  • Loop gjennom alle.
  • Bruk {#if temp < 0} for å gi tallet blå farge (class="kald").
  • Bruk {:else if temp > 20} for rød farge.
  • Vanlig farge ellers.
Nivå 3: Avansert

📅 Måned-velger

Vis kun måneder i et bestemt intervall.

Krav:

  • Lag reell liste: "Januar", "Februar" ... "Desember".
  • Lag to tall-inputs: fraMnd (f.eks. 0) og tilMnd.
  • Bruk indeks i i løkken. Vis kun måneden {#if i >= fraMnd && i <= tilMnd}.
🐞 Feilsøking 1

Hele listen gjentas?

Hvorfor vises "Per, Pål, Espen" tre ganger, i stedet for navnene enkeltvis?

let elever = ["Per", "Pål", "Espen"];

{#each elever as elev}
  <li>{elever}</li>
{/each}

Oppgave:

Finn feilen og rett koden.

🐞 Feilsøking 2

Ensom 'else'

Denne koden krasjer / virker ikke. Hvorfor?

{#if alder > 18}
  <p>Voksen</p>
{else} <!-- Feil her -->
  <p>Barn</p>
{/if}

Oppgave:

Finn feilen og rett koden.

🐞 Feilsøking 3

Ugyldig loop

Ingenting skjer, eller siden blir hvit.

let antall = 5;
{#each antall as tall}
  <p>{tall}</p>
{/each}

Oppgave:

Finn feilen og rett koden.