← Allt kursmaterial
Tillfälle 1 · Övning 1 · 20–25 minuter

🛠️ Mitt eget lilla verktyg

Bygg en liten webbapp som du själv har nytta av, med AI-agenten som programmerare. När du är klar ligger den på GitHub och går att öppna i mobilen.

Innan du börjar: du behöver Git, ett GitHub-konto med gh inloggat och Claude- eller ChatGPT-appen. Se installationsguiderna.

  1. Välj ett projekt

    Välj det som låter roligast, eller hitta på ett eget. Varje projekt har en färdig startprompt som du kan kopiera.

    🛒 Inköpslista eller veckomatsedel
    Startprompt 
    Bygg en inköpslista som en webbapp i den här mappen.

Funktioner:
- Jag kan lägga till varor, bocka av dem och ta bort dem.
- Avbockade varor hamnar längst ner i listan.
- En knapp rensar alla avbockade varor.
- Allt sparas i webbläsaren (localStorage) så att det finns kvar när jag laddar om sidan.

Krav:
- Använd bara HTML, CSS och JavaScript. Ingen server, inget byggsteg och inga paket som behöver installeras.
- Startsidan ska heta index.html och ligga direkt i mappen. Använd bara relativa sökvägar så att sidan fungerar på GitHub Pages.
- Sidan ska fungera lika bra på mobil som på dator: responsiv layout som anpassar sig efter skärmbredden, rätt viewport-inställning, knappar och fält som är lätta att träffa med fingret och ingen sidledsscroll.
- Använd svenska i hela gränssnittet och sätt lang="sv" på sidan.
- Ge appen en tydlig titel, en favicon och en glad design med varma färger.
- Skapa en kort README.md som beskriver vad appen gör.

Börja med att visa mig en kort plan. Vänta på mitt okej innan du skriver några filer.

    Idéer för steg 4:

    • Gruppera varorna efter kategori, till exempel frukt, mejeri och bröd.
    • Lägg till en veckomatsedel där jag kan skriva in middag för varje dag.
    💧 Vanetracker
    Startprompt 
    Bygg en vanetracker som en webbapp i den här mappen.

Funktioner:
- Jag kan lägga till vanor, till exempel ”drack vatten” eller ”gick en promenad”.
- Varje dag kan jag bocka av de vanor jag har gjort.
- Jag ser hur många dagar i rad jag har klarat varje vana.
- Allt sparas i webbläsaren (localStorage) så att det finns kvar när jag laddar om sidan.

Krav:
- Använd bara HTML, CSS och JavaScript. Ingen server, inget byggsteg och inga paket som behöver installeras.
- Startsidan ska heta index.html och ligga direkt i mappen. Använd bara relativa sökvägar så att sidan fungerar på GitHub Pages.
- Sidan ska fungera lika bra på mobil som på dator: responsiv layout som anpassar sig efter skärmbredden, rätt viewport-inställning, knappar och fält som är lätta att träffa med fingret och ingen sidledsscroll.
- Använd svenska i hela gränssnittet och sätt lang="sv" på sidan.
- Ge appen en tydlig titel, en favicon och en glad design med varma färger.
- Skapa en kort README.md som beskriver vad appen gör.

Börja med att visa mig en kort plan. Vänta på mitt okej innan du skriver några filer.

    Idéer för steg 4:

    • Visa de senaste 7 dagarna som små rutor för varje vana.
    • Ge mig en peppande kommentar när jag har klarat alla vanor för dagen.
    💰 Budget för resa eller hushåll
    Startprompt 
    Bygg en budgetapp som en webbapp i den här mappen.

Funktioner:
- Jag kan lägga in utgifter med belopp, kategori och datum.
- Jag ser totalsumman och hur mycket som är kvar av en budget jag själv anger.
- Jag kan ta bort en utgift om jag skrivit fel.
- Allt sparas i webbläsaren (localStorage) så att det finns kvar när jag laddar om sidan.

