Inlämningsuppgift 2 - Budget-app med TypeScript

Information

• Betygsskala: IG/G/VG
• Deadline: fre 13 februari 2026 kl. 22.00
• Feedback: ingen planerad
• Mål från kursplanen som examineras:
  • 7. använda TypeScript i webbutveckling
  • 9. skapa och manipulera HTML samt händelser i JavaScript
  • 10. hantera data i listor (arrays) samt JSON
• Starta inlämningsuppgiften via GitHub Classroom-länken som finns på sidan Länkar.
• Inlämning:
  1. Commit:a och pusha koden till repot på GitHub. Verifiera att det du har på datorn även syns på GitHub.
  2. Klistra in länken till repot på itslearning i inlämningsboxen.

Uppgiftsbeskrivning

I den här uppgiften ska du skapa en liten "budget-app" där man kan mata in inkomster och utgifter, samt få en balansöversikt.

Uppgiften repeterar koncepten från första inlämningsuppgiften, men med mindre vägledning och detaljbeskrivningar (för att du ska kunna koppla ihop koncepten/se återanvändbara kunskaper/identifiera liknande koncept på egen hand). Uppgiften är inte vägledd på samma sätt som inlämningsuppgift 1, men utnyttja handledningstillfällena om du kör fast!

⚠️ Se dock steg-för-steg-anvisningar längre ner!

Syftet med uppgiften

Du lär dig att:

• Repetera koncept
• Översätta koncept från en uppgift till en annan (se hurdant samma principer kan appliceras på en annan uppgift)

Generellt

• All information ska presenteras på en och samma sida.
• Applikationen ska vara responsiv, men du behöver inte göra värsta fina sidan med CSS.
• Du har initierat projektet med Vite och TypeScript.
• Du har använt någon form av linter, t.ex. ESLint/Prettier eller Biome/Oxlint och den är installerad som en dependency i projektet, samt du har skapat en konfigurationsfil som finns med i repot.
• Sidan ska vara publicerad på GitHub Pages.

Vecka 1 (2-6 februari) - Grundläggande JavaScript, repetition

Du ska skapa en liten "budget-app". I appen ska det finnas med:

• Ett fält för att mata in en utgift (belopp och beskrivning)
• Ett fält för att mata in en inkomst (belopp och beskrivning)
• Bredvid varje budgetpost ska det finnas en radera-knapp
• Det ska visas en balans (inkomster minus utgifter)
• Balansens ska färgkodas beroende på om det är ett positivt eller negativt värde
• Balansen ska uppdateras varje gång en ny utgift eller inkomst matas in
• Till varje budgetpost ska det gå att välja en kategori från en dropdown-lista (select)
• Informationen ska sparas i local storage så att när användaren kommer till sidan nästa gång, så ska informationen finnas kvar. Nytt
• Kategorierna ska läsas in via JSON. Vi går igenom detta på lektionen. Nytt

TypeScript

För att slippa "hjälpmeddelanden" från TypeScript första veckan kan du skriva // @ts-nocheck HÖGST UPP i dina JavaScript-filer (innan någon övrig kod), för att stänga av TypeScript-checkern.

Vecka 2 (9-13 februari) Nytt

Vecka 2 ska du implementera TypeScript OVANPÅ uppgiften.

Du ska skapa ett interface för hur en utgiftspost och/eller intäktspost kan se ut. Lagra det i en separat fil som heter models.ts och importera den där du behöver använda den.

Du ska skapa ett interface för din lista med utgifter och/eller intäkter. Dvs. använda interfacet i en array-kontext.

Du ska konvertera minst två funktioner i din kod till att ha TypeScript.

Glöm inte att aktivera TypeScript-checken genom att ta bort ev. // @ts-nocheck i dina JavaScript-filer.

Att göra

Förslag på tillvägagångssätt:

Steg 1. Initiera projektet med Vite

Börja med att skapa ett nytt Vite-projekt. Välj att initiera projektet med TypeScript.

Titta på Vite-modulen från vecka 2 som går igenom i detalj hur du gör ett nytt projekt.

Steg 2. Pseudokod/arkitketur

Tips: rita ett flödesschema och skriv pseudokod. Fundera på hur appen ska "bete" sig och vad som ska hända i vilket skede.

Steg 3. Mata in utgifter

Skapa ett formulär för att mata in utgifter.

Du kan sedan kopiera detta för inkomster.

Steg 4. Spara informationen i local storage

När en ny utgift matas in, se till att den sparas i local storage. Prova sedan att ladda om sidan, och se till att informationen läses av från local storage och används/visas.

Steg 5. Radera budgetposter

Implementera sedan en funktion för att radera budgetposter.

Steg 6. Räkna ut balansen

Gör sedan en funktion för att räkna samman balansen.

Steg 7. TypeScript - Vecka 2

I denna del ska du öva på att "type:a" JavaScript, dvs. bestämma vilken typ av information som får användas. Hittills har vi t.ex. kunnat göra såhär:

let number = '12';
number = 12;

Med TypeScript kommer ovan att generera ett fel, för en text kan inte vara en siffra.

Steg 8. Publicera sidan på GitHub Pages

Se till att du kan använda workflow-scriptet för att publicera sidan på GitHub Pages.

Du kan t.ex. kopiera workflow-scriptet från inlämningsuppgift 2 😃

Bedömningsexempel

För IG

• Du har inte utfört uppgiften enligt kriterierna ovan.
• Du har inte följt best practice.
• Det är tydligt att du inte har tagit till dig av studiematerialet från vecka 1-4 samt TypeScript.
• Sidan är inte publicerad på GitHub Pages.

För G

• Du har utfört uppgiften enligt kravspecifikationen ovan.

För VG

• Du har utfört uppgiften enligt kravspecifikationen.
• Du har visat på djupare förståelse för programmering, t.ex. genom att:
• Du har tillgänglighetsgranskat din sida.
• Du har följt best practice för HTML, CSS och JavaScript och kan sätta ihop koncepten.
• Du har fattat egna beslut och lagt till någon egen funktion/förbättring.
• Du kan avgöra när någonting ska ligga i HTML, när det ska göras med CSS och när det är lämpligt att göra det med JavaScript. Rätt verktyg för rätt ändamål.
• Sidan är responsiv.

🚚 Klona repot till din egen profil

• Klona repo till egen profil

Eller om du vill göra det via terminalen:

1. Skapa ett nytt repo på https://github.com/new
2. Notera adressen till repot, du ska klistra in den i steg 2 istället för URL

git remote rm origin # ta bort kopplingen till nuvarande repo (Medieinstitutet)
git remote add origin URL # klistra in adressen till ditt repo istället
git branch -M main # skapa branchen main
git push -u origin main # pusha koden

Verifiera sedan att du på GitHub ser koden (uppdatera sidan).

Våga Fråga

Anonyma frågelådan

Vanliga misstag

Glöm inte att titta igenom Vanliga misstag för JavaScript, men också misstagslistorna för HTML och CSS.