To-Do Liste

Lag en enkel “to-do”-liste hvor du kan skrive inn ting du skal gjøre, trykke på en knapp for å legge dem til, krysse av når de er gjort, og trykke på en slett-knapp for å fjerne dem. Listen skal huske tingene dine selv om du lukker og åpner siden igjen.

Et felt for å skrive ny oppgave.
En knapp for å legge til oppgaven i listen.
For hver oppgave i listen:
- En boks du kan krysse av i (checkbox) for å vise at den er gjort.
- En knapp for å slette oppgaven.
Når du krysser av en oppgave, skal den se annerledes ut (f.eks., strek gjennom teksten).
Listen skal huske oppgavene dine selv om du lukker nettleseren.

Hint og Veiledning

HTML-grunnlag:
- Lag et <input type="text"> der du kan skrive inn oppgaver. Husk å gi den en id (f.eks., nyOppgave).
- Lag en <button> ved siden av for å legge til oppgaven. Bruk onclick for å si hva som skal skje når du trykker på den (f.eks., leggTil).
- Lag en <ul> (liste) der oppgavene skal vises. Gi den også en id (f.eks., listeMedOppgaver).
JavaScript-hjelp:
- Du trenger å hente tak i HTML-elementene dine ved hjelp av document.getElementById().
- Lagre data: For å huske listen, kan du bruke noe som heter localStorage.
  - For å lagre noe: localStorage.setItem('navnPåDetDuLagrer', 'detDuVilLagreSomTekst'). Hvis du har en liste med ting, må du gjøre den om til tekst først (bruk JSON.stringify()).
  - For å hente noe igjen: localStorage.getItem('navnPåDetDuLagrer'). Husk å gjøre teksten om til en liste igjen (bruk JSON.parse()).
- Legge til oppgave (når du trykker på knappen):
  - Hent teksten fra input-feltet.
  - Lag en ny “oppgave-ting” (et HTML <li>-element).
  - Inni dette <li>-elementet må du lage en <input type="checkbox">, en <span> for teksten, og en <button> for å slette.
  - Legg til denne “oppgave-tingen” til <ul>-listen din.
  - Husk å lagre den oppdaterte listen i localStorage.
  - Tøm input-feltet etter at du har lagt til oppgaven.
- Krysse av oppgave (checkbox):
  - Når du krysser av, må du finne ut hvilken oppgave det gjelder. Du kan for eksempel endre en “erFerdig”-egenskap for den oppgaven i listen din.
  - Oppdater hvordan oppgaven ser ut på skjermen (f.eks., legg til en CSS-klasse som gir gjennomstreking).
  - Husk å lagre den oppdaterte listen i localStorage.
- Slette oppgave (slett-knapp):
  - Når du trykker på slett-knappen, må du finne ut hvilken oppgave som skal slettes.
  - Fjern den oppgaven fra listen din.
  - Oppdater listen på skjermen.
  - Husk å lagre den oppdaterte listen i localStorage.
- Starte opp: Når siden laster, må du sjekke om det finnes en lagret liste i localStorage. Hvis det gjør det, må du hente den og vise den på skjermen.
CSS-styling (ikke et must, men gjør det finere): Du kan bruke CSS for å style hvordan oppgavene ser ut, hvordan de ser ut når de er ferdige, og hvordan knappene ser ut.

Vurderingskriterier

Legge til oppgaver: Fungerer funksjonen for å legge til nye oppgaver i listen?
Markere som utført: Kan oppgaver markeres som utført, og vises dette visuelt?
Slette oppgaver: Kan oppgaver slettes fra listen?
Lagring: Husker listen oppgavene mellom sidebesøk?

Forslag til løsning

Relaterte kompetansemål

planlegge, utvikle og dokumentere løsninger som er energieffektive og bærekraftige
planlegge, utvikle, sette opp og dokumentere integrasjoner mellom ulike systemer og databaser
veilede brukere i ulike oppgaver
utvikle og tilpasse brukergrensesnitt som ivaretar krav til universell utforming
velge og bruke relevante rammeverk og moduler til utvikling
utforske og vurdere eksisterende og nye teknologier og bransjerelevante kodespråk

Relaterte emner