Krav:
- Använd bara HTML, CSS och JavaScript. Ingen server, inget byggsteg och inga paket som behöver installeras.
- Startsidan ska heta index.html och ligga direkt i mappen. Använd bara relativa sökvägar så att sidan fungerar på GitHub Pages.
- Sidan ska fungera lika bra på mobil som på dator: responsiv layout som anpassar sig efter skärmbredden, rätt viewport-inställning, knappar och fält som är lätta att träffa med fingret och ingen sidledsscroll.
- Använd svenska i hela gränssnittet och sätt lang="sv" på sidan.
- Ge appen en tydlig titel, en favicon och en glad design med varma färger.
- Skapa en kort README.md som beskriver vad appen gör.

Börja med att visa mig en kort plan. Vänta på mitt okej innan du skriver några filer.

    Idéer för steg 4:

    • Visa ett enkelt stapeldiagram per kategori.
    • Låt mig exportera utgifterna som en CSV-fil.
    🧠 Quiz eller flashcards
    Startprompt 
    Bygg en flashcard-app som en webbapp i den här mappen.

Funktioner:
- Jag kan skapa kort med en fråga på ena sidan och ett svar på andra.
- Jag kan öva: kortet visar frågan och vänds när jag trycker på det.
- Jag markerar om jag kunde svaret, och korten jag inte kunde kommer oftare.
- Allt sparas i webbläsaren (localStorage) så att det finns kvar när jag laddar om sidan.

Krav:
- Använd bara HTML, CSS och JavaScript. Ingen server, inget byggsteg och inga paket som behöver installeras.
- Startsidan ska heta index.html och ligga direkt i mappen. Använd bara relativa sökvägar så att sidan fungerar på GitHub Pages.
- Sidan ska fungera lika bra på mobil som på dator: responsiv layout som anpassar sig efter skärmbredden, rätt viewport-inställning, knappar och fält som är lätta att träffa med fingret och ingen sidledsscroll.
- Använd svenska i hela gränssnittet och sätt lang="sv" på sidan.
- Ge appen en tydlig titel, en favicon och en glad design med varma färger.
- Skapa en kort README.md som beskriver vad appen gör.

Börja med att visa mig en kort plan. Vänta på mitt okej innan du skriver några filer.

    Idéer för steg 4:

    • Låt mig ha flera kortlekar, till exempel ”Spanska” och ”Historia”.
    • Visa hur många procent rätt jag hade på senaste övningen.

    Eget projekt? Använd en av startprompterna som mall och byt ut raderna under Funktioner. Låt raderna under Krav stå kvar, det är de som gör att appen fungerar på mobilen och på GitHub Pages.

  2. Skapa en mapp och öppna den i appen

    Skapa en tom mapp i din kursmapp, till exempel kurs/inkopslista.

    • Claude: fliken Code → Local → Select folder. Välj läget Manual.
    • Codex: välj Codex → Add new project. Välj Ask for approval.

  3. Klistra in startprompten och läs planen

    Agenten visar först en plan. Läs den, ställ frågor om något är oklart och svara sedan Kör!. Godkänn filerna den vill skapa.

    Öppna index.html i webbläsaren och prova appen. Vill du se hur den ser ut på en mobil? Tryck F12 (eller ⌥ + ⌘ + I på Mac) och klicka på mobilikonen.

  4. Bygg vidare i små steg

    Be om en sak i taget och testa efter varje steg. Ta en idé från projektet du valde, eller beskriv något du själv saknar. Hittar du ett fel? Beskriv vad du gjorde, vad du förväntade dig och vad som hände.

    Exempel 
    När jag lägger till en vara med tom text dyker en tom rad upp. Det ska inte gå att lägga till tomma varor.

  5. Spara och publicera

    Låt agenten sköta Git och GitHub åt dig:

    Prompt 
    Spara allt med Git och lägg upp projektet på GitHub som ett publikt repo med hjälp av gh. Slå sedan på GitHub Pages för main-grenen och ge mig länken till den publicerade sidan.

    Varför publikt? GitHub Pages är gratis för publika repon. Lägg därför inga personliga uppgifter i koden. Det du skriver in i själva appen sparas bara i din egen webbläsare.

    Det tar någon minut innan sidan är uppe. Öppna sedan länken i mobilen. 🎉

Klart?

Hann du inte klart? Det gör inget, gör färdigt hemma. Ta med appen till nästa lektion så bygger vi vidare.