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