En enkel applikasjon for å lage, flytte og slette oppgaver uten distrakjon som gjør det lett og oversiktelig for å ha full kontroll over oppgaver man har å gjøre for dagen.
- Lege til oppgaver (Ved å trykke på + eller enklere trykke på enter).
- For hver oppgave som blir lagt til, plusses det på 1 på teller over liste, slik at man har oversikt over antall oppgaver.
- For hver oppgave man utfører trykker man "check - til høyre på oppgave" og det blir registrert hvor mange oppgaver man har utført.
- Funksjon for å slette individuelle oppgaver.
- Funksjon for å flytte opp og ned individuelle oppgaver, slik at man kan endre rekkefølge etter prioritering og viktighet for hver oppgave.
- Bruker useEffect til å lagre state lokalt i localStorage, slik at oppgaver som er utført og ikke utført blir husket hvis siden oppdateres. useEffect trigges hver gang det er endring i state, og lagrer da oppdatert state i localStorage. Når siden oppdateres og lastes inn på nytt brukes useEffect til å hente ut sist lagred state i localStorage.
For å holde oversikt over antall tasks som er lagt til, valgte jeg og løse det med "tasks.length". Det gir meg automatisk tallet på antall oppgaver lagt til i tasks og displayer det ved å brule {tasks.length}.
For å holde styr på antall utførte oppgaver, laget jeg en Toggle component. Denne component tillsvarer en knapp som viser om oppgave er utført. Ved å bruke task.id for hver oppgave kan jeg lett holde oversikt over hvilken oppgaver som er togglet. I selve ToDoList brukes Toggle til individuelle oppgaver i liste, Toggle oppdaterer tillstand til hver oppgave basert på task.id.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.