I denna inlämningsuppgift kommer ni att skapa er egen todo-lista. Sidan skall visa ett antal punkter som skall göras. Dessa skall då komma upp på skärmen i form av en lista. När uppgiften är slutförd skall användaren kunna markera uppgiften som slutförd och uppgiften skall då tas bort från listan.
- Skapa en hårdkodad lista med punkter att göra (hitta på egna punkter)
- Presentera denna på skärmen, helst med lite kontroll. Detta betyder i en html-struktur t.ex. i en ul/li-lista
- Implementera klickhändelse för att hantera borttagandet av en todo.
- Todo tas bort från skärmen och markeras som klar i javascript-listan.
- Implementera ett valfritt grafiskt ramverk till din todolista, t.ex. bootstrap, flex, grid, material ui, tailwind eller liknande :)
- Alla punkter under G
- Kunna visa även klara händelser och klicka tillbaka den så att de blir oklara igen.
- Skapa ett formulär som tillåter att en användare skapar nya todos efterhand.
- Kunna sortera ordningen på dina todos
Ett extra moment i denna uppgift är att ni behöver göra er applikation responsiv. Tänk igenom en bra responsitivitet och hur det skall fungera med just er sida, era todos. Vad skall skilja i presentationen mellan desktop och mobil?
- Använda mobile first
- Använda minst en breakpoint
- Använda scss (nästling, variabler et.c.)
- Använda mixins för att göra er responsitivitet
Projektet ni har är ett vite-projekt. D.v.s. ni måste köra:
npm ioch
npm run dev för att köra projektet.
- Det finns många sätt att lösa denna uppgift på. Om ni känner er osäkra på någonting, fråga hellre någon gång för mycket så att ni känner er säkra på vad ni utvecklar.
- Ni får gärna ändra strukturen i projektet, detta är bara en grund.
- Börja med att planera ert arbete, börja inte med Visual Studio Code, även om det är lockande.
- Gör ert bästa att inte stressa. Lättare sagt än gjort, jag vet. Men ingen mår bättre av att stressa.
- Ha roligt, skratta när det blir fel och fortsätt att vara nyfiken :)